Make The Web Fast (MTWF)

Make the entire web faster

Usability Engineering 101

Delay User reaction
0-100ms Instant
0-300ms Feels sluggish
100-1000ms Machine is working...
1s+ Mental context switch
10s+ I'll come back later...
Usability Engineering - Jakob Nielsen, 1993

How Fast Are Websites Around The World? - Google Analytics Blog (April, 2012)

Let's look at our neighbors...

Mean (s) Median (s)
Japan 5.9 3.5
Singapore 12.0 5.9
China 12.0 5.6
Indonesia 12.4 5.6
Malaysia 13.2 6.2
Thailand 16.3 5.9
India 16.3 7.4
How Fast Are Websites Around The World? - Google Analytics Blog (April, 2012)

Me, last Friday, reading the news...

If only it were that simple...

Bandwidth will not save us!

Modest to no noticeable speedup after 5mbps! Errrrr.. why!?

Content Type Avg # of Requests Avg size
HTML 8 44kB
Images 53 635kB
Javascript 14 189kB
CSS 5 35kB
HTTP Archive - Trends (April, 2012)

HTTP Archive - Trends (April, 2012)

84 requests on average...

HTTP 1.1 - vintage 1999


SPDY IETF proposal, part of HTTPbis 2.0 working group

(faster) connectivity won't save us, better protocols can help, but...

we need you to build faster pages

(short) life of a web request...

  1. Unload the DOM
  2. DNS resolution
  3. Connection & TCP handshake
  4. Send request, wait for response
  5. Parse response
  6. Request sub-resources (see step 1)
  7. Execute scripts, apply CSS rules

TODO: optimize 5 through 7, rinse, lather, repeat.

How did the user see it?

Created via IE 8, from Tokyo... Yikes?

Navigation Timing (W3C)

Good news, Google Analytics collects this data for us...
  _gaq.push(['_setSiteSpeedSampleRate', 100]); // #protip

Google Analytics > Content > Site Speed

No instrumentation

Segment by:
geo, browser, UA, ...

Averages (often) lie!

Skeweness - Wikipedia

Case Study: Page Load Time

Content > Site Speed > Page Timings > Performance

Migrated site to new host, server stack, web layout, and using static generation. Result: noticeable shift in the user page load time distribution.

Case Study: Server Response Time

Content > Site Speed > Page Timings > Performance

Bimodal response time distribution?
Theory: user cache vs. database cache vs. full recompute

(ab) using GA "user timings" reports

  _gaq.push(['_trackTiming', 'category', 'label', time]);

  _gaq.push(['_trackTiming', 'jQuery', 'Load library', 20]);
  _gaq.push(['_trackTiming', 'slide', slideNum, timeOnSlide]);
  //                                            ^^^ win.
ResourceTiming interface to allow Javascript mechanisms to collect complete timing information related to resources on a document.

W3C draft / work in progress

Measure, analyze, optimize, repeat...

  1. Measure user perceived latency
  2. Use Navigation Timing data
  3. Use GA's advanced segments!
  4. Setup {daily,weekly, ...} reports waterfall: blocking JS requests, missing assets, missing cache headers on images and JS. Plenty of room for improvement.

Question: what are the blue and red lines in the waterfall?

Place your...

DOMContentLoaded vs. onload

DOMContentLoaded test drive

<script src="file-a.js"></script>
<script src="file-b.js" defer></script>
<script src="file-c.js" async></script>

async vs. defer - what's the difference?

<script src="file-a.js"></script>
<script src="file-b.js" defer></script>
<script src="file-c.js" async></script>

async vs. defer timeline: evaluate every request, track JS execution time, style reflows, etc.

60%+ of the weight of the page is images (on average)

Images * 53

Portable "Network" Graphics (PNG) != always PNG

  1. Regular PNG from photoshop
  2. "Crushed" PNG
  3. JPEG at 100%
  4. JPEG at 85%
Yahoo's, pngcrush, etc. Bonus points: WebP.

  1. Navigation Timing API for user latency
  2. Google Analytics + Site Speed
  3. Unblock onload!
  4. Optimize your images
  5. Use Chrome Dev Tools: Network, Profiler, ...

Measure twice before you optimize

Google PageSpeed

PageSpeed Insights

PageSpeed Browser Plugins

  1. Your page won't reach 100 (unless it's blank)
  2. Every resource on your page has a cost
  3. You shold know the cost of each resource
  4. Not everything should be cached for N years

Goal: no surprises in the recommendations.

But PageSpeed Insights tells me to...


Open-source Apache module that automatically optimizes web pages and associated resources.

ModPagespeedCssInlineMaxBytes                2048
ModPagespeedImageInlineMaxBytes              2048
ModPagespeedCssImageInlineMaxBytes           2048
ModPagespeedJsInlineMaxBytes                 2048
ModPagespeedCssOutlineMinBytes               3000
ModPagespeedJsOutlineMinBytes                3000
ModPagespeedRetainComments                   "[WILDCARD PATTERN]"
ModPagespeedJpegRecompressionQuality           -1
ModPagespeedImageLimitOptimizedPercent        100
ModPagespeedImageLimitResizeAreaPercent       100
ModPagespeedMaxInlinedPreviewImagesIndex        5
ModPagespeedMinImageSizeLowResolutionBytes  10240
// ...

mod_pagespeed + Passenger = fast(er) Rails

<VirtualHost *:80>
    DocumentRoot /apps/foo/public

    PassengerEnabled on
    ModPagespeed on

    /* ... */

  1. Half the battle is knowing what to to measure
  2. Measure user perceived latency
  3. Optimize from user's perspective
  4. Mobile web is 1.5x slower on average!
  5. No excuses, the tools are there *
  6. Plenty of better tools to be built still
  7. Automate what you can - tip: mod_pagespeed :-)

Food for thought...