Speed is Essential for a Great Web Experience (Canvas Conf Version)

50 %
50 %
Information about Speed is Essential for a Great Web Experience (Canvas Conf Version)

Published on September 7, 2012

Author: AndyDavies

Source: slideshare.net


Slides from my Web Performance talk at Canvas Conf, Birmingham - 7 Sep 2012

Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.flickr.com/photos/barkaway/342359810

But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072

“Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727

Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) 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...

Measure Real Users’ Experience 27% 24% of visitors 24% waited over 10sVisitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)

Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page

Measuring Real Users - LogNormal

Measuring Real Users - Torbit Insight

Measuring Real Users - New Relic


Waterfall for bbc.co.uk/news


Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794

80% plus 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.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19

Fix slow server responses first 4 seconds!

Bandwidth (often) isn’t the bottleneck2. 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)

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

Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/

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> * Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files

Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size) Could you defer some JS until after onload?

Squash text based content - gzip / minify http://www.flickr.com/photos/evdg/298415813

Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/

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 Fonts Watch SVG - may not always be smaller than bitmap!

Re-use TCP Connections via HTTP Keep-Alive Orange segments are TCP connections being (re-) opened

news.bbcimg.co.uk static.bbc.co.ukIncrease number of parallel downloads

Sometimes... The Waterfall of Doom! 2 seconds! (nearly)

Reduce number of HTTP requests

Cache resources that don’t change ‘often’ forever(use versions to replace) http://www.flickr.com/photos/sterlingely/64228609

Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency

The Perils of Third Party Javascript... “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 cg-global.maxymiser.com unreachable

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> async attribute may be option but not supported by IE & Opera

Argh... My brain hurts! 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


@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

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Web Essentials for Visual Studio

Web Essentials extends Visual Studio with a lot of new ... Full immersive Markdown editing experience with ... essential. It's the Web Team's most ...
Read more

Essentials - General - Minecraft Bukkit Plugins - Curse

... and the various modules can be configured to give a unique server experience, ... a great YouTube ... config change) Permission - essentials ...
Read more

Speakeasy Speed Test - Powered by MegaPath

Speakeasy Speed Test requires a newer version of ... As Internet providers sell tiered broadband packages based on speed, it is essential to test regularly ...
Read more

OpenCanvas - Download

OpenCanvas is a graphics app that enhances the drawing and painting experience. It has extensive features great for ... web design. by Nick Mead ... open ...
Read more

Experience Essential Oils

... recipes and how an essential oil can be ... To get great benefits it's ... Products and information on Experience Essential Oils and Shop ...
Read more

Log In to Canvas

Need a Canvas Account? Click Here, It's Free! Log In ... By Instructure User Research Privacy policy Terms of service Facebook Twitter
Read more

30 essential UX tools - Web Design Blog - Webdesigner Depot

30 essential UX tools ... link checks and speed tests. For a positive user experience it’s also important that the technical side ... their web version.
Read more

MacBook - Apple

With the new MacBook comes a whole new way to experience a ... you can connect to the web, ... It also comes with a collection of great apps for ...
Read more

The New Exchange - Exchange Team Blog - Site Home ...

... the preview of the next version of Exchange ... This allows your users to be productive and have a great OWA experience ... Try the new Exchange Online ...
Read more