Upcoming talks!« an older post

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)


  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.