Upgrade to Pro — share decks privately, control downloads, hide ads and more …

0.6 seconds is the new slow

0.6 seconds is the new slow

Slow sites frustrate consumers. Frustration costs money. To delight your audience, beat competitors, and 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?

Beed0f5ca54ae221655b9f30a1f6fe66?s=128

Jono Alderson

April 15, 2022
Tweet

More Decks by Jono Alderson

Other Decks in Marketing & SEO

Transcript

  1. @jonoalderson 0.6 seconds is the new slow

  2. @jonoalderson Hello!

  3. @jonoalderson WARNING!

  4. @jonoalderson Users expect fast

  5. @jonoalderson Delays of over 3 seconds can lead to over

    40% abandonment Google, 2016, via http:/ /bit.ly/2OBDJGq
  6. @jonoalderson Wired Magazine, 2014 47% of people expect a site

    to load in less than 2 seconds
  7. @jonoalderson 20% of users abandon their cart if the transaction

    process is too slow Radware, 2014, http:/ /bit.ly/2weioeS
  8. @jonoalderson Baqend, 2018, http:/ /bit.ly/2MA4nSZ

  9. @jonoalderson Time is money

  10. @jonoalderson Think with Google, http:/ /bit.ly/2N3BXRz

  11. @jonoalderson So, how well are we performing?

  12. @jonoalderson We suck

  13. @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
  14. @jonoalderson But not for long...

  15. @jonoalderson

  16. @jonoalderson Google Webmaster Blog, 2018, http:/ /bit.ly/2wggdHs

  17. @jonoalderson Google Webmaster Blog, 2018, http:/ /bit.ly/2wggdHs

  18. @jonoalderson “Speed underpins user experience”

  19. @jonoalderson User experience is the biggest ranking factor*

  20. @jonoalderson And for Google, speed = efficiency

  21. @jonoalderson User experience Crawl efficiency Speed

  22. @jonoalderson

  23. @jonoalderson

  24. @jonoalderson

  25. @jonoalderson So, efficiency speed improvements will continue to drive revenue

  26. @jonoalderson So, if you wait until your competitors are faster

    than you, you’ll be too late
  27. @jonoalderson And as sites get faster, slow is going to

    feel slower
  28. @jonoalderson “So, what do we need to do?”

  29. @jonoalderson HINT: It’s not a big web (re)development project

  30. @jonoalderson “We have a big site redevelopment process in the

    works, scheduled for Summer 2019”
  31. @jonoalderson “We have a big site redevelopment process in the

    works, scheduled for Summer 2019” No No
  32. @jonoalderson You win by a thousand tweaks

  33. @jonoalderson Now, and every day, forever

  34. @jonoalderson Make bits of it FASTER

  35. @jonoalderson But what does that mean? And where do you

    start?
  36. @jonoalderson There are two truths

  37. @jonoalderson [1] There’s no such thing as speed.

  38. @jonoalderson How do you measure ‘speed’?

  39. @jonoalderson “The time how long it takes for a page

    to finish loading”
  40. @jonoalderson But, what does that mean?

  41. @jonoalderson What if the server responds quickly, but then it

    takes ages to show the content?
  42. @jonoalderson What if the page has components which only load

    when you interact, or scroll? Are they “finished”?
  43. @jonoalderson We need better definitions

  44. @jonoalderson Most stock metrics from speed check + optimisation tools

    suck
  45. @jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/

  46. @jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ Doesn’t actually measure

  47. @jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ At that point

    in time, for that URL, for that config, from that location Doesn’t actually measure
  48. @jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ Relative to other

    people testing their homepages At that point in time, for that URL, for that config, from that location Doesn’t actually measure
  49. @jonoalderson Load fewer, smaller things, duh Pingdom, Website speed test,

    https:/ /tools.pingdom.com/ Relative to other people testing their homepages At that point in time, for that URL, for that config, from that location Doesn’t actually measure
  50. @jonoalderson GTMetrix, https:/ /gtmetrix.com/

  51. @jonoalderson GTMetrix, https:/ /gtmetrix.com/

  52. @jonoalderson GTMetrix, https:/ /gtmetrix.com/

  53. @jonoalderson Silly! GTMetrix, https:/ /gtmetrix.com/

  54. @jonoalderson Google Analytics

  55. @jonoalderson Google Analytics

  56. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2BxHcEw

  57. @jonoalderson !!! “First contentful paint” Google PageSpeed Insights, http:/ /bit.ly/2BxHcEw

  58. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2LbGw7j

  59. @jonoalderson “How quickly can we show something interesting?”

  60. @jonoalderson Let’s grab an example

  61. @jonoalderson

  62. @jonoalderson Nav interactivity Fonts Personalised / account stuff Share buttons

    Author images Comments, related posts, all sorts! Video Big image Tons of CSS jQuery(!)
  63. @jonoalderson

  64. @jonoalderson Lazy video placeholder Skeleton container for image Stopped these

    assets from loading on the initial page load Personalised / account stuff via ajax Nav interactivity loads later Prioritise font loading
  65. @jonoalderson [Things we’re obsessing about] • Lazy loading • Bytes

    transferred • Complexity of DOM, CSS and JS • Painting, layout and layering • Colours, details, icons
  66. @jonoalderson Site looks & feels faster :)

  67. @jonoalderson Scores didn’t change much :(

  68. @jonoalderson Don’t optimise for scores. Just make it faster.

  69. @jonoalderson [2] The only thing which matters is the perception

    of speed.
  70. @jonoalderson Google, Lighthouse docs, http:/ /bit.ly/2PvhraI

  71. @jonoalderson However, there’s one golden moment...

  72. @jonoalderson Google, Lighthouse docs, http:/ /bit.ly/2PvhraI

  73. @jonoalderson “How quickly can we make it feel ready?”

  74. @jonoalderson Perceived speed is hard to quantify!

  75. @jonoalderson And there are lots of moving parts.

  76. @jonoalderson

  77. @jonoalderson

  78. @jonoalderson Service workers

  79. @jonoalderson Service workers After load

  80. @jonoalderson Scary?

  81. @jonoalderson Performance optimisation is no longer an art. It’s a

    science.
  82. @jonoalderson Every site in the world can load in <1s.

  83. @jonoalderson You just need to follow the rules.

  84. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT

  85. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT The internet, the speed

    of light
  86. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs The

    internet, the speed of light
  87. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs The

    internet, the speed of light CMS, plugins & extensions
  88. @jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs HTML,

    CSS & JS The internet, the speed of light CMS, plugins & extensions
  89. @jonoalderson Where do we start?

  90. @jonoalderson Me, just now

  91. @jonoalderson Just go and find the slow stuff.

  92. @jonoalderson Use tools to spot problems

  93. @jonoalderson Webpagetest

  94. @jonoalderson Webpagetest

  95. @jonoalderson Webpagetest

  96. @jonoalderson Pingdom Website Speed Test, http:/ /bit.ly/2MhP9lT

  97. @jonoalderson Pingdom Website Speed Test, http:/ /bit.ly/2MhP9lT

  98. @jonoalderson

  99. @jonoalderson So we refactored that file... 1 dev, 1 day

  100. @jonoalderson

  101. @jonoalderson 0.6 seconds

  102. @jonoalderson Wow!

  103. @jonoalderson However… I may not have been completely honest with

    you.
  104. @jonoalderson

  105. @jonoalderson

  106. @jonoalderson

  107. @jonoalderson 0.6 seconds on a fast desktop wifi 2.7 seconds

    on ‘fast 3g’ emulation slow!
  108. @jonoalderson That’s a bit rubbish...

  109. @jonoalderson We’re on a journey of 1,000 tweaks. There is

    no magic bullet.
  110. @jonoalderson So what can you do, today?

  111. @jonoalderson Here’s how you shortcut speed Some “quick” wins!

  112. @jonoalderson 0. Load less stuff 1. Tidy up your CMS

    2. Bolt on a CDN (Cloudflare) 3. Get good hosting 4. Use a static page cache 5. Optimise your resources 6. Use AMP(?)
  113. @jonoalderson 0. Load less stuff

  114. @jonoalderson • Plugins, extensions and integrations • Fonts • JavaScript

    [BASICS]
  115. @jonoalderson • Lazy-loading resources • Cross-domain resource reduction • DNS

    & asset prefetch/preload [ADVANCED]
  116. @jonoalderson Machmetrics, http:/ /bit.ly/2wrfjYX

  117. @jonoalderson 1. Tidy up your CMS

  118. @jonoalderson [BASICS] • Use plugins, extensions and integrations to measure(!)

  119. @jonoalderson

  120. @jonoalderson 2. Bolt on a CDN

  121. @jonoalderson

  122. @jonoalderson

  123. @jonoalderson

  124. @jonoalderson • HTTP/2 • Server Push [ADVANCED]

  125. @jonoalderson Tom Anthony, Distilled, http:/ /bit.ly/2MhP9lT

  126. @jonoalderson 3. Get better hosting

  127. @jonoalderson

  128. @jonoalderson DIY sites (any size) Managed small-medium sites Large /

    enterprise sites
  129. @jonoalderson 4. Use a static page cache

  130. @jonoalderson

  131. @jonoalderson 5. Optimise your resources

  132. @jonoalderson

  133. @jonoalderson • Offload media to, e.g., Amazon S3 • Use

    an image CDN like Cloudinary or Imgix • Modularise CSS and JavaScript [ADVANCED]
  134. @jonoalderson Chrome Dev Tools, Coverage report

  135. @jonoalderson 6. Use Amp (?)

  136. @jonoalderson

  137. @jonoalderson

  138. @jonoalderson This stuff makes a difference

  139. @jonoalderson

  140. @jonoalderson 0.4 seconds

  141. @jonoalderson 0.4 seconds on a fast desktop wifi 1.9 seconds

    on ‘fast 3g’ emulation Less slow!
  142. @jonoalderson So, what’s still to do?

  143. @jonoalderson Canonical AMP Automatic CSS tree shaking!

  144. @jonoalderson PWAMP AMP Project, http:/ /bit.ly/2wog8lN

  145. @jonoalderson Post-load interaction improvements

  146. @jonoalderson New ways of thinking about CSS Me, https:/ /bit.ly/2D5Dlgy

  147. @jonoalderson Emily Hayman, http:/ /bit.ly/2MILD4c

  148. @jonoalderson Resources

  149. @jonoalderson Emily Grossman, SkyScanner, http:/ /bit.ly/2wjnkzR

  150. @jonoalderson Jon Henshaw, http:/ /bit.ly/2wwy5xZ

  151. @jonoalderson Bastian Grimm, Peak Ace, http:/ /bit.ly/2wjnkzR

  152. @jonoalderson

  153. @jonoalderson Google Web Fundamentals, http:/ /bit.ly/2wlVeUI

  154. @jonoalderson Google Web Fundamentals, http:/ /bit.ly/2wlVeUI

  155. @jonoalderson AMP Project, http:/ /bit.ly/2PhDKj1

  156. @jonoalderson

  157. @jonoalderson Thanks!