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