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/aukirk/9233111519 Speed Matters! @AndyDavies JS Oxford, Jan 2015
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. ! ! Yea...
“We’re not being deliberate about performance”! https://www.flickr.com/photos/lukew/7382528728 Tim Kadlec
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 highe...
Speed matters! Walmart 2012
increased conversions by 10% http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds Sha...
More tolerant as we get further in purchase funnels Less Tolerant More Tolerant
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.! Matia...
http://www.flickr.com/photos/communityfriend/2342578485 Embrace those constraints… set a performance budget
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… plenty of recipes
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/ 28ms RTT / 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_0492...
“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.3...
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
http://www.vectortemplates.com BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml Latency in...
There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/k...
TCP Handshake Client Server Round Trip Time SYN GET / HTTP 1.1 SYN-ACK ACK
TCP Slow Start Client Server Round Trip Time GET / HTTP 1.1
TCP and the Lower Bound of Web Performance John Rauser Larger downloads == more round trips 71kB 143kB 214kB 285kB 1 2 3...
We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
User gets feedback Network request
Covert HTML … <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" ...
… 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 } i...
… into CSS Object Model (CSSOM) body h1 p span font-size: 16px font-size: 16px text-decoration: underline font-size: 16px ...
Combine DOM and CSSOM to build Render Tree body h1 p img font-size: 16px text-decoration: underline font-size: 16px font-w...
Render the Page HTML CSS DOM CSSOM Render! Tree Layout Paint
But what about JavaScript? HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
But what about JavaScript? JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution HTML CSS DOM...
Fonts and background images discovered when render tree buildsHTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
And we all hate this… right?
Use font foundries that prioritise visitor experience http://www.flickr.com/photos/splorp/4951916342
Some interesting ideas that may help font-timeout: <time>;! font-desirability: [ optional | mandatory ]; https://github.co...
https://www.flickr.com/photos/christian_bachellier/582457911 Server push in HTTP/2 might help too
Watch your framework
http://www.filamentgroup.com/lab/mv-initial-load-times.html
How could features like ServiceWorker help? https://github.com/slightlyoff/ServiceWorker
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 ThankYou! @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavi...
Speed Matters!
Speed Matters!
Speed Matters!
Speed Matters!
Speed Matters!
Speed Matters!
Upcoming SlideShare
Loading in …5
×

Speed Matters!

1,489 views

Published on

Slides from my 22nd Jan talk on Web Performance at JS Oxford

Published in: Technology
License: CC Attribution-ShareAlike License
no profile picture user

  • Be the first to comment

Speed Matters!

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

×