Speed is Essential for a Great Web Experience

@andydavies

#oredev Nov 2012

http://www.ickr.com/photos/dex1138/7879381800

Performance isnt always a priority

http://www.ickr.com/photos/randomidea/247994072

Has it loaded yet?

http://www.ickr.com/photos/kindondie/4099768084

Our perception of response time

Instant Seamless Yawn!

100ms 1s

10s

3s - Recommended Load Time

6.5s - Alexa 2000 Fall 2012

Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968

50% more concentration when using badly performing web sites

Foviance
http://www.ickr.com/photos/yourdon/3366991042

Effect of delay on abandonment rate...

Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

Bing did some experiments

$/
+1s - 2.8%

Wallmart made some improvements

-1s

+2%

Shopzilla cut page load time by 5 seconds!

+12%

+25%

-50%

$$$
http://velocityconf.com/velocity2009/public/schedule/detail/7709

Measuring page load time...

http://www.ickr.com/photos/wwarby/7109538317

W3C Navigation Timing API

navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd,
Prompt, for, unload,

redirect, unload,

App, cache,

DNS,

TCP,

Request,

Response,

Processing,

onLoad,

loadEventEnd, loadEventStart, domComplete, domContentLoaded, domInteracAve, domLoading, unloadEnd, unloadStart,

http://www.w3.org/TR/navigation-timing/

Navigation Timing Data in Google Analytics

Text

Other Real User Monitoring tools available

Example of Real Users Experience

27%

Visitors (%)

13%

8% 6%

8% 6% 2% 3% 3% 1%

6 Load Time (s)

10

Example of Real Users Experience

27% 24%

Visitors (%)

13%

8% 6%

8% 6% 2% 3% 3% 1%

6 Load Time (s)

10

> 10

Synthetic Monitoring
3

Response Time (s)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30 September 2012

Examining the detail...

http://www.ickr.com/photos/arnybo/2679622216

Browser Plugins

YSlow

PageSpeed

webpagetest.org

Waterfall for bbc.co.uk/news

mobitest.akamai.com

Alternatively, could use Chrome / Safari remote debugging to generate HAR

Bigger, Faster Servers?

http://www.ickr.com/photos/getbuttery/6317955134

Over 80% of page load time is on 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

Measured via residential ADSL line using Google Chrome

But dont forget to fix slow server responses

4 seconds!

Bandwidth (often) isnt the bottleneck

2.0 1.5 1.0 0.5 0s 5s 10s

news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)

More Bandwidth Doesnt Matter (much)

Mike Belshe

3.11s

Page Load Time

1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s

10

Bandwidth (Mbps)

Visualising TCP

Carlos Bueno (@archivd) https://vimeo.com/14439742

Impact of Latency

Page Load Time (s)

20

40

60

80

100

120

140

160

180

200

220

240

Round Trip Time (ms)

Minimum round trips to download a le

(TCP Segments)

285kB 214kB 143kB 71kB

Size
1 2 3 4 5 6 7 8 9 10 11

Round Trips

TCP and the Lower Bound of Web Performance John Rauser

Latency is Our Biggest Enemy

In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.

we are looking at 100-1000ms RTT range on mobile

Ilya Grigorik

http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

3G Radio Resource Control

Idle for 12s
IDLE CELL_FACH

1s delay

1-2s delay!

CELL_DCH

Idle for 5s

Exact timings vary and depend on carrier NOT device

http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf

Going Faster

http://www.ickr.com/photos/mikebaird/2464769129/

Speeding Things Up - Some Basics

Compress Minify Reduce Requests Cache HTTP Keep-Alive Use a CDN?

Whats the web made of?

Images Scripts Stylesheets HTML Flash Other

Composition of average web page via httparchive.org

Bitmapped Images

JPEG

PNG

GIF

Optimise, Optimise, Optimise!

(jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)

New Devices, New Challenges...

2 x Resolution = 4 x Pixels!
http://www.ickr.com/photos/roopaw/6985954465

Some Alternatives

CSS

SVG

Fonts

Bitmaps still a challenge but interesting experiments around

Its no longer a desktop world

http://www.ickr.com/photos/adactio/6960610178

Go Mobile First for Responsive Designs

http://seesparkbox.com

Use Right-sized Images

http://www.ickr.com/photos/emzee/139794246

Standards support (picture? srcset?) is coming but unclear when! Meanwhile services such as sencha.io, resrc.it and JS libraries picturell.js, foresight.js can help.

Minimise browser blocking...

http://www.ickr.com/photos/barteko/6128499314

Parallel Downloads
news.bbcimg.co.uk static.bbc.co.uk

Domain Sharding increases number of parallel downloads but more connections may not be a good idea on mobile may also interfere with multiplexing in protocols like SPDY

Get the <head> straight

<!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title>

CSS before JS Ideally one le*

<link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . . </head>

* Depends on size and whether major / minor breakpoints used

Only JS needed during page load

Load remaining Javascript late as possible

. . . <script src="restofscript.js"></script> </body> </html>

One le or many? (Depends on size)

Script loaders can help but scripts arent discoverable by pre-fetcher

The Script Tag

<script src=></script>

Until the script has executed, the rendering of all elements below is blocked!

Virgin Media Broadband ISP Users Affected by Website Routing Woes

ISP Review, May 26, 2012

Customer jcmm33 said: Same issue here as well, been like this all day. Sites like autotrader.co.uk dont appear to be accessible, others like the telegraph.co.uk are waiting on other components to download (content from sites like cg-global.maxymiser.com, pixel.quantserve.com).

http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html

Impact on The Telegraph

Same issue affected many other sites

http://bit.ly/Ncy7Rd

Load Third Party scripts asynchronously

<script type="text/javascript"> function() { var js = document.createElement('script'); js.async = true; js.src = 'myscript.js'; var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(js, first); })(); </script>

Or use a script loader - labjs, requirejs, yepnope etc.

Lots of factors to think about...

http://www.ickr.com/photos/corneveaux/3248566797

Dont have to do it all by hand

http://www.ickr.com/photos/simeon_barkas/2557059247

Performance isnt just for Christmas Measure

Optimise

Analyse

Measure Impact on Business Goals

http://www.ickr.com/photos/safari_vacation/5961260280

http://www.ickr.com/photos/jurvetson/6212582593

@andydavies andy@asteno.com http://www.slideshare.net/andydavies

http://www.ickr.com/photos/auntiep/5024494612

Credits
All photographs copyright original owners on ickr.com Following pictograms courtesy of The Noun Project