Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

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


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


http://www.measureworks.nl

http://www.measureworks.nl

Bing did some experiments

+1s - 2.8%

+1s$/ Wednesday, 24 October 2012

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/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


But these are not our visitors…

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


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

These are our visitors


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


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


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


webpagetest.org


Waterfall for bbc.co.uk/news


mobitest.akamai.com


http://www.blaze.io/mobile

http://www.blaze.io/mobile

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


Fix slow server responses first

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)


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


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


Cut down number of HTTP requests


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


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




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

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

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

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




Browsers can download resources in parallel

news.bbcimg.co.uk

static.bbc.co.uk


But Sometimes... The Waterfall of Doom!

2 seconds! (nearly)


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


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


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

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

@andydavies

[email protected]

http://www.slideshare.net/andydavies


mailto:[email protected]

mailto:[email protected]



Credits

All photographs copyright original owners on flickr.com

Following pictograms courtesy of The Noun Project


Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

Technology

Transcript of Speed is Essential for a Great Web Experience (Digicure - Copenhagen)