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.

How to Take Your Website Beyond Fast

1,715 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. And you’ll need to get there fast, otherwise, your competitors might beat you to the finish line.

Sound impossible? Web performance is no longer an art, but a science.

Yoast’s Jono Alderson shares the tips, tricks, tools, and tactics you need to speed up your website.

In this presentation, learn:
– The tactics to get your site to load in under a second.
– How to prioritize all the different pieces when optimizing site speed.
– How improved web performance can help you get better rankings and conversions.

Published in: Marketing
  • Multiple Time Lotto Winner Shocks The System�Reveals All! ➤➤ https://tinyurl.com/t2onem4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL ▶ ▶ ▶ ▶ http://bit.ly/2Kquucm ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How to Take Your Website Beyond Fast

  1. 1. @jonoalderson How to Take Your Website Beyond Fast
  2. 2. @jonoalderson Hello!
  3. 3. @jonoalderson WARNING!
  4. 4. @jonoalderson Users expect fast
  5. 5. @jonoalderson Delays of over 3 seconds can lead to over 50% abandonment Google / marketingdive.com 2016, via http://bit.ly/2OBDJGq
  6. 6. @jonoalderson Wired Magazine, 2014 47% of people expect a site to load in less than 2 seconds
  7. 7. @jonoalderson 20% of users abandon their cart if the transaction process is too slow Radware, 2014, http://bit.ly/2weioeS
  8. 8. @jonoalderson Baqend, 2018, http://bit.ly/2MA4nSZ
  9. 9. @jonoalderson Time is money
  10. 10. @jonoalderson Think with Google, http://bit.ly/2N3BXRz
  11. 11. @jonoalderson So, how well are we performing?
  12. 12. @jonoalderson We suck
  13. 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. 14. @jonoalderson But not for long...
  15. 15. @jonoalderson
  16. 16. @jonoalderson Google Webmaster Blog, 2018, http://bit.ly/2wggdHs
  17. 17. @jonoalderson Google Webmaster Blog, 2018, http://bit.ly/2wggdHs
  18. 18. @jonoalderson “Speed underpins user experience”
  19. 19. @jonoalderson User experience is the biggest ranking factor*
  20. 20. @jonoalderson And for Google, speed = efficiency
  21. 21. @jonoalderson And as sites get faster, slow is going to feel slower
  22. 22. @jonoalderson “So, what do we need to do?”
  23. 23. @jonoalderson HINT: It’s not a big web (re)development project
  24. 24. @jonoalderson “We have a big site redevelopment process in the works, scheduled for Q4 2019”
  25. 25. @jonoalderson “We have a big site redevelopment process in the works, scheduled for Summer 2019” NoNo
  26. 26. @jonoalderson You win by a thousand tweaks
  27. 27. @jonoalderson Now, and every day, forever
  28. 28. @jonoalderson Make bits of it FASTER
  29. 29. @jonoalderson But what does that mean? And where do you start?
  30. 30. @jonoalderson There are two truths
  31. 31. @jonoalderson [1] There’s no such thing as speed.
  32. 32. @jonoalderson How do you measure ‘speed’?
  33. 33. @jonoalderson “The time how long it takes for a page to finish loading”
  34. 34. @jonoalderson But, what does that mean?
  35. 35. @jonoalderson What if the server responds quickly, but then it takes ages to show the content?
  36. 36. @jonoalderson What if the page has components which only load when you interact, or scroll? Are they “finished”?
  37. 37. @jonoalderson We need better definitions
  38. 38. @jonoalderson Most stock metrics from speed check + optimisation tools suck
  39. 39. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/
  40. 40. @jonoalderson Pingdom, Website speed test, https://tools.pingdom.com/ Doesn’t actually measure
  41. 41. @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
  42. 42. @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
  43. 43. @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
  44. 44. @jonoalderson Google PageSpeed Insights, http://bit.ly/2BxHcEw
  45. 45. @jonoalderson !!! “First contentful paint” Google PageSpeed Insights, http://bit.ly/2BxHcEw
  46. 46. @jonoalderson Google PageSpeed Insights, http://bit.ly/2LbGw7j
  47. 47. @jonoalderson “How quickly can we show something interesting?”
  48. 48. @jonoalderson Let’s grab an example
  49. 49. @jonoalderson
  50. 50. @jonoalderson Nav interactivity Fonts Personalised / account stuff Share buttons Author imagesComments, related posts, all sorts! Video Big image Tons of CSS jQuery(!)
  51. 51. @jonoalderson
  52. 52. @jonoalderson Site looks & feels faster :)
  53. 53. @jonoalderson Scores didn’t change much :(
  54. 54. @jonoalderson Don’t optimise for scores. Just make it faster.
  55. 55. @jonoalderson [2] The only thing which matters is the perception of speed.
  56. 56. @jonoalderson Google, Lighthouse docs, http://bit.ly/2PvhraI
  57. 57. @jonoalderson However, there’s one golden moment...
  58. 58. @jonoalderson Google, Lighthouse docs, http://bit.ly/2PvhraI
  59. 59. @jonoalderson “How quickly can we make it feel ready?”
  60. 60. @jonoalderson Perceived speed is hard to quantify!
  61. 61. @jonoalderson And there are lots of moving parts.
  62. 62. @jonoalderson
  63. 63. @jonoalderson
  64. 64. @jonoalderson Service workers
  65. 65. @jonoalderson Service workers After load
  66. 66. @jonoalderson Scary?
  67. 67. @jonoalderson Performance optimisation is no longer an art. It’s a science.
  68. 68. @jonoalderson Every site in the world can load in <1s.
  69. 69. @jonoalderson You just need to follow the rules.
  70. 70. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT
  71. 71. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT The internet, the speed of light
  72. 72. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs The internet, the speed of light
  73. 73. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs The internet, the speed of light CMS, plugins & extensions
  74. 74. @jonoalderson Google PageSpeed Insights, http://bit.ly/2MhP9lT Hosting, servers, CDNs HTML, CSS & JS The internet, the speed of light CMS, plugins & extensions
  75. 75. @jonoalderson If only there was a guide...
  76. 76. @jonoalderson Google, Web Fundamentals, http://bit.ly/2ZrAiZj
  77. 77. @jonoalderson But everybody’s site is different
  78. 78. @jonoalderson Where do you start?
  79. 79. @jonoalderson Just go and find the slow stuff.
  80. 80. @jonoalderson Use tools to spot problems
  81. 81. @jonoalderson Webpagetest
  82. 82. @jonoalderson Webpagetest
  83. 83. @jonoalderson Webpagetest
  84. 84. @jonoalderson Pingdom Website Speed Test, http://bit.ly/2MhP9lT
  85. 85. @jonoalderson Pingdom Website Speed Test, http://bit.ly/2MhP9lT
  86. 86. @jonoalderson
  87. 87. @jonoalderson So we refactored that file... 1 dev, 1 day
  88. 88. @jonoalderson
  89. 89. @jonoalderson 0.6 seconds
  90. 90. @jonoalderson However… I may not have been completely honest with you.
  91. 91. @jonoalderson
  92. 92. @jonoalderson
  93. 93. @jonoalderson
  94. 94. @jonoalderson 0.6 seconds on a fast desktop wifi 2.7 seconds on ‘fast 3g’ emulation slow!
  95. 95. @jonoalderson That’s a bit rubbish...
  96. 96. @jonoalderson We’re on a journey of 1,000 tweaks. There is no magic bullet.
  97. 97. @jonoalderson So what can you do, today?
  98. 98. @jonoalderson Here’s how you shortcut speed Some “quick” wins!
  99. 99. @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(?)
  100. 100. @jonoalderson 0. Load less stuff
  101. 101. @jonoalderson ● Plugins, extensions and integrations ● Bytes transferred ● DOM complexity ● Fonts ● Colours, details, icons, lines, borders, shadows ● JavaScript [BASICS]
  102. 102. @jonoalderson ● Lazy-loading, deferring or async’ing resources ● Cross-domain resource reduction ● DNS & asset prefetch/preload [ADVANCED]
  103. 103. @jonoalderson Machmetrics, http://bit.ly/2wrfjYX
  104. 104. @jonoalderson 1. Tidy up your CMS
  105. 105. @jonoalderson [BASICS] ● Use plugins, extensions and integrations to measure(!)
  106. 106. @jonoalderson
  107. 107. @jonoalderson 2. Bolt on a CDN
  108. 108. @jonoalderson
  109. 109. @jonoalderson
  110. 110. @jonoalderson
  111. 111. @jonoalderson ● Page rules ● Edge workers ● Server push [ADVANCED]
  112. 112. @jonoalderson Tom Anthony, Distilled, http://bit.ly/2MhP9lT
  113. 113. @jonoalderson 3. Get better hosting
  114. 114. @jonoalderson
  115. 115. @jonoalderson DIY sites (any size) Managed small-medium sites Large / enterprise sites
  116. 116. @jonoalderson 4. Use a static page cache
  117. 117. @jonoalderson
  118. 118. @jonoalderson 5. Optimise your resources
  119. 119. @jonoalderson tinypng.com
  120. 120. @jonoalderson Squoosh.app
  121. 121. @jonoalderson Squoosh.app
  122. 122. @jonoalderson ● Offload media to, e.g., Amazon S3 ● Use an image CDN like Cloudinary or Imgix ● Modularise CSS and JavaScript [ADVANCED]
  123. 123. @jonoalderson Chrome Dev Tools, Coverage report
  124. 124. @jonoalderson 6. Use Amp (?)
  125. 125. @jonoalderson amp.dev
  126. 126. @jonoalderson “The official” AMP WordPress plugin, wordpress.org/plugins/amp/
  127. 127. @jonoalderson This stuff makes a difference
  128. 128. @jonoalderson
  129. 129. @jonoalderson 0.4 seconds on a fast desktop wifi 1.9 seconds on ‘fast 3g’ emulation Less slow!
  130. 130. @jonoalderson So, what’s still to do?
  131. 131. @jonoalderson Canonical AMP Automatic CSS tree shaking!
  132. 132. @jonoalderson Post-load interaction improvements
  133. 133. @jonoalderson New ways of thinking about CSS Me, https://bit.ly/2D5Dlgy
  134. 134. @jonoalderson Emily Hayman, http://bit.ly/2MILD4c
  135. 135. @jonoalderson Resources
  136. 136. @jonoalderson Emily Grossman, SkyScanner, http://bit.ly/2wjnkzR
  137. 137. @jonoalderson Jon Henshaw, http://bit.ly/2wwy5xZ
  138. 138. @jonoalderson Bastian Grimm, Peak Ace, http://bit.ly/2wjnkzR
  139. 139. @jonoalderson
  140. 140. @jonoalderson Google Web Fundamentals, http://bit.ly/2wlVeUI
  141. 141. @jonoalderson Google Web Fundamentals, http://bit.ly/2wlVeUI
  142. 142. @jonoalderson Links & References
  143. 143. @jonoalderson 5. “Delays of over 3 seconds can lead to over 50% abandonment” Google / marketingdive.com 2016, via http://bit.ly/2OBDJGq 7. “20% of users abandon their cart if the transaction process is too slow” Radware, 2014, http://bit.ly/2weioeS 8. GQ / Google / Amazon speed studies Baqend, 2018, http://bit.ly/2MA4nSZ 10. Google speed / impact benchmarking tool Think with Google, http://bit.ly/2N3BXRz 13. Seconds until “visually loaded” research MachMetrics, 2018, http://bit.ly/2PiFzgK 16. Google announcements about speed as a ranking factor Google Webmaster Blog, 2018, http://bit.ly/2wggdHs
  144. 144. @jonoalderson 39. Issues with Pingdom (and other’s) performance scoring Pingdom, Website speed test, https://tools.pingdom.com/ 45. Google’s PageSpeed Insights tool & First Contentful Paint Google PageSpeed Insights, http://bit.ly/2BxHcEw 46. Google’s definition of the First Content Paint metric Google PageSpeed Insights, http://bit.ly/2LbGw7j 56. Google stating “Load is not a single moment in time” Google, Lighthouse docs, http://bit.ly/2PvhraI 58. Google’s definition of the Time to Interactive metric Google, Lighthouse docs, http://bit.ly/2PvhraI 70. “You just need to follow the rules”; Google’s 1s loading overview Google PageSpeed Insights, http://bit.ly/2MhP9lT
  145. 145. @jonoalderson 76. Google’s Web Fundamentals documentation 💖 Google, Web Fundamentals, http://bit.ly/2ZrAiZj 81. Waterfall reports from WebPageTest webpagetest.org 84. Waterfall reports from Pingdom Pingdom Website Speed Test, http://bit.ly/2MhP9lT 88. Chrome developer console, ‘Network’ report 💖 (ctrl+shift+j on Windows, ctrl+option+j on Mac) 103. How DNS prefetching works Machmetrics, http://bit.ly/2wrfjYX 105. Query Monitor plugin 💖 https://en-gb.wordpress.org/plugins/query-monitor/
  146. 146. @jonoalderson 106. Server/system performance reporting with NewRelic 💖 newrelic.com 108. Cloudflare 💖 cloudflare.com 112. “An introduction to HTTP/2 & Service Workers for SEOs” Tom Anthony, Distilled, http://bit.ly/2MhP9lT 115. Recommended hosting companies* 💖 117. Static page cache recommendations* 119. Systemised image compression/optimisation from TinyPNG tinypng.com *(my personal opinion, my own experience; your mileage may differ!)
  147. 147. @jonoalderson 120. On-demand image optimisation from Squoosh squoosh.app 123. The ‘Coverage’ report in Chrome’s developer tools 💖 125. AMP amp.dev 126. The ‘Official’ WordPress AMP plugin 💖 wordpress.org/plugins/amp/ 132. The ‘Performance’ report in Chrome’s developer tools 133. A (proposed) new approach to CSS in WordPress Me, https://bit.ly/2D5Dlgy 134. Performant Web Animations and Interactions: Achieving 60 FPS Emily Hayman, http://bit.ly/2MILD4c
  148. 148. @jonoalderson 136. “The Marketer’s Guide to Performance Optimization” Emily Grossman, SkyScanner, http://bit.ly/2wjnkzR 137. “Site Speed. You need it. Here's how to get it.” Jon Henshaw, http://bit.ly/2wwy5xZ 138. "Super speed around the globe" Bastian Grimm, Peak Ace, http://bit.ly/2wjnkzR See also… ● Yoast.com ● JonoAlderson.com ● @jonoalderson
  149. 149. @jonoalderson
  150. 150. @jonoalderson Thanks!
  151. 151. @jonoalderson

×