Keith and Mario FTW

Some time ago, I opened up Keith and Mario's Guide to Fast Websites, a presentation by Keith Pitt and Mario Visic at the Ruby Conference Australia 2013. The slides link to the video of the talk.

Seriously, a great walk through of how to speed up a website. They talk about how to figure out what's wrong, and how to fix the problems they, in particular, had. My notes on their talk:

Figure out what's wrong

1. Look at the network and render times
   • do the 90% rule: find the biggest problem, solve it
   • in this case, find the longest delay, fix it.
2. tools
   • google chrome developer tools (network tab for local connection)
   • wbench (find which stage is slow)
   • webpagetest.org (elsewhere)
3. Use different connection speeds
   • network link conditioner
   • charles (my note)

Fix the problems

1. You want smaller files
   • aggregate files for fewer HTTP calls: css, js, images (sprites)
   • enable gzip
2. Fix images
   • strip meta data
   • smaller file size (quality reduction)
   • imageoptim
3. Use font libraries
   • vector images in a font file (bonus: retina for free!)
4. Handle javascript loading well
   • move to bottom of file (mostly)
   • use async loading
     1. use js lib to handle old browsers
     2. embed async code into page
     3. head.js (1 point something k)
   • split javascript into non-changing and changing (commonly edited) libraries, cache the non-changing libraries
   • Know .documentready and .ready diffs with jQuery
5. Fix latency issues
   • Use a CDN for assets
   • Consider Cloudflare over Cloudfront
   • don't forget to set gzip on their delivery
6. Multiple asset host
   • Watch out for dns lookups
     1. reduce them if possible
     2. prefetch with links:
        

              <link rel="dns-prefetch" href="//a01.example.com">
              <link rel="dns-prefetch" href="//a02.example.com">
              

     3. Use a cookieless domain (don't send cookies back and forth)

Bonus

1. SPDY
   • single connection
   • don't need multiple asset hosts
   • can do prefetch
2. Avoid 3rd party JS
   • host locally if you can
   • not for giant libraries you expect to be cached from elsewhere (jquery)

It was a good presentation. If you aren't familiar with these techniques, or with the process of how to speed up a website, this is a great presentation. I was pleased to have the techniques I do nearly automatically validated.

I recommend watching the video if you need an introduction to website optimization.