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.

0.6 seconds is the new slow

748 views

Published on

Slow sites frustrate consumers. Frustration costs money. To delight consumers, beat competitors, and to please Google, your site will need to load in under a second. Web performance is no longer an art, but a science. You have 600 milliseconds; how will you spend them?

Published in: Education
  • Be the first to comment

0.6 seconds is the new slow

  1. 1. @jonoalderson 0.6 seconds is the new slow
  2. 2. @jonoalderson
  3. 3. @jonoalderson [Today’s Plan] 1. Run you through some speed theory 2. Tons of practical “how to” speed stuff 3. What we’ve done, and plan to do on yoast.com 4. SOME AWESOME RESOURCES 5. Glossary
  4. 4. @jonoalderson READY?
  5. 5. @jonoalderson Users expect fast
  6. 6. @jonoalderson Delays of over 3 seconds can lead to over 40% abandonment Google, 2016, via http://bit.ly/2OBDJGq
  7. 7. @jonoalderson Wired Magazine, 2014 47% of people expect a site to load in less than 2 seconds
  8. 8. @jonoalderson 20% of users abandon their cart if the transaction process is too slow Radware, 2014, http://bit.ly/2weioeS
  9. 9. @jonoalderson more time = less money less time = more money
  10. 10. @jonoalderson Baqend, 2018, http://bit.ly/2MA4nSZ
  11. 11. @jonoalderson Time is money
  12. 12. @jonoalderson Think with Google, http://bit.ly/2N3BXRz
  13. 13. @jonoalderson So, how well are we performing?
  14. 14. @jonoalderson We suck
  15. 15. @jonoalderson Industry USA UK Germany Japan Automotive 9.5 12.3 11.0 10.3 Business & Industrial Markets 8.7 8.3 8.2 8.1 Classifieds & Local 7.9 8.3 7.0 8.3 Finance 8.3 8.0 8.6 7.6 Media & Entertainment 9.0 8.8 7.6 8.4 Retail 9.8 10.3 10.3 8.3 Technology 11.3 10.6 8.8 10.0 Travel 10.1 10.9 7.1 8.2 MachMetrics, 2018, http://bit.ly/2PiFzgK Seconds to “visually loaded” on a 3g connection
  16. 16. @jonoalderson But not for long...
  17. 17. @jonoalderson Because even if your direct competitors are still behind the curve...
  18. 18. @jonoalderson They’ll start reacting soon
  19. 19. @jonoalderson
  20. 20. @jonoalderson Google Webmaster Blog, 2018, http://bit.ly/2wggdHs
  21. 21. @jonoalderson “Speed doesn’t significantly affect rankings”
  22. 22. @jonoalderson Google Webmaster Blog, 2018, http://bit.ly/2wggdHs
  23. 23. @jonoalderson “Speed underpins user experience”
  24. 24. @jonoalderson User experience is the biggest ranking factor*
  25. 25. @jonoalderson And for Google, speed = efficiency
  26. 26. @jonoalderson User Experience Crawl efficiency Structured Data Speed
  27. 27. @jonoalderson
  28. 28. @jonoalderson
  29. 29. @jonoalderson
  30. 30. @jonoalderson So, efficiency speed improvements will continue to drive revenue
  31. 31. @jonoalderson Commercial imperative = progress
  32. 32. @jonoalderson But change is hard
  33. 33. @jonoalderson Big performance & UX improvements require significant architectural change
  34. 34. @jonoalderson You’ve got to sort out all of your technical debt
  35. 35. @jonoalderson You’ve got to adopt new technologies, processes and principles
  36. 36. @jonoalderson More significantly, you need to develop a culture of speed
  37. 37. @jonoalderson But… website (re)development projects, and new talent, run on a 3-5 year cycle
  38. 38. @jonoalderson Google Webmaster Blog, 2010, http://bit.ly/2wczr0I
  39. 39. @jonoalderson 2018 - 2019 First “culture of speed” competitors disrupt the marketplace 2016 - 2017 Brands start to take notice, and start considering the implications of speed 2016 Google announces that mobile speed will affect mobile rankings 2010 Google first announces that “site speed” is a ranking factor
  40. 40. @jonoalderson So, if you wait until your competitors are faster than you, you’ll be too late
  41. 41. @jonoalderson And as sites get faster, slow is going to feel slower
  42. 42. @jonoalderson “So, what do we need to do?”
  43. 43. @jonoalderson HINT: It’s not a big web (re)development project
  44. 44. @jonoalderson You win by a thousand tweaks
  45. 45. @jonoalderson Make bits of it FASTER
  46. 46. @jonoalderson But what does that mean? And where do you start?
  47. 47. @jonoalderson There are two truths
  48. 48. @jonoalderson [1] There’s no such thing as speed.
  49. 49. @jonoalderson How do you measure ‘speed’?
  50. 50. @jonoalderson “The time how long it takes for a page to finish loading”
  51. 51. @jonoalderson But, what does that mean?
  52. 52. @jonoalderson What if the page has components which only load when you interact, or scroll? Are they “finished”?
  53. 53. @jonoalderson What if the page loads instantly, but then loads a bunch of adverts which take ages?
  54. 54. @jonoalderson What if the time-til-first-byte is fast, but then it takes ages to load the content? Or, vice-versa?
  55. 55. @jonoalderson We need better definitions
  56. 56. @jonoalderson Most stock metrics from speed check + optimisation tools suck
  57. 57. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/
  58. 58. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/ Google Pagespeed score
  59. 59. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/ Google Pagespeed score At that point in time, for that URL, for that config, from that location
  60. 60. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/ Google Pagespeed score Relative to other people testing their homepages At that point in time, for that URL, for that config, from that location
  61. 61. @jonoalderson Load fewer, smaller things, duh Pingdom, Website speed test, https://tools.pingdom.com/ Google Pagespeed score Relative to other people testing their homepages At that point in time, for that URL, for that config, from that location
  62. 62. @jonoalderson GTMetrix, https://gtmetrix.com/
  63. 63. @jonoalderson GTMetrix, https://gtmetrix.com/
  64. 64. @jonoalderson GTMetrix, https://gtmetrix.com/
  65. 65. @jonoalderson WTF? GTMetrix, https://gtmetrix.com/
  66. 66. @jonoalderson (actually, that’s not completely true)
  67. 67. @jonoalderson Google Analytics
  68. 68. @jonoalderson Google Analytics
  69. 69. @jonoalderson Google PageSpeed Insights, http://bit.ly/2BxHcEw
  70. 70. @jonoalderson Google PageSpeed Insights, http://bit.ly/2BxHcEw
  71. 71. @jonoalderson “First contentful paint” Google PageSpeed Insights, http://bit.ly/2BxHcEw
  72. 72. @jonoalderson Google PageSpeed Insights, http://bit.ly/2LbGw7j
  73. 73. @jonoalderson “How quickly can we show something interesting?”
  74. 74. @jonoalderson Let’s grab an example
  75. 75. @jonoalderson
  76. 76. @jonoalderson Nav interactivity Fonts Personalised / account stuff Share buttons Author imagesComments, related posts, all sorts! Video Big image Tons of CSS jQuery(!)
  77. 77. @jonoalderson Lazy video placeholder Skeleton container for image
  78. 78. @jonoalderson This goes beyond lazy loading
  79. 79. @jonoalderson [Things we improved] ● Bytes transferred ● Complexity of DOM, CSS and JS ● Painting, layout and layering ● Colours, details, icons
  80. 80. @jonoalderson Site looks & feels faster. Scores didn’t change.
  81. 81. @jonoalderson [2] The only thing which matters is the perception of speed.
  82. 82. @jonoalderson Google, Lighthouse docs, http://bit.ly/2PvhraI
  83. 83. @jonoalderson However, there’s one golden moment...
  84. 84. @jonoalderson Google, Lighthouse docs, http://bit.ly/2PvhraI
  85. 85. @jonoalderson “How quickly can we make it feel ready?”
  86. 86. @jonoalderson Perceived speed is hard to quantify and manage.
  87. 87. @jonoalderson And trade-offs abound.
  88. 88. @jonoalderson
  89. 89. @jonoalderson 0n / off
  90. 90. @jonoalderson 0n / off Fast Slow
  91. 91. @jonoalderson 1 9
  92. 92. @jonoalderson 1 9 ● Low compression ● Fast server response ● Slow delivery & processing ● High compression ● Slow server response ● Faster delivery & processing
  93. 93. @jonoalderson You need to solve for your users
  94. 94. @jonoalderson There are lots of moving parts you can play with.
  95. 95. @jonoalderson
  96. 96. @jonoalderson
  97. 97. @jonoalderson Service workers
  98. 98. @jonoalderson Service workers After load
  99. 99. @jonoalderson Scary?
  100. 100. @jonoalderson Performance optimisation is no longer an art. It’s a science.
  101. 101. @jonoalderson Every site in the world can load in <1s.
  102. 102. @jonoalderson You just need to follow the rules.
  103. 103. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT
  104. 104. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs
  105. 105. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs WP, themes & plugins
  106. 106. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs WP, themes & plugins HTML, CSS & JS
  107. 107. @jonoalderson Let’s do this.
  108. 108. @jonoalderson What’s our target?
  109. 109. @jonoalderson “It is not easy to meet the one second time budget. Luckily for us, the whole page doesn’t have to render within this budget, instead, we must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible. Then, while the user is interpreting the first page of content, the rest of the page can be delivered progressively in the background.” Google PageSpeed Insights, http://bit.ly/2MhP9lT
  110. 110. @jonoalderson Start with optimising: Time until first byte Time until first meaningful paint Time until first interactive Time until DOM content loaded
  111. 111. @jonoalderson Stopppppppp!
  112. 112. @jonoalderson Start with optimising: Time until first byte Time until first meaningful paint Time until first interactive Time until DOM content loaded
  113. 113. @jonoalderson Me, just now
  114. 114. @jonoalderson Start with optimising: Time until DOM content loaded Time until first meaningful paint Time until first interactive Time until first byte
  115. 115. @jonoalderson Just go and find the slow stuff.
  116. 116. @jonoalderson Use tools to spot problems
  117. 117. @jonoalderson Pingdom Website Speed Test, http://bit.ly/2MhP9lT
  118. 118. @jonoalderson
  119. 119. @jonoalderson So we refactored that file...
  120. 120. @jonoalderson
  121. 121. @jonoalderson 0.6 seconds
  122. 122. @jonoalderson Wow!
  123. 123. @jonoalderson However… I may not have been completely honest with you.
  124. 124. @jonoalderson
  125. 125. @jonoalderson
  126. 126. @jonoalderson
  127. 127. @jonoalderson 0.6 seconds on a fast desktop wifi 2.7 seconds on ‘fast 3g’ emulation slow!
  128. 128. @jonoalderson Ooooh...
  129. 129. @jonoalderson We’re on a journey of 1,000 tweaks. There is no magic bullet.
  130. 130. @jonoalderson What have we already done?
  131. 131. @jonoalderson [Hosting & CDN] ● Enterprise > Mid-tier > DIY
  132. 132. @jonoalderson [Hosting & CDN] ● Cloudflare > MaxCDN ● Load balancing + Nginx caching ● Cloudflare Page Rules, Argo & Worker scripts ● SiteGround > WP Engine / Servebolt > Digital Ocean
  133. 133. @jonoalderson [Request/Response] ● HTTP/2 ● HTTP/2 Server Push
  134. 134. @jonoalderson Tom Anthony, Distilled, http://bit.ly/2MhP9lT
  135. 135. @jonoalderson ● HTTP/2 ● HTTP/2 Server Push [Request/Response] ● DNS & asset prefetch/preload
  136. 136. @jonoalderson Machmetrics, http://bit.ly/2wrfjYX
  137. 137. @jonoalderson ● HTTP/2 ● HTTP/2 Server Push [Request/Response] ● DNS & asset prefetch/preload
  138. 138. @jonoalderson ● HTTP/2 ● HTTP/2 Server Push [Request/Response] ● DNS & asset prefetch/preload ● Cross-domain resource reduction
  139. 139. @jonoalderson [WordPress] ● Minimised plugin overhead ● Managed database indexes ● Used transient + object caching ● Stripped unnecessary enqueues ● Disabled WP-CRON
  140. 140. @jonoalderson ● JS and CSS modularisation & async’ing (WIP) ● Font optimisation (WIP) ● Heavy use of Google Tag Manager ● SRCSETs and image scaling (WIP)* ● WebP & SVG images ● Asset versioning and heavy caching [Media & Assets]
  141. 141. @jonoalderson
  142. 142. @jonoalderson 0.4 seconds
  143. 143. @jonoalderson 0.4 seconds on a fast desktop wifi 1.9 seconds on ‘fast 3g’ emulation Less slow!
  144. 144. @jonoalderson So, what’s still to do?
  145. 145. @jonoalderson Better HTTP2 Push Jake Archibald, http://bit.ly/2C1djwq
  146. 146. @jonoalderson Canonical AMP Automatic CSS tree shaking!
  147. 147. @jonoalderson PWAMP AMP Project, http://bit.ly/2wog8lN
  148. 148. @jonoalderson Post-load interaction improvements
  149. 149. @jonoalderson Emily Hayman, http://bit.ly/2MILD4c
  150. 150. @jonoalderson We’re not doing... But you should consider...
  151. 151. @jonoalderson Lazy loading images
  152. 152. @jonoalderson Above-the-fold CSS / Critical path CSS / Deferred CSS
  153. 153. @jonoalderson Skeleton screens
  154. 154. @jonoalderson Resources
  155. 155. @jonoalderson Emily Grossman, SkyScanner, http://bit.ly/2wjnkzR
  156. 156. @jonoalderson Jon Henshaw, http://bit.ly/2wwy5xZ
  157. 157. @jonoalderson Bastian Grimm, Peak Ace, http://bit.ly/2wjnkzR
  158. 158. @jonoalderson
  159. 159. @jonoalderson Google Web Fundamentals, http://bit.ly/2wlVeUI
  160. 160. @jonoalderson Google Web Fundamentals, http://bit.ly/2wlVeUI
  161. 161. @jonoalderson AMP Project, http://bit.ly/2PhDKj1
  162. 162. @jonoalderson
  163. 163. @jonoalderson
  164. 164. @jonoalderson

×