Speed Matters!
2 likes1,769 views
This document discusses the importance of website speed and performance. It notes that most top retail sites take over 3 seconds to load critical content, and median page load times have slowed by 23% year-over-year. Faster sites see benefits like 10% higher conversions. Network latency has a greater impact on performance than bandwidth. Techniques like preloading fonts and images can help mitigate latency. Frameworks and features like service workers may also help if designed deliberately for performance. Regular measurement and setting performance budgets are recommended to build fast user experiences.
![Some interesting ideas that may help
font-timeout: <time>;!
font-desirability: [ optional | mandatory ];
https://github.com/igrigorik/css-font-timeout](https://image.slidesharecdn.com/speedmatters-150123025956-conversion-gate02/85/Speed-Matters-61-320.jpg)
Speed Matters!
- 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”! https://www.flickr.com/photos/lukew/7382528728 Tim Kadlec
- 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
- 12. increased conversions by 10% http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds Shaved 1 second off median home page time! 6 seconds off 98th percentile
- 13. More tolerant as we get further in purchase funnels Less Tolerant More Tolerant
- 14. 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. http://www.flickr.com/photos/communityfriend/2342578485 Embrace those constraints… set a performance budget
- 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. Lara Hogan, Etsy
- 25. 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
- 32. We know how to make fast sites… plenty of recipes
- 33. How well do we understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578
- 34. Do we understand our fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555
- 35. Which will be faster? 1Mbps 10Mbps/ 28ms RTT / 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 PageLoadTime Bandwidth (Mbps) 1 2 3 4 5 6 7 8 9 10 1.36s1.37s1.38s1.39s1.41s1.44s1.50s 1.63s 1.95s 3.11s
- 40. But latency has a linear impactPageLoadTime(s) 1 2 3 4 Round Trip Time (ms) 0 20 40 60 80 100 120 140 160 180 200 220 240
- 42. http://www.vectortemplates.com BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml Latency increases with distance 81ms 201ms 156ms 266ms 232ms 28ms
- 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 Handshake Client Server Round Trip Time SYN GET / HTTP 1.1 SYN-ACK ACK
- 45. TCP Slow Start Client Server Round Trip Time GET / HTTP 1.1
- 46. TCP and the Lower Bound of Web Performance John Rauser Larger downloads == more round trips 71kB 143kB 214kB 285kB 1 2 3 4 5 6 7 8 9 10 11 (TCP Segments) Round Trips Size
- 47. We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
- 50. 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>
- 51. … into Document Object Model (DOM) html head body meta link script title h1 p img
- 52. Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
- 53. … 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
- 54. Combine DOM and CSSOM to build Render Tree body h1 p img font-size: 16px text-decoration: underline font-size: 16px font-weight: bold border: 1px solid #ccc font-size: 16px font-weight: bold
- 56. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
- 57. But what about JavaScript? JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
- 58. Fonts and background images discovered when render tree buildsHTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
- 59. And we all hate this… right?
- 60. Use font foundries that prioritise visitor 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
- 66. How could features like ServiceWorker help? https://github.com/slightlyoff/ServiceWorker
- 67. Be deliberate, design for performance https://www.flickr.com/photos/9760699@N08/3748770917
- 68. Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384
- 69. Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514