Browsing should be as simple and fast as turning a page in a magazine
Larry Page
actually, it should be even faster...

Make The Web Fast (MTWF)

Goal: 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)

Code RED!

Delay User reaction
0-100ms Instant
0-300ms Feels sluggish
300-1000ms Machine is working...
1s+ Mental context switch
» we're here! « on average...
10s+ I'll come back later...
To add insult to injury: mobile experience is 1.5x slower on average.
Content Type Avg # of Requests Avg size
HTML 8 44kB
Images 53 635kB
Javascript 14 189kB
CSS 5 35kB
HTTP Archive - Trends (April, 2012)

(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
  8. ...

Where is your bottleneck?

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

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
Chrome Developer Tools

Hands-on: Analyzing Performance waterfall: blocking JS requests, missing assets, missing cache headers on images and JS. Plenty of room for improvement. timeline: evaluate every request, track JS execution time, style reflows, etc.

Chrome DevTools is a web app!


Remote Debugging + Performance Analysis

$> Google Chrome --remote-debugging-port=9222
$> curl localhost:9222/json
[ {
   "devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1",
   "faviconUrl": "",
   "thumbnailUrl": "/thumb/chrome://newtab/",
   "title": "New Tab",
   "url": "chrome://newtab/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1"
} ]

Remote DOM + Debugging FTW!

Driving Chrome from CLI

ws =['webSocketDebuggerUrl'])
ws.onopen = lambda do |event|
  ws.send JSON.dump({id: 1, method: 'Network.enable'})

  ws.send JSON.dump({
    id: 2,
    method: 'Page.navigate',
    params: {url: '!/search/chrome?q=railsconf&' + rand(100).to_s}

ws.onmessage = lambda do |event|
  p [:new_message, JSON.parse(]

responseReceived event

        // ...
Network.responseReceived - gist of sample event

Instrument all the things!

TL;DR: You have no excuse.. all the tools are there!

Wonder how my page load time looks in IE {8,9,10} for a visitor from Singapore...
You after this talk...

Test with various browsers, connection speeds, geo locations. Support for video capture, waterfall analysis, page speed optimization checks, and much more -- all, for free.


How did the user see it?

On-demand video + filmstrip view, tcpdump stats, HAR downloads, and more.

Measuring "visual completeness"?

measures how quickly the page contents are visually populated

Introducing "Speed Index"

Speed Index: Step 1

  1. Render filmstrip of optimized page
  2. Render filmstrip of original page

Speed Index: Step 2

Plot "visual completeness" vs. time

Speed Index: Step 3


  1. Web Timing API for user latency
  2. Google Analytics + Site Speed
  3. Chrome Dev Tools: Network, Profiler, ...
  4. Remote profiling: Mobile, CLI, ...
  5. Geo + Browser testing
  6. Speed Index: Visual completeness

Measure three times before you...

Google PageSpeed

PageSpeed Online

PageSpeed Online API

require 'net/https'
require 'json'

uri  = URI.parse('')
http =, uri.port)
http.use_ssl = true

params = { :key => 'API KEY', :url => '',
           :strategy => 'desktop', :rules => '...' }

uri.query = URI.encode_www_form(params)
req =
res = http.request(req)

jj JSON.parse(res.body)

API Documentation, widget examples, etc.

PageSpeed SDK


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

    /* ... */

PageSpeed Service fetches content from your servers, rewrites the pages by applying web performance best practices and serves them to end users via Google's servers across the globe.


  1. Alias DNS CNAME entry to
  2. Sit back and enjoy

Stay tuned for more...

PageSpeed Service (beta)

Wait, there is more (but no time)...

  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

Food for thought...