WTF is WPO anyway?

WPO = Web Performance Optimization

Coined in 2010

Optimize how?

Full stack!

• Operating systems — e.g. initcwnd
• Network infrastructure — e.g. LTE vs. 3G
• TCP/IP — e.g. TCP's slow start
• HTTP — e.g. no multiplexing support
• Browsers — e.g. <script async>

Optimize once?

Internet: evolving organism, accelerated by end-to-end principle

• Bigger pipes
• Better browsers
• Different devices
• Different applications

WPO theory

Don't worry, it'll be short.

Typical page load duration

• CSS, JS, images, fonts …
• HTML

The first WPO book

The 14 Rules

1. Make fewer HTTP requests
2. Use a CDN
3. Add Expires/Cache-Control headers
4. Gzip textual files
5. Put CSS at the top
6. Put JS at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate JS
13. Configure ETags
14. Make AJAX cacheable

Example: make fewer HTTP requests

• Aggregate CSS & JS: foo.css + bar.css = a54d9f.css
• Inlining: data: URIs
• CSS sprites (combine background images):

Example: leverage new standards

• border-radius, no images … but IE8? (caniuse.com/border-radius)
• SVG for icons … but IE8 & Android 2.3? (caniuse.com/svg)
• WOFF for fonts … but IE8 & Android? (caniuse.com/woff)

… and so much more!

• Domain sharding
• Non-blocking JS loaders
• Optimize images
• Simplify CSS selectors
• Split payload: minimal for first paint
• Leverage localStorage & application cache
• Override TCP initcwnd configuration
• …

My story

1. Christmas vacation 2007
   • I got really annoyed by slow sites.
   • Student ⇒ plenty of time ⇒ article: “Improving Drupal's page loading performance”
2. 2008: bachelor thesis: make Drupal faster.
   1. Measure: Drupal Episodes module
   2. Sync: File Conveyor: optimize files, sync to CDNs
   3. Integrate: Drupal CDN module
3. 2010: master thesis: WPO analytics

… turned out to be great timing …

Lucky timeline

• Jul 2009: bachelor thesis defended (>2.7 million measurements)
• Oct–Dec 2009: data mining course
• Dec 2009: master thesis proposal: mining episodes data
• Dec 2009: page speed will be a Google ranking factor
• Nov 2010: master thesis literature study finished
• Dec 2010: wrote “WPO Analytics” for Perf Calendar
• Feb 2011: contacted by Facebook to work there — WTF?
• Apr 2011: accepted for Facebook internship!
• Jul 2011: master thesis defended
• Aug 2011: File Conveyor evaluated by whitehouse.gov
• Sep–Dec 2011: internship: wimleers.com/tags/facebook
• Jan 2012: declined Facebook job offer
• May 2012: remote in Office of the CTO at Acquia, full-time Drupal core

So, studying…

… plus open source contributions …

… plus frustration passion …

… and hard work …

… got me a fancy internship…

… all helped me get my dream job.

Profiling

Bachelor thesis

Make Drupal faster by integrating it with a CDN

⇓

How to measure?

Definition of "faster"?

Performance monitoring

• Synthetic: simulated users, controlled environment
• Real: actual users ("RUM": Real User Monitoring)

Development vs. production

Navigation Timing

• Deep stack visibility
• Draft W3C spec
• Limited browser support (none of Apple's) caniuse.com/nav-timing
• Fallback: Episodes (used in bachelor thesis) and Boomerang

Navigation Timing Example

Try it!

var t = performance.timing;
var htmlRenderTime = t.responseStart - t.requestStart;
var htmlDownloadTime = t.responseEnd - t.responseStart;
var usesRedirect = (t.redirectEnd - t.redirectStart) > 0;
var timeToFirstByte = t.responseStart - t.navigationStart;
var timeToFirstPaint = t.domInteractive - t.navigationStart;

UX basics

• Stay under 0.25 s to feel "fast".
• Stay under 1s to keep attention.

Time to first paint

Most important overall measure, not the only one!

AKA:

• Time to start render
• Time to glass
• …

Bachelor thesis

Make Drupal faster by integrating it with a CDN

⇓

How to measure?

• Collect Navigation Timing data
• For real users (RUM)
• Aggregate

Definition of "faster"?

<1s, but depends on: page complexity, location, device …

Statistics

• Average & median too skewed.
• Understand the distribution shape.
• When setting goals: 75th percentile, 90th, 99th

Continuous & smarter profiling

Collecting the data is only 10% of the work.

Understanding it is much more difficult!

↓

data mining

Master thesis: WPO Analytics

Automatically pinpoint causes of slow pages via data mining.

• "example.com/fancy-page's CSS episode is slow"
• "example.com's JS episode is slow for IE 8 & 9 users."
• "example.com/some-page is slow in Belgium"
• "example.com/gallery's loadCarousel episode is slow in Belgium for Firefox 3 users"

How are we doing?

As tracked by Google Analytics — April 2012

Desktop

As tracked by Google Analytics — April 2012

Mobile

As tracked by Google Analytics — April 2012

Profiling details: Chrome Dev Tools

Open Dev Tools, look at timeline

Look at headers of a specific resource

Network Utilization & Web Page Performance audits

CSS selector profiling (applied to these slides).

Lots of settings.

Example: www.uhasselt.be

No optimization

Pretty fast: ±1 second in Belgium

… but only in Belgium.

Original

53 requests, 618 KB, 613 ms DOMready, 919 ms onload

Original

mobitest.akamai.com

iPhone 4, iOS 5, Cambridge MA, U.S.A.

Minor optimizations

Optimized images, aggregated JS, JS to bottom, expiration headers, gzipping, use CDN.

45 requests, 376 KB, 155 ms DOMready, 464 ms onload

Optimized

mobitest.akamai.com

iPhone 4, iOS 5, Cambridge MA, U.S.A.

ImageOptim

Download optimized version

Example: google.be

Extreme optimization

11 requests, 274 KB, 107 ms DOMready, 595 ms onload

Analysis

• Zero CSS files — all CSS inlined!
• A single request and the page becomes interactive!
• Immediately thereafter:
  • google.be/blank.html — detect capturing proxies?
  • google.be?rs=<hash> — 171 KB worth of logic in JS! (Split payload.)
  • Big logo.
• Then:
  • Secondary images
  • Personal metadata collection callback?
  • Context (location etc.) callback?

Example: wimleers.com

Some optimization

10 requests, 83.6 KB, 96 ms DOMready, 188 ms onload

Analysis

• Zero JS besides Google Analytics
• Two requests and the page becomes interactive!
• Immediately thereafter:
  • Three data URI resources inlined in CSS: images + font
  • Google Analytics' JS
  • Two images referenced by the HTML