Making the Web Fast(er)
one Rails page at a time

Usability Engineering 101

• SLOW

Code RED!

• user's connectivity
• Rails
• browser execution
• user's perceived page load time!

Navigation Timing (W3C)

<script>
  _gaq.push(['_setAccount','UA-XXXX-X']);
  _gaq.push(['_setSiteSpeedSampleRate', 100]); // #protip
  _gaq.push(['_trackPageview']);
</script>
		  

• Defaults to 5% sampling rate
• Max sample is 10k visits/day
• GA advanced segments FTW!

Google Analytics > Content > Site Speed

Averages (often) lie!

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"
} ]
    

• Each open tab is a process
• Each process has a ws:// debug URL

Driving Chrome from CLI

ws = Faye::WebSocket::Client.new(resp.first['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: 'http://twitter.com/#!/search/chrome?q=railsconf&' + rand(100).to_s}
  })
end

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

responseReceived event

"method":"Network.responseReceived",
"params":{
  "type":"XHR",
  "response":{
     "url":"http://api.twitter.com/1/trends/available.json?lang=en",
     "status":200,
     "statusText":"OK",
     "mimeType":"application/json",
     "connectionReused":false,
     "fromDiskCache":false,
     "timing":{
        "requestTime":1333830921.9814498,
        "connectStart":1,
        "receiveHeadersEnd":234
        // ...
    

Instrument all the things!

• Chrome for Android: same tools + all the same stats!
• In-browser stats: network, DOM, JS, GPU, memory
• Remote instrumentation: debugging, perf analysis, DOM manipulation, ...

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

WebPagetest.org

• Developed at AOL, open-sourced in 2008
• Actively developed and maintained
• Test sites across the globe

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

Speed Index: Step 2

Plot "visual completeness" vs. time

• PageSpeed Online
• PageSpeed SDK
• mod_pagespeed
• PageSpeed Service

Google PageSpeed

mod_pagespeed

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>
    ServerName www.awesome-rails-app.com
    DocumentRoot /apps/foo/public

    PassengerEnabled on
    ModPagespeed on

    /* ... */
</VirtualHost>

• Dozen's of filters (and growing)
• Like asset pipeline, but much more...
• Inlining, optimization, resizing, headers, UA patterns, etc.

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.

Setup:

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

Stay tuned for more...

PageSpeed Service (beta)