Speed is Essential for a Great Web Experience (oredev)

50 %
50 %
Information about Speed is Essential for a Great Web Experience (oredev)
Technology

Published on November 9, 2012

Author: AndyDavies

Source: slideshare.net

Description

Slides from my talk on why speed matters, ways to measure it and how page load times can be improved. Talk was given at oredev in Sweden

Speed is Essential for aGreat Web Experience@andydavies#oredevNov 2012 http://www.flickr.com/photos/dex1138/7879381800

Performance isn’t always a priority http://www.flickr.com/photos/randomidea/247994072

“Has it loaded yet?” http://www.flickr.com/photos/kindofindie/4099768084

Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time 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.flickr.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.flickr.com/photos/wwarby/7109538317

W3C Navigation Timing API navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd, Prompt, App, for, redirect, DNS, TCP, Request, Response, Processing, onLoad, cache, unload, unload, 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% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 Load Time (s)

Example of Real Users Experience 27% 24%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)

Synthetic Monitoring 3Response Time (s) 2 1 0 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.flickr.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.flickr.com/photos/getbutterfly/6317955134

Over 80% of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.ukdebenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1 2 3 4 5 Measured via residential ADSL line using Google Chrome

But don’t forget to fix slow server responses 4 seconds!

Bandwidth (often) isn’t the bottleneck2.01.51.00.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 Doesn’t Matter (much)” Mike Belshe 3.11sPage Load Time 1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps)

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

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

Minimum round trips to download a file (TCP Segments)285kB214kB143kB 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.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? 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.flickr.com/photos/roopaw/6985954465

Some Alternatives CSS SVG FontsBitmaps 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

Use “Right-sized” Images http://www.flickr.com/photos/emzee/139794246Standards 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.

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> CSS before JS <meta charset="utf-8"> Ideally one file* <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . Only JS needed . during page load</head> * Depends on size and whether major / minor breakpoints used

Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size)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 UsersAffected by Website Routing Woes” ISP Review, May 26, 2012Customer jcmm33 said:“Same issue here as well, been like this all day. Sites likeautotrader.co.uk don’t appear to be accessible, others likethe telegraph.co.uk are waiting on other components todownload (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.flickr.com/photos/corneveaux/3248566797

Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247

Performance isn’t just for Christmas Measure Optimise Analyse

Measure Impact on Business Goals http://www.flickr.com/photos/safari_vacation/5961260280

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

@andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612

CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project

Add a comment

Related presentations

Related pages

Essential steps for a Great Web Experience - EBriks Infotech

Essential steps for a Great Web Experience - EBriks Infotech - Free download as PDF File (.pdf), Text File (.txt) or view presentation slides online. how ...
Read more

Andy Davies: Speed is essential for a great web experience ...

NCC Group Presentation by Andy Davies on Speed is essential for a great web experience On Monday 1st December, ...
Read more

Community News: Why Speed Is Essential For a Great Web ...

* Andy Davies shares his slides on why speed is essential for a great web experience.
Read more

Essential for a great web experience e briks infotech ...

Search; Home; Documents; Essential for a great web experience e briks infotech
Read more

Speed is Essential for a Great Web Experience (with images ...

Speed is Essential for a Great Web Experience Feedback to my talk on web performance at Port 80, Newport
Read more

A great experience - Documents - docslide.us

Download A great experience. Transcript. 1. A Great ExperienceI have always had animals.Last month while I wasgoing to aljub with myparents in our car, ...
Read more

Sessions - Øredev 2015 - Start - Øredev.org

We’ll start by looking at results from actual projects and together puzzle out the essential ... build great app experiences ... Great web animation ...
Read more

My schedule - Øredev 2015 - Start - Øredev.org

Øredev is the Premier developer's ... Mobile app developers face a number of challenges when they build great app experiences User ... Great web animation ...
Read more