http://www.flickr.com/photos/ahockley/3576838608

Speed is Essential for a Great Web Experience

@andydavies

DigicureOct 2012

Wednesday, 24 October 2012

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

Performance isn’t always a priority

Wednesday, 24 October 2012

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

“Has it loaded yet?”

Wednesday, 24 October 2012

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

Wednesday, 24 October 2012

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

Foviance

http://www.flickr.com/photos/yourdon/3366991042Wednesday, 24 October 2012

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

Effect of delay on abandonment rate...

Wednesday, 24 October 2012

Bing did some experiments

+1s - 2.8%

+1s$/ Wednesday, 24 October 2012

Wallmart made some improvements

-1s +2%

Wednesday, 24 October 2012

Shopzilla cut page load time by 5 seconds!

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

$$$

+12% +25% -50%

Wednesday, 24 October 2012

Measuring page load time...

http://www.flickr.com/photos/wwarby/7109538317Wednesday, 24 October 2012

0

1

2

3

4

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

Wednesday, 24 October 2012

But these are not our visitors…

http://www.flickr.com/photos/br1dotcom/4297736794

Wednesday, 24 October 2012

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

These are our visitors

Wednesday, 24 October 2012

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)

Measure Real Users’ Experience

Wednesday, 24 October 2012

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)

Measure Real Users’ Experience

Wednesday, 24 October 2012

Measuring Real Users - Google Analytics

Relies on Navigation Timing API, can add extra timing calls to pageWednesday, 24 October 2012

http://www.flickr.com/photos/ohhector/3149051855

Looking Deeper

Wednesday, 24 October 2012

webpagetest.org

Wednesday, 24 October 2012

Waterfall for bbc.co.uk/news

Wednesday, 24 October 2012

mobitest.akamai.com

Wednesday, 24 October 2012

Bigger, Faster Servers?

http://www.flickr.com/photos/getbutterfly/6317955134Wednesday, 24 October 2012

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

Measured on residential ADSL line using Chrome 19

news.bbc.co.uk

ebay.co.uk

debenhams.co.uk

direct.gov.uk

amazon.co.uk

mumsnet.com

guardian.co.uk

0 1.25 2.5 3.75 5

BackendFrontend

Wednesday, 24 October 2012

Fix slow server responses first

4 seconds!

Wednesday, 24 October 2012

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

Wednesday, 24 October 2012

“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)

Wednesday, 24 October 2012

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)Wednesday, 24 October 2012

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

Wednesday, 24 October 2012

Going Faster…

http://www.flickr.com/photos/mikebaird/2464769129/Wednesday, 24 October 2012

Put your pages on a diethttp://www.flickr.com/photos/europedistrict/4537909259

Wednesday, 24 October 2012

Cut down number of HTTP requests

Wednesday, 24 October 2012

Move the content closer

http://www.flickr.com/photos/jamesjordan/2198988999Wednesday, 24 October 2012

http://www.flickr.com/photos/jemsweb/4363548805

Organise content so it’s easy to load

Wednesday, 24 October 2012

What’s the web made of?

ImagesScriptsStylesheetsHTMLFlashOther

Composition of ‘average’ web page via httparchive.orgWednesday, 24 October 2012

http://www.flickr.com/photos/zaprittsky/4520788183/

Images are 64% of an ‘average’ web page

Wednesday, 24 October 2012

JPEG PNG GIF

Bitmapped Images

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

Wednesday, 24 October 2012

New Devices, New Challenges...

2 x Resolution = 4 x Pixels!

http://www.flickr.com/photos/roopaw/6985954465Wednesday, 24 October 2012

CSS SVG Fonts

Some Alternatives

Watch SVG sizes not always smaller than bitmap!Wednesday, 24 October 2012

Don’t block the browser...

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

Wednesday, 24 October 2012

Browsers can download resources in parallel

news.bbcimg.co.uk

static.bbc.co.uk

Wednesday, 24 October 2012

But Sometimes... The Waterfall of Doom!

2 seconds! (nearly)

Wednesday, 24 October 2012

The Script Tag

<script src=″…″></script>

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

Wednesday, 24 October 2012

“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).”

Wednesday, 24 October 2012

http://bit.ly/Ncy7Rd

Impact on The Telegraph…

Same issue affected many other sitesWednesday, 24 October 2012

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>

async attribute may be option but not supported by IE & Opera

Wednesday, 24 October 2012

The Challenge of Mobile

http://www.flickr.com/photos/cubicgarden/3281555681Wednesday, 24 October 2012

Argh... My brain hurts!

http://www.flickr.com/photos/corneveaux/3248566797Wednesday, 24 October 2012

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

Don’t have to do it all by hand

Wednesday, 24 October 2012

Measure

AnalyseOptimise

Performance isn’t just for Christmas

Wednesday, 24 October 2012

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

Measure Impact on Business Goals

Wednesday, 24 October 2012

http://www.flickr.com/photos/jurvetson/6212582593Wednesday, 24 October 2012

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

@andydavies

andy@asteno.com

http://www.slideshare.net/andydavies

Wednesday, 24 October 2012

Credits

All photographs copyright original owners on flickr.com

Following pictograms courtesy of The Noun Project

Wednesday, 24 October 2012