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

Speed is Essential for a Great Web Experience

@andydavies

#oredevNov 2012

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

Performance isn’t always a priority

http://www.flickr.com/photos/kindofindie/4099768084

“Has it loaded yet?”

100ms 1s 10s

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

Instant

Seamless Yawn!

Our perception of response time

3s - RecommendedLoad Time

6.5s - Alexa 2000Fall 2012

“50% more concentration when using badly performing web sites”

Foviance

http://www.flickr.com/photos/yourdon/3366991042

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

Effect of delay on abandonment rate...

Bing did some experiments

+1s - 2.8%

+1s$/

Wallmart made some improvements

-1s +2%

Shopzilla cut page load time by 5 seconds!

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

$$$

+12% +25% -50%

Measuring page load time...

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

loadEventStart,

Prompt,for,

unload,

App,cache, DNS, TCP, Request, Response, onLoad,Processing,

redirectStart,

fetchStart,domainLookupStart,

domainLookupEnd,connectStart,

connectEnd,requestStart,

responseStart,responseEnd,

domLoading,

domInteracAve,

domContentLoaded,

domComplete,

loadEventEnd,

redirect,

redirectEnd,

navigaAonStart,

unloadStart,

unloadEnd,

unload,

(secureConnecAonStart),

W3C Navigation Timing API

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

Navigation Timing Data in Google Analytics

Text

Other Real User Monitoring tools available

1 2 3 4 5 6 7 8 9 10

1%3%3%

2%

6%

8%

13%

27%

8%

6%

Vis

itors

(%

)

Load Time (s)

Example of Real Users Experience

1 2 3 4 5 6 7 8 9 10 > 10

24%

1%3%3%

2%

6%

8%

13%

27%

8%

6%

Vis

itors

(%

)

Load Time (s)

1 2 3 4 5 6 7 8 9 10 > 10

Vis

itors

(%

)

Load Time (s)

Example of Real Users Experience

0

1

2

3

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

Res

pons

e T

ime

(s)

September 2012

Synthetic Monitoring

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

Examining the detail...

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.flickr.com/photos/getbutterfly/6317955134

Over 80% of page load time is on front-end

Measured via residential ADSL line using Google Chrome

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

BackendFrontend

But don’t forget to fix slow server responses

4 seconds!

Bandwidth (often) isn’t the bottleneck

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

10s0s 5s

0.5

1.0

1.5

2.0

“More Bandwidth Doesn’t Matter (much)”Mike Belshe

1 2 3 4 5 6 7 8 9 10

1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s

1.95s

3.11s

Page

Loa

d T

ime

Bandwidth (Mbps)

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

Visualising TCP

Impact of Latency

1

2

3

4

0 20 40 60 80 100 120 140 160 180 200 220 240

Page

Loa

d T

ime

(s)

Round Trip Time (ms)

TCP and the Lower Bound of Web PerformanceJohn Rauser

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

Latency is Our Biggest Enemy

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

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

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

Ilya Grigorik

3G Radio Resource Control

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

IDLE CELL_FACH

CELL_DCH Idle for 5s

Idle for 12s

1-2s delay!

Exact timings vary and depend on carrier NOT device

1s delay

Going Faster…

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

Speeding Things Up - Some Basics

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

What’s the web made of?

ImagesScriptsStylesheetsHTMLFlashOther

Composition of ‘average’ web page via httparchive.org

JPEG PNG GIF

Bitmapped Images

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

New Devices, New Challenges...

2 x Resolution = 4 x Pixels!

http://www.flickr.com/photos/roopaw/6985954465

CSS SVG Fonts

Some Alternatives

Bitmaps still a challenge but interesting experiments around

It’s no longer a desktop world

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

Go “Mobile First” for Responsive Designs

http://seesparkbox.com

Standards support (picture? srcset?) is coming but unclear when!

Meanwhile services such as sencha.io, resrc.it and JS libraries -picturefill.js, foresight.js can help.

Use “Right-sized” Images

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

Minimise browser blocking...

http://www.flickr.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>

<link rel="stylesheet" href="styles.css" type="text/css" />

<script src="script.js"></script>

. . .

</head>

CSS before JSIdeally one file*

Only JS needed during page load

* Depends on size and whether major / minor breakpoints used

. . .

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

</body></html> One file or many?

(Depends on size)

Load remaining Javascript late as possible

Script loaders can help but scripts aren’t 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

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

Customer jcmm33 said:“Same issue here as well, been like this all day. Sites like autotrader.co.uk don’t 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://bit.ly/Ncy7Rd

Impact on The Telegraph…

Same issue affected many other sites

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.flickr.com/photos/corneveaux/3248566797

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

Don’t have to do it all by hand

Measure

AnalyseOptimise

Performance isn’t just for Christmas

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

Measure Impact on Business Goals

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

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

@andydavies

andy@asteno.com

http://www.slideshare.net/andydavies

Credits

All photographs copyright original owners on flickr.com

Following pictograms courtesy of The Noun Project