Technical SEO → Core Web Vitals
Core Web Vitals:
Three Scores. One Ranking Signal.
Google measures page experience with three specific metrics. Each has a hard threshold. Pages that pass all three rank better in competitive SERPs — pages that fail are silently penalized.
The Three Metrics
What Google Actually Measures
Core Web Vitals are real user measurements — field data collected from actual Chrome users visiting your pages. Google evaluates each metric at the 75th percentile, meaning 75% of real visits must hit the 'Good' threshold for your page to pass. Lab scores from tools like Lighthouse don't determine rankings — field data does.
Largest Contentful Paint
How fast your main content loads
Top Fix
Preload your hero image, convert to WebP, and improve TTFB below 600ms.
Interaction to Next Paint
How fast the page responds to clicks and taps
Top Fix
Break up long JavaScript tasks and defer third-party scripts until after load.
Cumulative Layout Shift
How stable the page layout is while loading
Top Fix
Add explicit width and height to every image. Reserve space for ads before they load.
Checklist
- LCP under 2.5s on mobile (field data in GSC)
- INP under 200ms across all pages
- CLS score under 0.1 — no layout shifts
- LCP image preloaded or has priority attribute
- All images have explicit width and height set
- No layout-shifting ad or embed placements
- Font loading uses font-display: swap
- Field data checked in GSC, not just lab scores
Lab Data vs. Field Data
Lab Data
What Tools Show You
PageSpeed Insights, Lighthouse, and GTmetrix run simulated tests on a standardized device and network. Useful for diagnosis — but this is not the data Google uses for rankings. A page can score 90+ in lab conditions and still fail in the field.
Field Data
What Google Uses for Rankings
The Chrome User Experience Report (CrUX) collects real measurements from actual Chrome users on their real devices and connections. This field data — visible in Google Search Console under Core Web Vitals — is what determines your page experience ranking signal.
The Fix
How To Improve Each Metric
In order of highest impact. Start with LCP — it affects the most pages and has the clearest fixes.
Preload Your Hero Image
LCPThe LCP element is almost always the largest image or heading visible on load. Add a preload link tag or use Next.js Image with priority=true. This tells the browser to fetch it before it discovers it in the DOM — cutting LCP by 30–60% on image-heavy pages.
Fix Server Response Time (TTFB)
LCPIf Time to First Byte exceeds 600ms, no front-end optimization will save your LCP. Upgrade to a faster host, add a CDN, or enable server-side caching. Vercel and Cloudflare Pages deliver sub-100ms TTFB globally out of the box.
Defer Non-Critical JavaScript
INPThird-party scripts — chat widgets, analytics, ad trackers — compete for the main thread during page load. Load them with defer or async, or trigger them after the first user interaction. Each script removed from the critical path lowers INP.
Set Explicit Image Dimensions
CLSEvery image without a defined width and height causes layout shift when it loads — the browser has to recalculate layout after the image arrives. Set width and height on every img tag, or use Next.js Image which handles this automatically.
Add font-display: swap
CLSWeb fonts that block rendering shift text layout when they arrive. Adding font-display: swap to your @font-face declarations tells the browser to show fallback text immediately, preventing the layout jump when the custom font loads.
Measure Field Data, Not Lab Scores
AllCheck the Core Web Vitals report in Google Search Console for actual field data per page. Lab scores from PageSpeed Insights are useful for identifying issues, but Google's ranking signal is based entirely on real user field data from CrUX.
Find Out Where Your Core Web Vitals Are Failing
A free technical SEO audit pulls your actual field data from Google Search Console and shows you exactly which pages are failing which metrics — and what to fix first.
Get My Free AuditFAQ
Common Questions About Core Web Vitals
What are the ideal scores for Core Web Vitals?
Google's 'Good' thresholds are: LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. Pages that fall in the 'Needs Improvement' range are LCP between 2.5–4 seconds, INP between 200–500ms, and CLS between 0.1–0.25. Anything beyond those ranges is classified as 'Poor.' Google evaluates these at the 75th percentile of field data — meaning 75% of your real users need to experience Good scores for the page to pass.
Do Core Web Vitals still matter?
Yes. Core Web Vitals remain an active Google ranking signal as part of the Page Experience update. Google has consistently confirmed their role in rankings, and they were expanded in 2024 with INP replacing FID as the interactivity metric. Beyond SEO, they measure real user experience — slow LCP, high CLS, and sluggish INP directly correlate with higher bounce rates and lower conversions. Sites with passing Core Web Vitals consistently outperform failing competitors in competitive SERPs where content quality is comparable.
How to improve Core Web Vitals?
For LCP: preload the largest above-the-fold image, improve server response time (TTFB), and eliminate render-blocking resources. For INP: minimize JavaScript execution time, break up long tasks, and defer non-critical scripts. For CLS: set explicit width and height attributes on all images and videos, avoid inserting content above existing content after load, and use font-display: swap to prevent layout shifts from font loading. In Next.js, the Image component with priority=true handles LCP image preloading automatically.
What is LCP and CLS?
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element on the page — typically a hero image or heading — to fully load. It's Google's primary measure of perceived load speed. CLS (Cumulative Layout Shift) measures visual stability: how much content unexpectedly shifts position during page load. A high CLS score means users are clicking the wrong thing because the page moved under them — a direct UX problem Google penalizes in rankings.
What causes poor Core Web Vitals scores?
Poor LCP is most commonly caused by large unoptimized images, slow server response times, render-blocking JavaScript, and no resource preloading. Poor INP is typically caused by heavy JavaScript execution on the main thread, third-party scripts (chat widgets, analytics, ads), and unoptimized event handlers. Poor CLS is caused by images and embeds without defined dimensions, late-loading fonts that shift text, and dynamically injected banners or ads above existing content.
Does CLS impact SEO?
Yes — CLS is one of the three Core Web Vitals that Google uses as a ranking signal. A CLS score above 0.1 puts a page in the 'Needs Improvement' category; above 0.25 is 'Poor.' Beyond the direct ranking impact, CLS creates a frustrating user experience that increases bounce rate and reduces conversions. Common fixes include adding explicit width and height to all images, reserving space for ads and embeds before they load, and avoiding late-injected content that pushes down page elements.
Pass All Three Metrics. Rank Better.
Griffin Mott Consulting diagnoses and fixes Core Web Vitals issues for small businesses in Kansas City. Start with a free audit.