How to Conduct a Core Web Vitals Audit - BrightonSEO October 2022

Transcript

1. How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson Sophie Gibson StudioHawk
2. 1 2 3 Benchmark Investigate Test 4 Prioritise
3. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What does it measure?
4. The Metrics
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. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit via GTMetrix
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. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
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. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
11. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit LCP FID CLS
12. Step 1
13. Benchmark
14. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Split site into page templates
15. → → → Homepage Product Page Category Page Blog post Blog hub page Landing pages → → →
16. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Grab URLs for each template
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. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Get the data
19. Manually
21. GT Metrix TOOL Save audits ✔
22. GT Metrix TOOL ✔ Save audits Compare against competitors ✔
23. GT Metrix TOOL ✔ ✔ Save audits Compare against competitors Clear CWV metrics ✔
24. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
25. Google Lighthouse
26. Run via Chrome Lighthouse
27. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
28. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
29. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
30. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
31. WATCH OUT! for
32. Browser extensions
33. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
34. At Scale
35. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
36. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
37. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
38. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Record Metrics
39. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add screenshots to a slide
40. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
41. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add details to spreadsheet
42. @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/
43. WATCH OUT! for
44. Missing FID metric
45. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ???
46. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ✔ ✔ ? ???
47. FID requires a real user and cannot be measured in lab data web.dev/fid/
48. Calculates simulated performance metrics Lab Data
49. Total Blocking Time (TBT) metric is lab-measurable, correlates well with FID web.dev/fid/
50. @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
51. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
52. ✔ Benchmarking
54. Step 2
55. Investigate
56. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What is happening?
57. @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?)
58. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Speed
59. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Dig into opportunities
60. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
61. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
62. Critical requests? Render blocking? Network payloads? Main thread tasks?
64. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
65. Questions ? How many resources are loading? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
66. 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
67. 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
68. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
70. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
71. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
72. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
73. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
74. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
75. The <head> is the biggest single render-blocking part of a page Harry Roberts
76. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
77. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
78. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
79. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit TRACK ALL THE THINGS!!
80. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Remove the removable
81. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
82. Questions ? Is it essential? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
83. Questions ? Is it essential? Does it need to be on this page? ? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
84. 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
85. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
86. Chat Bots Google Maps Social Feeds Heat Maps
87. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Delay the delayable
88. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <script src="" defer> Scripts
89. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="" loading="lazy"> Images
90. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Restructure the restructable
91. 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
92. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Compress the compressible
93. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
94. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
95. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
96. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit CLS
97. 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
98. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="hero_image.jpg" alt="" width="500" height="500">
99. @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/
100. 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
101. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
102. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
103. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
104. ✔ Investigate
106. Step 3
107. Test, Test, Test
108. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit VALUE VALUE
109. Google Lighthouse
110. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
111. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
112. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
113. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
114. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
115. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Before After
116. ✔ Test, Test, Test
118. Step 4 @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
119. Prioritise
120. WATCH OUT! for @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
121. Doesn’t move the needle
122. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
123. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
124. @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
125. Direct Control → → Images Marketing scripts Code in GTM → Lower Resource
126. Dev Support → → HTML changes Hardcoded scripts Removing dependencies → Higher Resource
127. @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
128. @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 ✖
129. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Think about scale 🍅
130. @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
131. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
132. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Prioritise via Page Template
133. @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
134. @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
135. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit T-Shirt Sizes
136. ✔ Prioritise
137. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit CELEBRATE GIF
138. WATCH OUT! for @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
139. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
140. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
141. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
142. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
145. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
146. CONTACT: _ @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Sophie Gibson StudioHawk sophie@studiohawk.co.uk Twitter @SophieGibson Thanks!
147. 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/
148. 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/