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

Speedup your web app

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:



March 20, 2013

More Decks by alexis

Other Decks in Programming


  1. Speedup your web app Speedup your web app

  2. Who am I ? Alexis Bernard Github : @alexisbernard Twitter

    : @alexis_bernard Email : alexis@bernard.io Web developer for basesecrete.com
  3. Why faster web apps ?

  4. Why faster web apps ? Better user experience Better user

    experience Increase traffic and revenues Increase traffic and revenues
  5. Credit : http://www.strangeloopnetworks.com

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

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

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

  9. How to tackle web optimizations ?

  10. How to tackle web optimizations ? Before and after doing

    any optimzation, everything have to be measured, in order to see improvement.
  11. Measuring tools I use New Relic Rack Mini Profiler Chrome

    developer tools Web Page Test Pingdom
  12. New Relic Measures almost everything Very accurate and detailed Persistent

    But costly
  13. New Relic main graph

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

  15. Rack mini profiler

  16. Chrome - Network tab

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

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

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

  20. Where to start optimisations after measuring ?

  21. My strategy is to optimise server reponse time first, and

    then turn on all HTTP and frontend tricks.
  22. Start by optimising server response time because of

  23. Optimising server response time is most of the time :

    Improving SQL queries and caching
  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
  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
  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.
  27. Spread Memcached instances across all web servers, to prevent from

    having a single point of failure. Server side caching
  28. Run stress tests on production quite regularly.

  29. Stress test tools Siege Apache Benchmark Web tsunami

  30. Frontend optimisations

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

  32. Assets Concatenate and minify JS and CSS Set cache control

    headers Serve from a CDN Gzip assets
  33. <IfModule mod_expires.c> 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" ... </IfModule> HTTP cache headers with Apache
  34. … are not good friends But, SSL and caching ...

  35. Deflate assets with Apache <IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE

    text/css AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-font-ttf </IfModule> </IfModule>
  36. Images optimisation Setting the right quality level (~ 70-85%), can

    save a lot of KB without losing quality. Credit : http://www.webpagetest.org/
  37. Images optimisation http://imageoptim.com (Mac users) or convert src.jpg -strip -quality

    80 \ -colorspace sRGB dst.jpg
  38. Images optimisation – Tip for Retina Double image size Compress

    down to 35% quality
  39. Conclusion Measure, optimise, compare, ...

  40. Thank you ! Slides : https://speakerdeck.com/alexis/speedup-your-web-app alexis@bernard.io