Practical WPO intro

Hasselt University, May 2, 2013 — Wim Leers — @wimleers


Fast internet connection ⇏ fast browsing

WTF is WPO anyway?

WPO = Web Performance Optimization

Coined in 2010

[…] convergence of awareness, even urgency, on the business side and growing expertise in the tech community around web performance marks the beginning of a new industry that I’m calling “WPO” – Web Performance Optimization. […] WPO also improves the user experience, increases revenue, and reduces operating costs.
Steve Souders, WPO – Web Performance Optimization

Optimize how?

Full stack!

Optimize once?

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

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

Why invest in WPO?

  • Because geeks love the beauty of a perfect system :)
  • Speed ⇒ more & happier visitors ⇒ more revenue
  • Google: +0.5s ⇒ -20% searches

WPO theory

Don't worry, it'll be short.

Typical page load duration

  • CSS, JS, images, fonts …
  • HTML

The first WPO book

Steve Souders' High Performance Web Sites book cover

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): Google sprite example

Example: leverage new standards

… 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
  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
  • Sep–Dec 2011: internship:
  • Jan 2012: declined Facebook job offer
  • May 2012: remote in Office of the CTO at Acquia, full-time Drupal core

So, studying…

Photo of the Hasselt University entrance.

… plus open source contributions …

Photo of a Druplicon built with LEGO bricks.

… plus frustration passion …

A comic about patience.

… and hard work …

A visual metaphor for hard work.

… got me a fancy internship…

Photo of the Facebook badge I got during my internship.

… all helped me get my dream job.

Venn diagram about dream job.


If you can not measure it, you can not improve it.
Lord Kelvin

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

Navigation Timing browser support.

Navigation Timing Example

Try it!

Navigation Timing spec timeline.
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.

Delay (s)User reaction
0.1–0.3Feels sluggish
0.3–1Machine is working…
>1Mental context switch
>10I'll come back later … maybe

Time to first paint

Most important overall measure, not the only one!


  • 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 …


  • 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.

  • "'s CSS episode is slow"
  • "'s JS episode is slow for IE 8 & 9 users."
  • " is slow in Belgium"
  • "'s loadCarousel episode is slow in Belgium for Firefox 3 users"

How are we doing?

Chart showing mean & median page load times on desktop & mobile. Histogram showing page load times for desktop & mobile.

As tracked by Google Analytics — April 2012


A map showing page load times around the world for desktops.

As tracked by Google Analytics — April 2012


A map showing page load times around the world for mobile devices.

As tracked by Google Analytics — April 2012

Profiling details: Chrome Dev Tools

'Best friends' image.

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.


No optimization

Pretty fast: ±1 second in Belgium

… but only in Belgium.


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


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


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


Download optimized version


Extreme optimization

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


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


Some optimization

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


  • 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


Recommended reading

The end