Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 148 Publicité

Plus De Contenu Connexe

Plus récents (20)

Publicité

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

  1. 1. How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson Sophie Gibson StudioHawk
  2. 2. 1 2 3 Benchmark Investigate Test 4 Prioritise
  3. 3. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What does it measure?
  4. 4. The Metrics
  5. 5. LCP largest contentful paint How long it takes the main content to become visible @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  6. 6. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit via GTMetrix
  7. 7. FID first input delay How fast the page responds to an initial interaction @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  8. 8. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  9. 9. CLS content layout shift How stable the page is during the loading process @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  10. 10. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  11. 11. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit LCP FID CLS
  12. 12. Step 1
  13. 13. Benchmark
  14. 14. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Split site into page templates
  15. 15. → → → Homepage Product Page Category Page Blog post Blog hub page Landing pages → → →
  16. 16. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Grab URLs for each template
  17. 17. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Page Group Example URL Product Page https://example.com/products/sparkle-skirt Category Page https://example.com/category/womens-skirts Homepage https://example.com/
  18. 18. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Get the data
  19. 19. Manually
  20. 20. GT Metrix TOOL Save audits ✔
  21. 21. GT Metrix TOOL ✔ Save audits Compare against competitors ✔
  22. 22. GT Metrix TOOL ✔ ✔ Save audits Compare against competitors Clear CWV metrics ✔
  23. 23. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  24. 24. Google Lighthouse
  25. 25. Run via Chrome Lighthouse
  26. 26. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  27. 27. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  28. 28. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  29. 29. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  30. 30. WATCH OUT! for
  31. 31. Browser extensions
  32. 32. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  33. 33. At Scale
  34. 34. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  35. 35. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  36. 36. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  37. 37. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Record Metrics
  38. 38. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add screenshots to a slide
  39. 39. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  40. 40. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add details to spreadsheet
  41. 41. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Page Group Example URL LCP Benchmark CLS Benchmark FID Benchmark Product Page https://example.com/prod ucts/sparkle-skirt Category Page https://example.com/categ ory/womens-skirts Homepage https://example.com/
  42. 42. WATCH OUT! for
  43. 43. Missing FID metric
  44. 44. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ???
  45. 45. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ✔ ✔ ? ???
  46. 46. FID requires a real user and cannot be measured in lab data web.dev/fid/
  47. 47. Calculates simulated performance metrics Lab Data
  48. 48. Total Blocking Time (TBT) metric is lab-measurable, correlates well with FID web.dev/fid/
  49. 49. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Page Group Example URL LCP (s) Benchmark CLS Benchmark FID/TBT (s) Benchmark Product Page https://example.com/prod ucts/sparkle-skirt 3.2 0.5 2.3 Category Page https://example.com/categ ory/womens-skirts 5.4 0.26 4.3 Homepage https://example.com/ 2.7 0.27 2.7
  50. 50. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  51. 51. ✔ Benchmarking
  52. 52. Step 2
  53. 53. Investigate
  54. 54. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What is happening?
  55. 55. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Tool: Web Page Test Why do we use it? *what’s your purpose, tell me whats your purpose* (is whats your flavour too niche a reference?)
  56. 56. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Speed
  57. 57. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Dig into opportunities
  58. 58. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  59. 59. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  60. 60. Critical requests? Render blocking? Network payloads? Main thread tasks?
  61. 61. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
  62. 62. Questions ? How many resources are loading? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  63. 63. Questions ? What resources on the site are large in size? ? How many resources are loading? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  64. 64. Questions ? What resources on the site are large in size? ? What is stopping the page from loading? ? How many resources are loading? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  65. 65. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  66. 66. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  67. 67. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  68. 68. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  69. 69. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  70. 70. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  71. 71. The <head> is the biggest single render-blocking part of a page Harry Roberts
  72. 72. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  73. 73. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  74. 74. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  75. 75. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit TRACK ALL THE THINGS!!
  76. 76. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Remove the removable
  77. 77. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
  78. 78. Questions ? Is it essential? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  79. 79. Questions ? Is it essential? Does it need to be on this page? ? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  80. 80. Questions ? Do we need to track this right now? Is it essential? Does it need to be on this page? ? ? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  81. 81. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  82. 82. Chat Bots Google Maps Social Feeds Heat Maps
  83. 83. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Delay the delayable
  84. 84. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <script src="" defer> Scripts
  85. 85. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="" loading="lazy"> Images
  86. 86. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Restructure the restructable
  87. 87. 1. <head> 2. <meta charset|http-equiv|viewport|robots/> 3. <title><meta desc> 4. preconnect 5. <script src="" async></script> 6. CSS that includes @import 7. Synchronous JS 8. Synchronous CSS 9. preload 10. <script src="" defer></script> 11. prefetch / prerender 12. Everything else (icons, Open Graph, etc.) 13. </head> Harry Roberts @csswizardry
  88. 88. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Compress the compressible
  89. 89. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  90. 90. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
  91. 91. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
  92. 92. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit CLS
  93. 93. CLS Common Culprits ↠ Images without dimensions ↠ ↠ @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Ads, video, embeds, and iframes without dimensions Dynamically injected content
  94. 94. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="hero_image.jpg" alt="" width="500" height="500">
  95. 95. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Barry Pollard Smashing Magazine https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
  96. 96. CLS Gif Generator TOOL ↠ https:/ /defaced.dev/ tools/layout-shift-gif-generator/ Chris Johnson ↠ ↠ twitter.com/defaced @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  97. 97. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  98. 98. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  99. 99. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  100. 100. ✔ Investigate
  101. 101. Step 3
  102. 102. Test, Test, Test
  103. 103. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit VALUE VALUE
  104. 104. Google Lighthouse
  105. 105. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  106. 106. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  107. 107. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  108. 108. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  109. 109. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  110. 110. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Before After
  111. 111. ✔ Test, Test, Test
  112. 112. Step 4 @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  113. 113. Prioritise
  114. 114. WATCH OUT! for @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  115. 115. Doesn’t move the needle
  116. 116. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  117. 117. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  118. 118. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Difficulty Matrix Time / Resource Task Complexity Low Time High Time Low Complexity High Complexity @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  119. 119. Direct Control → → Images Marketing scripts Code in GTM → Lower Resource
  120. 120. Dev Support → → HTML changes Hardcoded scripts Removing dependencies → Higher Resource
  121. 121. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Difficulty Matrix Direct Control Low Time / High Complexity - Requires your expert knowledge or a tool set-up - Larger scale / sitewide impact Dev Support High Time / High Complexity - Needs multiple sprints - More complex changes - Sitewide / large scale impact Direct Control Low Time / Low Complexity - Client able to action - Small scale / single page impact Dev Support High Time / Low Complexity - Larger in scale - Template level tweaks - Single line code changes @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  122. 122. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Difficulty Matrix Direct Control Low Time / High Complexity - Requires your expert knowledge or a tool set-up - Larger scale / sitewide impact Dev Support High Time / High Complexity - Needs multiple sprints - More complex changes - Sitewide / large scale impact Direct Control Low Time / Low Complexity - Client able to action - Small scale / single page impact Dev Support High Time / Low Complexity - Larger in scale - Template level tweaks - Single line code changes @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ✖
  123. 123. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Think about scale 🍅
  124. 124. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Impact across site Small % of pages Whole site impact @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  125. 125. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  126. 126. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Prioritise via Page Template
  127. 127. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Potential Impact Ease PIE Score How big of a improvement does this change make when fixed? Use the test results How big will the impact of this change have across the template / page group How complex is this fix to do? What resource will be needed to action the change? X/30 PIE Framework
  128. 128. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Page Group Task Potential Impact Ease PIE Score Product Page Action to take 7 8 5 20 Category Page Action to take 4 6 7 17 PIE Framework
  129. 129. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit T-Shirt Sizes
  130. 130. ✔ Prioritise
  131. 131. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit CELEBRATE GIF
  132. 132. WATCH OUT! for @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  133. 133. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  134. 134. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  135. 135. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  136. 136. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  137. 137. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  138. 138. CONTACT: _ @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Sophie Gibson StudioHawk sophie@studiohawk.co.uk Twitter @SophieGibson Thanks!
  139. 139. Tools ↠ GT Metrix https:/ /gtmetrix.com/ ↠ Web Page Test https:/ /www.webpagetest.org/ ↠ PageSpeed Compare https:/ /pagespeed.compare ↠ Chris Johnson - CLS Gif Generator https:/ /defaced.dev/ tools/layout-shift-gif-generator/ ↠ Cloudinary Image Analysis https://webspeedtest.cloudinary.co m/
  140. 140. Resources ↠ Harry Roberts - Get Your Head Straight @csswizardry https:/ /www.youtube.com/watch? v=MHyAOZ45vnU ↠ Jess Peck - Almost Complete CLS Guide @jessthebp https:/ /jessbpeck.com/posts/com pletecls/ ↠ Barry Pollard - Smashing Magazine @tunetheweb https:/ /www.smashingmagazine.c om/2020/03/setting-height-width -images-important-again/ ↠ Itamar Blauer - Image SEO Guide @ItamarBlauer https:/ /www.itamarblauer.com/im age-seo-guide/ ↠ Oliver Mason - 0 CLS, Please Improve CLS @ohgm https:/ /ohgm.co.uk/zero-cumulati ve-layout-shift-please-improve-cu mulative-layout-shift/

×