Download as PDF, PPTX
![Some interesting ideas that may help
font-timeout: time;!
font-desirability: [ optional | mandatory ];
https://github.com/igrigorik/css-font-timeout](https://image.slidesharecdn.com/thewebistooslow-141105151041-conversion-gate02/75/The-web-is-too-slow-67-2048.jpg)
Uploaded byAndy Davies
The web is too slow
The document discusses the critical issue of website speed, highlighting that many top retail sites take longer than 3 seconds to render, which negatively impacts user experience and conversions. It emphasizes the importance of setting performance budgets and understanding network constraints to optimize page load times, as well as the need for deliberate design choices that prioritize speed. Various factors like latency, bandwidth, and the construction of the document object model (DOM) are explored as they relate to web performance.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
The web is too slow
- 1. https://www.flickr.com/photos/sharynmorrow/643126727 The WebIs… Too Slow @AndyDavies #TheWebIs, Oct 2014
- 2.
- 3. But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922
- 4. The Web isToo Slow http://www.flickr.com/photos/the_justified_sinner/3507390621
- 6. Too many sitesare too slow http://www.flickr.com/photos/the_justified_sinner/3507390621
- 7. and it’s gettingworse! 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 beingdeliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728
- 9. But only ifwe build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
- 10. Reader panel (3,000people) 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.
- 12. increased conversions by10% 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 tolerantas we get further into purchase funnels Less Tolerant More Tolerant
- 14. and sometimes weget suspicious if something’s too fast
- 15. and sometimes weget suspicious if something’s too fast
- 16. Design is allabout 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 10seconds on GPRS connection”! BBC News
- 20. “SpeedIndex under 1000”! Paul Irish
- 21. Could use pagesize or number of objects but…
- 22. …how well wouldthey work here?
- 23. Make them visible Lara Hogan, Etsy
- 24.
- 25.
- 26.
- 27. Test with aslower network connection Network Link Conditioner (or http://slowyapp.com/) http://jagt.github.io/clumsy/
- 30. It’s great forcomparisons… set a budget based on competitors
- 31. Build it intobuild processes
- 32. Commercial services basedon WebPagetest
- 33. Performance budgets comingto them too
- 35. We know howto make fast sites, there are plenty of recipes out there
- 36. How well dowe understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578
- 37. Do we understandour fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555
- 38. Which will befaster? 1Mbps 10Mbps
- 39. Which will befaster? 1Mbps / 28ms RTT 10Mbps / 280ms RTT
- 40. We often thinkof the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889
- 41. that’s sometimes reallybad https://www.flickr.com/photos/chesh2000/4487000196
- 42. but the realityis closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
- 43. “More Bandwidth Doesn’tMatter (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 hasa 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 withdistance http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml www.vectortemplates.com
- 47. Latency increases withdistance 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 lastmile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
- 49. (TCP Segments) TCPand 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 cheatthe latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
- 52.
- 53. Network request stillin 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 DocumentObject 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 CSSObject 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 andCSSOM 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 aboutJavaScript? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
- 62. But what aboutJavaScript? 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 allhate this… right?
- 66. Use font foundriesthat prioritise your visitor’s experience http://www.flickr.com/photos/splorp/4951916342
- 67. Some interesting ideasthat 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 pushin HTTP/2 might help too
- 69. Be deliberate, designfor 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 constraintsof our medium https://www.flickr.com/photos/33649815@N03/3367739514
- 72.
- 73. http://www.flickr.com/photos/nzbuu/4093456029 Thank You! @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies