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

How to Conduct a Core Web Vitals Audit - Bright...

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

Sophie Gibson

September 15, 2023
Tweet

More Decks by Sophie Gibson

Other Decks in Marketing & SEO

Transcript

  1. LCP largest contentful paint How long it takes the main

    content to become visible @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  2. FID first input delay How fast the page responds to

    an initial interaction @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  3. CLS content layout shift How stable the page is during

    the loading process @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  4. → → → Homepage Product Page Category Page Blog post

    Blog hub page Landing pages → → →
  5. @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/
  6. @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/
  7. @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
  8. @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?)
  9. 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
  10. 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
  11. Questions ? Is it essential? Does it need to be

    on this page? ? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  12. 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
  13. 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
  14. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

    Cloudinary - https://webspeedtest.cloudinary.com/
  15. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

    Cloudinary - https://webspeedtest.cloudinary.com/
  16. 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
  17. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

    <img src="hero_image.jpg" alt="" width="500" height="500">
  18. @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/
  19. 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
  20. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

    @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  21. @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
  22. @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
  23. @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 ✖
  24. @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
  25. @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
  26. @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
  27. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

    @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
  28. CONTACT: _ @sophiegibson #BrightonSEO How to Conduct a Core Web

    Vitals Audit Sophie Gibson StudioHawk [email protected] Twitter @SophieGibson Thanks!
  29. 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/
  30. 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/