Speed is Essential for a Great Web Experience


Published on

Audio of the talk is available here - http://blog.port80events.co.uk/2012/07/05/2012-talk-andy-davies/

Published in: Technology, Art & Photos
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Andy Davies\n\nSpecialise in making web sites faster, more reliable and helping them scale as they grow\n\nSlides complete will go on Slideshare in the next day or so\n\nIf anyone has any questions or comments feel free to send me a tweet...\n\n\n
  • \n
  • \n
  • How we perceive response times\n\nStrangeloop Networks research into load times of Alexia Top 2000 ecommerce sites \n - Average page load time 11.21s\n - Best 2.2x, worst 40.2s!\n - Only 13 loaded in less that 5s\n\nOur perception of load time is off:\n- Our expectation is faster\n- Perceive load time as 15% slower than reality\n- Recount experience as 35% slower\nStoyan Stefanov - Psychology of Performance\n
  • Retail task - find and buy a laptop on a leading e-commerce site\nInsurance task - find and buy personal travel insurance on an insurance website. \nEEG & EOG, camera\n
  • \n\nAlso people’s perception of time is faulty... (Stoyan Stefanov, Psychology of Performance)\n - Average person perceives page takes 15% longer to load that reality\n - Will recount it as 35% longer when talking to others\n\n
  • Amazon - 100 ms delay - sales down 1%\n
  • \n
  • ShopzillaUptime 99.51% > 99.97\n\nMozillareduced load time by 2.2 secs = 60 million extra downloads / year\n\nYahootraffic went up 9% for every 400ms improvement\n\nNetflix: Reduced outbound bandwidth by 43%\n\nKerboodle: Reduced hosting costs by over €30,000 per year\n\n
  • How many have websites?\n\nHow many think theirs is fast?\n\nHow many measure?\n
  • We are not real users...\n\nActual page load times from a real site, note huge peak of over 10 seconds\n\nMany external factors can affect page load time:\n\n- Browser\n- How they are connected ADSL / mobile / public WiFi\n- Bandwidth\n- Latency\n- Anti-virus\n- Network kit\n- etc\n\nThese factors are beyond our control but to get a true picture of page load times we must measure them in the visitors browser.\n
  • Navigation Timing API \n - Firefox 7+, IE9+, Chrome 6+, Chrome on ICS\n - NO SAFARI - OS X or iOS!!!\n\nCan script to add extra timings\n\nLow sample rate\n\nAverages!!!\n\nIncrease sample rate from 1% to 100% add:\n\n_gaq.push(['_setSiteSpeedSampleRate', 100]);\n\nPage load time data collected by default since 16th Nov 2011\n\nGood description of how it works on StackOverflow\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Some server performance issues can be improved by throwing hardware at it e.g. faster processors, more RAM (Databases love RAM), faster disks.\n\nBut should still look at optimising the back-end as it’s an important part of the picture e.g. DB tuning, architectures, reverse proxies etc.\n\nEven without tuning the server can still improve page load times by “flushing early”\n\n
  • Even higher on mobile\n
  • \n
  • Bursting over 1.5Mbps = Testing Artifact\n
  • \n
  • What about CDN?\nWhat about cheating on TCP slow-start\nLinux 2.6.39 increases initcwnd to 10\n
  • 16% vs 84% - might want to compare against the 1/3 vs 2/3 I generally see\nBased on 97,000 URLs from Alexa Top 1000\nAdd an arrow to red segment saying images...\n
  • \n
  • What about PNGs and transparency? - need to cover the issues\n
  • Traditionally been a pain to create but tools are much better + cSS preprocessors\n
  • \n
  • \n
  • plus more - shadows, text gradients, transforms etc.\n\nbox-shadow:3px 3px 5px 6px #ccc;\n\nMobile impications @brianleroux\n
  • SVG - 40KB Uncompressed / 12KB Compressed\nPNG - 800x480 - 86KB optimised\n
  • Scales as user alters text size\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What if they are slow? down? Or even blocked - country, corporate firewall etc.?\n\n21s before rendering starts when Twitter is down\n\n\n
  • Don’t blindly add third party scripts to a site\n\nMany social sites now have async versions, use the latest snippet.\n\nAddThis doesn’t - don’t use it\n\nOpenDNS blocked Google’s jQuery CDN!\n\nh5bp includes html5shiv from googlecode - it’s only 1KB, quicker to load from own site\n
  • \n
  • Some things can be automated e.g. compression, minification, merging, image compression plus more sophisticated optimisations.\n\nFrom plugins for Wordpress and web servers, appliances that sit in front of your server farm through to cloud-based optimisation services.\n\nOther are a little more difficult e.g. flush early, improving backed performance, asynchronous loading scripts etc.\n\nAutomation products / tools...\n\nFramework support\n Asset pipeline (Rails)\n Resources plugin (Grails)\n Webassets (Python)\n Assetic (PHP)\n\nCMS plugins\n - W3 Total Cache for Wordpress\n\nServer plugins\n - mod_pagespeed (Apache)\n - reduce requests (IIS)\n - Aptimize (IIS) (£)\n - Webo (£)\n\nAppliances\n - Strangeloop (£)\n - Traditional ADCs do some of this e.g. compression\n\nCloud services\n - Strangeloop (£)\n - Torbit (£)\n - Blaze.io (£)\n - Yotta (£)\n - Google’s PageSpeed service\n
  • \n
  • \n
  • \n
  • \n
  • Speed is Essential for a Great Web Experience

    1. Speed is Essential for aGreat Web Experience@andydaviesPort 80 (#p80N)May 2012 http://www.flickr.com/photos/44442915@N00/5214810596
    2. But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072
    3. “Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727
    4. Our perception of response time Instant Seamless Yawn!100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
    5. 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
    6. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
    7. Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
    8. Google conducted an experiment +400ms -0.6%
    9. Bing did some experiments too +1s $/ - 2.8% +
    10. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
    11. Measuring page load time...
    12. Measure 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)
    13. Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
    14. Measuring Real Users - Torbit Insight
    15. Measuring Real Users - Torbit Insight (Check out at Log Normal too)
    16. Measuring Real Users - New Relic
    17. webpagetest.org
    18. Waterfall for bbc.co.uk/news
    19. www.blaze.io/mobile
    20. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
    21. 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
    22. Fix slow server responses first 4 seconds!
    23. 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 artifact of testing)
    24. 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
    25. Speeding Things Up - The Basics CSS at top Compress Consilidate Minify Reduce Requests Cache Forever JS at bottom
    26. Proportion of URLs that can be compressed ☺ ☹ http://zoompf.com/blog/2012/05/http-compression-use-by-alexa-top-1000
    27. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
    28. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
    29. CSS Sprites + background-position: -408px 0; width: 128px; height: 128px; =
    30. Data-URIs<img width="128" height="128"src="data:image/PNG;base64,iVBORw0KGgoAAAANSUhEUgAAAIAA ... =GAA39eV7u4AAAAAElFTkSuQ" /> Should be served with GZIP
    31. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
    32. Look Ma, No Images!border-radius: 20px;background: linear-gradient(left, #f06, #ff0); Watch mobile performance. Remember vendor prefixes!
    33. Vector Graphics FTW? SVG: 12 KB vs PNG: 86KB
    34. What about icon / pictogram fonts? ★ ★ ☆ ☆ ♥ ♥ ☁ ☁ Heydings by Heydon Works “Bog Standard Font”
    35. display:none - still downloads images “‪#p80n‬ you do get adverts on the smashingmag site on smaller viewports. They just hideously display:none; so you still down load them :-/” @sturobson ‬
    36. Don’t forget about favicon.ico 1.4 seconds for favicon!
    37. Don’t forget about favicon.ico 1.4 seconds for favicon! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    38. Don’t block the browser... http://www.flickr.com/photos/barteko/6128499314
    39. news.bbcimg.co.uk static.bbc.co.ukBrowsers can download resources in parallel
    40. But Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
    41. Social buttons break... http://bit.ly/yRjX63
    42. Social buttons break... http://bit.ly/yRjX63
    43. 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>
    44. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
    45. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
    46. Performance isn’t just for Christmas Measure Optimise Analyse
    47. http://www.flickr.com/photos/jurvetson/6212582593
    48. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
    49. CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project