SPEED
MATTERS

100ms 1s 10s Response Time
in Man-computer Conversational Transactions Robert B. Miller, 1968 Instant Seamless Yawn! Our perception of response time 3s - Recommended Load Time 6.5s - Alexa 2000 Fall 2012 Miller Response Time 1968

Bing did some experiments +1s
- 2.8% +1s$/ Time to click +2s Bing

WalmartWallmart made some improvements -1s
+2%

Shopzilla http://velocityconf.com/velocity2009/public/schedule/detail/7709 $$$ +12% +25%
-50% From 6-9s down to 1.2s

Strangeloop Networks

Strangeloop Networks

Strangeloop Networks

The network

1 2 3 4 5
6 7 8 9 10 1.36s1.37s1.38s1.39s1.41s1.44s1.50s 1.63s 1.95s 3.11s PageLoadTime Bandwidth (Mbps) Bandwidth doesn’t matter (much)

300k image downloading slowed 40x
Browser Server

Minimum round trips to download
a file 71kB 143kB 214kB 285kB 1 2 3 4 5 6 7 8 9 10 11 (TCP Segments) Round Trips Size

Impact of latency 1 2
3 4 0 20 40 60 80 100 120 140 160 180 200 220 240 PageLoadTime(s) Round Trip Time (ms)

The front-end
really matters

80% of time is front-end
news.bbc.co.uk ebay.co.uk debenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1 2 3 4 5 Backend Frontend

Still got to fix the
backend!

327k (32%) bigger in one
year

Onload ≠ User perception 2.0s
88% rendered 5.2s window.onload

So how do we measure
speed?

Uptime monitoring (Pingdom)

Synthetic testing

Only the HTML request measured

Real user monitoring (RUM)

New Relic RUM

APDEX

GA site speed

GA site speed

GA site speed

GA Site speed sample rate
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-XX']); _gaq.push(['_setSiteSpeedSampleRate', 100]); _gaq.push(['_trackPageview']);

1 2 3 4 5
6 10 8 9 4 11 13 12 7 14 7

GA User timing _gaq.push([‘_trackTiming’, ‘jQuery’,‘Load
Library’, 20, ‘Google CDN’,50]);

GA User timing

GA User timing

Performance benchmarking

How do I make it
faster?

Google PageSpeed Insight

WebPagetest

stevesouders.com/hpws/

browserdiet.com

How do I make it
faster across all those devices?

Responsive Design

1. Build mobile first responsive
designs 2. Keep CSS background images in scoped media queries 3. Conditionally load JavaScript and even HTML fragments based on screen size and capabilities 4. Implement a responsive images solution 5. Handle retina images very carefully and err on the side of performance Jason Grigsby

Responsive Images using Picturefill &
WebP

Dynamic image generation

CSS focal point
Adam Bradley

github.com/blog/
Adaptive Design

Device detection (WURFL)

Going mobile first is harder
than you think

igvita.com

igvita.com

igvita.com

speedcurve.com
@markzeman