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

Transcript

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 persistent
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