$30 off During Our Annual Pro Sale. View Details »

Speedup your web app

alexis
March 20, 2013

Speedup your web app

In this talk I give my strategy concerning web app optimisations. I show the way I proceed and the tools I use.

I gave this talk at GenevaRB and at Soft-Shake 2013:

http://www.meetup.com/genevarb/events/105831352/
http://soft-shake.ch/2013/program/sessions/13_ruby/2013/10/25/01-speedup-your-web-app.html

alexis

March 20, 2013
Tweet

More Decks by alexis

Other Decks in Programming

Transcript

  1. Speedup your web app
    Speedup your web app

    View Slide

  2. Who am I ?
    Alexis Bernard
    Github : @alexisbernard
    Twitter : @alexis_bernard
    Email : [email protected]
    Web developer for basesecrete.com

    View Slide

  3. Why faster web apps ?

    View Slide

  4. Why faster web apps ?
    Better user experience
    Better user experience
    Increase traffic and revenues
    Increase traffic and revenues

    View Slide

  5. Credit : http://www.strangeloopnetworks.com

    View Slide

  6. Credit : http://www.strangeloopnetworks.com

    View Slide

  7. Credit : http://www.strangeloopnetworks.com

    View Slide

  8. So, fast web apps are good for business.

    View Slide

  9. How to tackle web optimizations ?

    View Slide

  10. How to tackle web optimizations ?
    Before and after doing any optimzation,
    everything have to be measured,
    in order to see improvement.

    View Slide

  11. Measuring tools I use
    New Relic
    Rack Mini Profiler
    Chrome developer tools
    Web Page Test
    Pingdom

    View Slide

  12. New Relic
    Measures almost everything
    Very accurate and detailed
    Persistent
    But costly

    View Slide

  13. New Relic main graph

    View Slide

  14. Rack Mini Profiler
    Open source gem
    Well detailed measures
    Not persistent

    View Slide

  15. Rack mini profiler

    View Slide

  16. Chrome - Network tab

    View Slide

  17. Pingdom – Page grade
    Credit : http://tools.pingdom.com/fpt/

    View Slide

  18. Pingdom - Ranking
    Credit : http://tools.pingdom.com/fpt/

    View Slide

  19. WebPageTest runs the test 2 times
    Credit : http://www.webpagetest.org/

    View Slide

  20. Where to start optimisations after measuring ?

    View Slide

  21. My strategy is
    to optimise server reponse time first,
    and then turn on all HTTP and frontend tricks.

    View Slide

  22. Start by optimising server response
    time because of

    View Slide

  23. Optimising server response time
    is most of the time :
    Improving SQL queries
    and caching

    View Slide

  24. Database good practices
    Add b-tree indexes on most foreign keys
    Bitmap indexes are efficient on booleans and
    columns with low cardinality
    Use EXPLAIN when it's getting tricky
    Use index covering when table is getting huge

    View Slide

  25. EXPLAIN SELECT * FROM users WHERE address_street = 'Foo bar';
    QUERY PLAN
    ---------------------------------------------------------
    Seq Scan on users (cost=0.00..10.12 rows=1 width=5702)
    Filter: ((address_street)::text = 'Foo bar'::text)
    (2 rows)
    EXPLAIN SELECT * FROM users WHERE id = 123;
    QUERY PLAN
    ---------------------------------------------------------
    Index Scan using users_pkey on users (cost=0.00..8.27 rows=1
    width=5702)
    Index Cond: (id = 123)
    SQL EXPLAIN

    View Slide

  26. Server side caching
    Memcached
    Easy to write, but can bring many headaches
    because of outdated cache issues.
    Russian doll caching and cache digests help a lot.
    Render same response for all devices.

    View Slide

  27. Spread Memcached instances across all web
    servers, to prevent from having a single point of
    failure.
    Server side caching

    View Slide

  28. Run stress tests on production quite regularly.

    View Slide

  29. Stress test tools
    Siege
    Apache Benchmark
    Web tsunami

    View Slide

  30. Frontend optimisations

    View Slide

  31. Measure your performance grade before and after
    any optimisation.

    View Slide

  32. Assets
    Concatenate and minify JS and CSS
    Set cache control headers
    Serve from a CDN
    Gzip assets

    View Slide


  33. ExpiresActive On
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ...

    HTTP cache headers with Apache

    View Slide

  34. … are not good friends
    But, SSL and caching ...

    View Slide

  35. Deflate assets with Apache


    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-font-ttf


    View Slide

  36. Images optimisation
    Setting the right quality level (~ 70-85%), can
    save a lot of KB without losing quality.
    Credit : http://www.webpagetest.org/

    View Slide

  37. Images optimisation
    http://imageoptim.com (Mac users)
    or
    convert src.jpg -strip -quality 80 \
    -colorspace sRGB dst.jpg

    View Slide

  38. Images optimisation – Tip for Retina
    Double image size
    Compress down to 35% quality

    View Slide

  39. Conclusion
    Measure, optimise, compare, ...

    View Slide

  40. Thank you !
    Slides : https://speakerdeck.com/alexis/speedup-your-web-app
    [email protected]

    View Slide