Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Sophie Gibson, profile picture
Uploaded bySophie Gibson
PDF, PPTX2,359 views

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

This document outlines a 4-step process for conducting a Core Web Vitals audit: 1) Benchmark key pages by measuring LCP, FID, and CLS metrics, 2) Investigate audit results to understand issues, 3) Test optimization changes and re-measure metrics, 4) Prioritize fixes based on impact and effort required. The goal is to identify opportunities to improve load performance and user experience.

Marketing◦
Download as PDF, PPTX
How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson Sophie Gibson StudioHawk
1 2 3 Benchmark Investigate Test 4 Prioritise
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What does it measure?
The Metrics
LCP largest contentful paint How long it takes the main content to become visible @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit via GTMetrix
FID first input delay How fast the page responds to an initial interaction @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
CLS content layout shift How stable the page is during the loading process @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit LCP FID CLS
Step 1
Benchmark
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Split site into page templates
→ → → Homepage Product Page Category Page Blog post Blog hub page Landing pages → → →
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Grab URLs for each template
@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/
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Get the data
Manually
GT Metrix TOOL Save audits ✔
GT Metrix TOOL ✔ Save audits Compare against competitors ✔
GT Metrix TOOL ✔ ✔ Save audits Compare against competitors Clear CWV metrics ✔
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Google Lighthouse
Run via Chrome Lighthouse
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
WATCH OUT! for
Browser extensions
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
At Scale
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Record Metrics
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add screenshots to a slide
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Add details to spreadsheet
@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/
WATCH OUT! for
Missing FID metric
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ???
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit ✔ ✔ ? ???
FID requires a real user and cannot be measured in lab data web.dev/fid/
Calculates simulated performance metrics Lab Data
Total Blocking Time (TBT) metric is lab-measurable, correlates well with FID web.dev/fid/
@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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
✔ Benchmarking
Step 2
Investigate
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit What is happening?
@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?)
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Speed
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Dig into opportunities
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Critical requests? Render blocking? Network payloads? Main thread tasks?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
Questions ? How many resources are loading? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
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
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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
The <head> is the biggest single render-blocking part of a page Harry Roberts
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit TRACK ALL THE THINGS!!
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Remove the removable
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit 3 Questions
Questions ? Is it essential? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Questions ? Is it essential? Does it need to be on this page? ? @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Chat Bots Google Maps Social Feeds Heat Maps
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Delay the delayable
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <script src="" defer> Scripts
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="" loading="lazy"> Images
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Restructure the restructable
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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Compress the compressible
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit Cloudinary - https://webspeedtest.cloudinary.com/
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit CLS
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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit <img src="hero_image.jpg" alt="" width="500" height="500">
@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/
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