Published on September 7, 2012
Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.ﬂickr.com/photos/barkaway/342359810
But sometimes other concerns take priority... http://www.ﬂickr.com/photos/randomidea/247994072
“Are we there yet?” http://www.ﬂickr.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.ﬂickr.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.ﬂickr.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 ﬁrst 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)
Minimum round trips to download a ﬁle (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.ﬂickr.com/photos/mikebaird/2464769129/
Get the <head> straight<!doctype html><html><head> CSS before JS <meta charset="utf-8"> Ideally one ﬁle* <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 ﬁles
Squash text based content - gzip / minify http://www.ﬂickr.com/photos/evdg/298415813
Images are 64% of an ‘average’ web page http://www.ﬂickr.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.ﬂickr.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.ﬂickr.com/photos/sterlingely/64228609
Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency
Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
Argh... My brain hurts! http://www.ﬂickr.com/photos/corneveaux/3248566797
Don’t have to do it all by hand http://www.ﬂickr.com/photos/simeon_barkas/2557059247
Performance isn’t just for Christmas Measure Optimise Analyse
@andydavies email@example.com://www.slideshare.net/andydavies http://www.ﬂickr.com/photos/auntiep/5024494612
CreditsAll photographs copyright original owners on ﬂickr.comFollowing pictograms courtesy of The Noun Project
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...
Web Essentials extends Visual Studio with a lot of new ... Full immersive Markdown editing experience with ... essential. It's the Web Team's most ...
... and the various modules can be configured to give a unique server experience, ... a great YouTube ... config change) Permission - essentials ...
Speakeasy Speed Test requires a newer version of ... As Internet providers sell tiered broadband packages based on speed, it is essential to test regularly ...
OpenCanvas is a graphics app that enhances the drawing and painting experience. It has extensive features great for ... web design. by Nick Mead ... open ...
... recipes and how an essential oil can be ... To get great benefits it's ... Products and information on Experience Essential Oils and Shop ...
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.
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 ...
... 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 ...