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
   

   View Slide

2. Who am I ?
   Alexis Bernard
   Github : @alexisbernard
   Twitter : @alexis_bernard
   Email : alexis@bernard.io
   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
    alexis@bernard.io
    

    View Slide