Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Speed is Essential for a Great Web Experience

16,173 views

Published on

Slides from general purpose web performance talk from 1st Dec 2014 at Autotrader, Manchester.

Covers

Published in: Internet, Engineering, Technology
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ★★★ https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Speed is Essential for a Great Web Experience

  1. http://www.flickr.com/photos/barkaway/342359810 Speed is Essential for a Great Web Experience Andy Davies NCC Group
  2. https://www.flickr.com/photos/joelhughes/8743984985
  3. http://www.flickr.com/photos/randomidea/247994072 Performance isn’t always a priority
  4. https://www.flickr.com/photos/sharynmorrow/643126727 “Has it loaded yet?”
  5. 100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968 Instant Seamless Yawn! How we perceive response times
  6. 100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968 Instant Seamless Yawn! How we perceive response times Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds.
  7. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
  8. Delay increases abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
  9. …and has a negative impact on brand perception Tesco’s ‘Fast’ Tesco’s ‘Slow’ Mobile Web Stress: Understanding the Neurological Impact of Poor Performance, Tammy Everts, Radware
  10. We’re more tolerant as we get further into funnels Less Tolerant More Tolerant
  11. and suspicious if something’s too fast
  12. and suspicious if something’s too fast
  13. Reader panel (3,000 people) rated speed (fast page load time) as their second most important driver! Speed had the highest percentage of people saying it was VERY important to them
  14. Faster experiences improve conversion Walmart 2012
  15. increased conversions by 10% Shaved 1 second off median home page time! 6 seconds off 98th percentile http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
  16. Bing carried out some experiments $/ +1s - 2.8%
  17. Shopzilla cut page load time by 5 seconds! +12% +25% -50% http://velocityconf.com/velocity2009/public/schedule/detail/7709 $$$
  18. Seatwave - below 4 secs vs. above 4 secs +28% 2x 1/6 http://www.slideshare.net/pdyball/velocity-eu-2013-what-is-the-velocity-of-an-unladen-swallow ✔ 凝
  19. But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922
  20. The Web is Too Slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  21. Too many sites are too slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  22. and it’s getting worse! Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds. ! ! Year-on-year the median page has slowed down by 23% Tammy Everts - Radware State of the Union Fall 2014
  23. “We’re not being deliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728
  24. But only if we build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
  25. We need to understand our fundamental building blocks https://www.flickr.com/photos/ogimogi/2253657555
  26. Everyone has fast broadband now… Right? https://www.flickr.com/photos/98640399@N08/9287370881
  27. Speed (Mbps) 18 16 14 12 10 8 6 4 2 0 Nov 08 Apr 09 May 10 Nov 10 May 11 Nov 10 May 12 Nov 11 May 13 Nov 12 Nov 13 UK Broadband speeds are rising… Ofcom
  28. But ‘Real Users’ experience varies Visitors (%) 1 2 3 4 5 6 7 8 9 10 Load Time (s) 1% 3% 3% 2% 6% 8% 13% 27% 8% 6%
  29. 24% 1% 3% 3% 2% 6% But ‘Real Users’ experience varies 8% 13% 27% 8% 6% Visitors (%) 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  30. and bandwidth (often) isn’t the bottleneck 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing) 2.0 1.5 1.0 0.5
  31. Which will be faster? 1Mbps 10Mbps
  32. Which will be faster? 1Mbps 10Mbps
  33. Which will be faster? 1Mbps / 28ms RTT 10Mbps / 280ms RTT
  34. We often think of the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889
  35. that’s sometimes really bad https://www.flickr.com/photos/chesh2000/4487000196
  36. but the reality is closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
  37. “More Bandwidth Doesn’t Matter (much)” Mike Belshe Page Load Time 1.41s 1.39s 1.38s 1.37s 1.36s 1.50s 1.44s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps) 1.63s 1.95s 3.11s
  38. Latency has linear impact on user experience 4 3 Page Load Time (s) 1 2 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
  39. Latency increases with distance http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml www.vectortemplates.com
  40. Latency increases with distance 81ms 201ms 156ms 266ms 232ms 28ms http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml www.vectortemplates.com
  41. There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
  42. (TCP Segments) TCP and the Lower Bound of Web Performance John Rauser Larger downloads == more round trips 285kB 214kB 143kB 71kB 1 2 3 4 5 6 7 8 9 10 11 Round Trips Size
  43. Latency is one of our greatest enemies https://www.flickr.com/photos/jjvaca/728072059
  44. We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  45. User gets feedback
  46. Network request still in progress User gets feedback
  47. But there’s plenty of recipes to work around it
  48. Some of the optimisations are hacks! https://www.flickr.com/photos/rocketnumber9/13695281
  49. Browsers support more parallel connections Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
  50. We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
  51. DataURIs url(data:image/ png;base64,iVBORw0KGgoAAA ANSUhEUgAAABkAAAAZCAMAAAD zN3VRAAAAGXRFWHRTb2Z0d2Fy ZQBBZG9iZSBJbWFnZVJlYWR5c cllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeN piYBgFo2AwAIAAAwACigABtnC V2AAAAABJRU5ErkJggg==) =
  52. DataURIs Larger downloads (needs gzip)! Overrides browser priorities url(data:image/ png;base64,iVBORw0KGgoAAA ANSUhEUgAAABkAAAAZCAMAAAD zN3VRAAAAGXRFWHRTb2Z0d2Fy ZQBBZG9iZSBJbWFnZVJlYWR5c cllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeN piYBgFo2AwAIAAAwACigABtnC V2AAAAABJRU5ErkJggg==) =
  53. Create CSS and JavaScript bundles + + + + = =
  54. Create CSS and JavaScript bundles + + + + = = More to download and parse
  55. Create CSS and JavaScript bundles + + + + = = More to download and parse +! x ! Whole bundle is invalidated if a single file changes
  56. CSS Sprites
  57. CSS Sprites To get just one sprite …
  58. CSS Sprites To get just one sprite … Browser must download and decode the whole image
  59. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  60. Build tools and optimisation services help plug gaps and won’t be going away…
  61. But couldn’t we be more efficient? https://www.flickr.com/photos/belsymington/4102783610
  62. HTTP/2 (Evolved from Google’s SPDY)
  63. Single multiplexed connection to host HTTP/2 HTTP/1.1
  64. Multiplexing offers interesting possibilities
  65. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
  66. How much of an image do we need to make it usable - 15%?
  67. How much of an image do we need to make it usable - 25%?
  68. How much of an image do we need to make it usable - 80%?
  69. How much of an image do we need to make it usable - 80%? There are some questions over the user experience with progressive images
  70. HTTP/1.1 - browser sets priorities
  71. HTTP/2 - browser hints priorities server can override them
  72. Adds header compression too
  73. Google and Mozilla will only support over HTTPS http://www.flickr.com/photos/forsytht/4553656244
  74. HTTP/2 rollouts will start next year - we still have a lot to learn http://www.flickr.com/photos/atoach/6014917153
  75. ???
  76. Covert HTML … <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <script src="script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> </body> </html>
  77. … into Document Object Model (DOM) html head body meta link script title h1 p img
  78. Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
  79. … into CSS Object Model (CSSOM) body h1 p span font-size: 16px font-size: 16px text-decoration: underline font-size: 16px font-weight: bold font-size: 16px font-weight: bold color: #000 img font-size: 16px border: 1px solid #ccc
  80. Combine DOM and CSSOM to build Render Tree body h1 p img font-size: 16px text-decoration: underline font-size: 16px font-weight: bold font-size: 16px font-weight: bold border: 1px solid #ccc
  81. Render the Page HTML CSS DOM CSSOM Render! Tree Layout Paint
  82. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  83. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution
  84. Let’s pretend we’re a browser (with the preloader switched off) https://www.flickr.com/photos/mozillaeu/11171168996
  85. Two key rules to remember Constructing CSS Object Model (CSSOM) blocks JavaScript execution! ! JavaScript blocks DOM construction
  86. GET example.html HTTP/1.1
  87. GET example.html HTTP/1.1
  88. GET example.html HTTP/1.1
  89. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  90. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  91. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> GET /styles.css HTTP/1.1 <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  92. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  93. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html> GET /more-styles.css HTTP/1.1
  94. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  95. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> GET /script.js HTTP/1.1 <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  96. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  97. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  98. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html> Must wait for:! 1. CSS download and OM construction! 2. JS download and execution
  99. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  100. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html> GET /another-script.js HTTP/1.1
  101. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  102. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  103. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> Must wait for:! <body> 1. JS download and execution <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  104. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  105. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html> GET /image.jpg HTTP/1.1
  106. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
  107. example.html <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html> GET /image-2.jpg HTTP/1.1
  108. http://www.flickr.com/photos/nozzer/3990622685 Pre-loader hides some of the latency penalty So our pages load 20% faster
  109. Structure pages for the browser’s critical path HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  110. Get the <head> straight <!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title> ! <link rel="stylesheet" href="styles.css" type="text/css" /> ! <script src="script.js"></script> . . . </head> CSS before JS! Ideally one file Only JS needed for page load
  111. Load remaining JavaScript late as possible ! . . . ! <script src="restofscript.js"></script> ! </body> </html> One file or many?
  112. Use async attribute to avoid blocking DOM ! <script async src="myscript.js"></script> Widely supported (82%) doesn’t incur delays of using inline script to load other scripts e.g. Google Analytics snippet http://caniuse.com/script-async
  113. HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  114. HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint
  115. And we all hate this… right?
  116. Use font foundries that prioritise our visitor’s experience http://www.flickr.com/photos/splorp/4951916342
  117. Browsers pull resources from the server but … https://www.flickr.com/photos/steveweaver/2915792034
  118. https://www.flickr.com/photos/christian_bachellier/582457911 What if the server could push them?
  119. Browser Server Server builds page GET index.html <html><head>… Loading a web page Request other page resources
  120. Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources Loading a web page
  121. Browser Server Server builds page GET index.html Push critical resource e .g. CSS <html><head>… Server Push Request other page resources
  122. Browser Server Server builds page GET index.html Push critical resource e .g. CSS <html><head>… Request other page resources Server Push
  123. Browser Server Server builds page GET index.html Push critical resource e .g. CSS <html><head>… Request other page resources Server Push Browser can reject push
  124. We need to be deliberate, to design for performance https://www.flickr.com/photos/9760699@N08/3748770917
  125. http://www.flickr.com/photos/communityfriend/2342578485 Set performance budgets
  126. Setting a budget An event that matters to the visitor! within a set time! under defined network conditions
  127. “Usable within 10 seconds on GPRS connection”! BBC News
  128. “SpeedIndex under 1000”! Paul Irish
  129. Could use page size or number of objects but…
  130. …how well would they work here?
  131. Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384
  132. Make performance visible Lara Hogan, Etsy
  133. !
  134. Lara Hogan, Etsy
  135. http://lafikl.github.io/perfBar
  136. Compare against competitors
  137. The Guardian display their performance on a monitor by FD’s office
  138. Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514
  139. https://www.flickr.com/photos/basheertome/4762529213
  140. http://www.flickr.com/photos/nzbuu/4093456029 Thank You! @andydavies andy.davies@nccgroup.com

×