Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Who am I ? Alexis Bernard Github : @alexisbernard Twitter

    : @alexis_bernard Email : [email protected] Web developer for basesecrete.com
  2. Why faster web apps ? Better user experience Better user

    experience Increase traffic and revenues Increase traffic and revenues
  3. How to tackle web optimizations ? Before and after doing

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

    developer tools Web Page Test Pingdom
  5. My strategy is to optimise server reponse time first, and

    then turn on all HTTP and frontend tricks.
  6. Optimising server response time is most of the time :

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

    having a single point of failure. Server side caching
  11. Assets Concatenate and minify JS and CSS Set cache control

    headers Serve from a CDN Gzip assets
  12. <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
  13. 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>
  14. Images optimisation Setting the right quality level (~ 70-85%), can

    save a lot of KB without losing quality. Credit : http://www.webpagetest.org/