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.
https://www.flickr.com/photos/sharynmorrow/643126727 The Web Is… Too Slow @AndyDavies #TheWebIs, Oct 2014
https://www.flickr.com/photos/dullhunk/3930915541
But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922
The Web is Too Slow http://www.flickr.com/photos/the_justified_sinner/3507390621
Too many sites are too slow http://www.flickr.com/photos/the_justified_sinner/3507390621
and it’s getting worse! Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds. ! ! ...
“We’re not being deliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728
But only if we build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is...
Reader panel (3,000 people) rated speed (fast page load time) as their second most important driver! ! Speed had the hi...
Speed matters! Walmart 2012
increased conversions by 10% Shaved 1 second off median home page time! 6 seconds off 98th percentile http://www.slides...
We’re more tolerant as we get further into purchase funnels Less Tolerant More Tolerant
and sometimes we get suspicious if something’s too fast
and sometimes we get suspicious if something’s too fast
Design is all about finding solutions within constraints,! if there were no constraints, it’s not design — it’s art.! Ma...
Embrace those constraints… set a performance budget http://www.flickr.com/photos/communityfriend/2342578485
Setting a budget An event that matters to the visitor! within a set time! under defined network conditions
“Usable within 10 seconds on GPRS connection”! BBC News
“SpeedIndex under 1000”! Paul Irish
Could use page size or number of objects but…
…how well would they work here?
Make them visible Lara Hogan, Etsy
!
Lara Hogan, Etsy
http://lafikl.github.io/perfBar
Test with a slower network connection Network Link Conditioner (or http://slowyapp.com/) http://jagt.github.io/clumsy/
It’s great for comparisons… set a budget based on competitors
Build it into build processes
Commercial services based on WebPagetest
Performance budgets coming to them too
We know how to make fast sites, there are plenty of recipes out there
How well do we understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578
Do we understand our fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555
Which will be faster? 1Mbps 10Mbps
Which will be faster? 1Mbps / 28ms RTT 10Mbps / 280ms RTT
We often think of the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889
that’s sometimes really bad https://www.flickr.com/photos/chesh2000/4487000196
but the reality is closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_049...
“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...
But latency has a linear impact 4 3 Page Load Time (s) 1 2 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip ...
Latency increases with distance http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml w...
Latency increases with distance 81ms 201ms 156ms 266ms 232ms 28ms http://BT Backbone roundtrip times from London: h...
There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photo...
(TCP Segments) TCP and the Lower Bound of Web Performance! John Rauser Larger downloads == more round trips 285kB 214...
We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
User gets feedback
Network request still in progress User gets feedback
???
Covert HTML … html head meta name=viewport content=width=device-width,initial-scale=1.0 link href=styles.css rel=style...
… into Document Object Model (DOM) html head body meta link script title h1 p img
Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p span { color: #000 ...
… into CSS Object Model (CSSOM) body h1 p span font-size: 16px font-size: 16px text-decoration: underline font-size...
Combine DOM and CSSOM to build Render Tree body h1 p img font-size: 16px text-decoration: underline font-size: 16px ...
Render the Page HTML CSS DOM CSSOM Render! Tree Layout Paint
But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint JavaScript blocks DOM construc...
HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout ...
And we all hate this… right?
Use font foundries that prioritise your visitor’s experience http://www.flickr.com/photos/splorp/4951916342
Some interesting ideas that may help font-timeout: time;! font-desirability: [ optional | mandatory ]; https://github.c...
https://www.flickr.com/photos/christian_bachellier/582457911 Server push in HTTP/2 might help too
Be deliberate, design for performance https://www.flickr.com/photos/9760699@N08/3748770917
Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384
Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514
https://www.flickr.com/photos/basheertome/4762529213
http://www.flickr.com/photos/nzbuu/4093456029 Thank You! @andydavies andy.davies@nccgroup.com http://slideshare.net/an...
The web is too slow
The web is too slow
The web is too slow
The web is too slow
The web is too slow
Upcoming SlideShare
Loading in …5
×

The web is too slow

7,577 views

Published on

Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow

Published in: Internet, Technology
License: CC Attribution-ShareAlike License
no profile picture user
Show More

The web is too slow

  1. https://www.flickr.com/photos/sharynmorrow/643126727 The Web Is… Too Slow @AndyDavies #TheWebIs, Oct 2014
  2. https://www.flickr.com/photos/dullhunk/3930915541
  3. But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922
  4. The Web is Too Slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  5. Too many sites are too slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  6. 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
  7. “We’re not being deliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728
  8. But only if we build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
  9. 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
  10. Speed matters! Walmart 2012
  11. 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
  12. We’re more tolerant as we get further into purchase funnels Less Tolerant More Tolerant
  13. and sometimes we get suspicious if something’s too fast
  14. and sometimes we get suspicious if something’s too fast
  15. Design is all about finding solutions within constraints,! if there were no constraints, it’s not design — it’s art.! Matias Duarte “ ”
  16. Embrace those constraints… set a performance budget http://www.flickr.com/photos/communityfriend/2342578485
  17. Setting a budget An event that matters to the visitor! within a set time! under defined network conditions
  18. “Usable within 10 seconds on GPRS connection”! BBC News
  19. “SpeedIndex under 1000”! Paul Irish
  20. Could use page size or number of objects but…
  21. …how well would they work here?
  22. Make them visible Lara Hogan, Etsy
  23. !
  24. Lara Hogan, Etsy
  25. http://lafikl.github.io/perfBar
  26. Test with a slower network connection Network Link Conditioner (or http://slowyapp.com/) http://jagt.github.io/clumsy/
  27. It’s great for comparisons… set a budget based on competitors
  28. Build it into build processes
  29. Commercial services based on WebPagetest
  30. Performance budgets coming to them too
  31. We know how to make fast sites, there are plenty of recipes out there
  32. How well do we understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578
  33. Do we understand our fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555
  34. Which will be faster? 1Mbps 10Mbps
  35. Which will be faster? 1Mbps / 28ms RTT 10Mbps / 280ms RTT
  36. We often think of the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889
  37. that’s sometimes really bad https://www.flickr.com/photos/chesh2000/4487000196
  38. but the reality is closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
  39. “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
  40. But latency has a linear impact 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)
  41. Latency increases with distance http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml www.vectortemplates.com
  42. 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
  43. There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
  44. (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
  45. We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  46. User gets feedback
  47. Network request still in progress User gets feedback
  48. ???
  49. 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 titleHTML Example/title /head body h1Title/h1 pSome introductory text and picture! img src=image.jpg//p /body /html
  50. … into Document Object Model (DOM) html head body meta link script title h1 p img
  51. Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p span { color: #000 } img { border: 1px solid #ccc }
  52. … 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
  53. 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
  54. Render the Page HTML CSS DOM CSSOM Render! Tree Layout Paint
  55. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  56. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution
  57. HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  58. HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint
  59. And we all hate this… right?
  60. Use font foundries that prioritise your visitor’s experience http://www.flickr.com/photos/splorp/4951916342
  61. Some interesting ideas that may help font-timeout: time;! font-desirability: [ optional | mandatory ]; https://github.com/igrigorik/css-font-timeout
  62. https://www.flickr.com/photos/christian_bachellier/582457911 Server push in HTTP/2 might help too
  63. Be deliberate, design for performance https://www.flickr.com/photos/9760699@N08/3748770917
  64. Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384
  65. Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514
  66. https://www.flickr.com/photos/basheertome/4762529213
  67. http://www.flickr.com/photos/nzbuu/4093456029 Thank You! @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies

×