What Are Core Web Vitals?
Core Web Vitals are a set of specific performance metrics that Google uses as ranking signals. They measure real-world user experience — not just raw page speed — and they affect your position in Google Search results. Google announced Core Web Vitals as a ranking factor in 2021 and has continued to weight them in its algorithm.
There are three Core Web Vitals metrics: LCP, INP, and CLS.
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page to load. This is usually a hero image, a large heading, or a video thumbnail. Google's threshold is: Good = under 2.5 seconds, Needs Improvement = 2.5 to 4 seconds, Poor = over 4 seconds.
Common causes of poor LCP: Large unoptimised hero images, slow hosting (high TTFB), render-blocking resources delaying content display, no lazy loading on above-the-fold images (which should NOT be lazy loaded).
How to fix it: Compress and convert hero images to WebP. Use a fast host with low TTFB. Add a CDN. Preload your LCP image using the rel="preload" link tag. Ensure your LCP image is not lazy loaded — it should load immediately.
INP — Interaction to Next Paint
INP replaced FID (First Input Delay) in March 2024. It measures the responsiveness of a page to user interactions — clicking a button, tapping a link, using a form. Good = under 200ms, Needs Improvement = 200 to 500ms, Poor = over 500ms.
Common causes of poor INP: Heavy JavaScript blocking the main thread, third-party scripts (chat widgets, ad scripts, analytics) executing during interaction, inefficient event handlers.
How to fix it: Defer non-critical JavaScript. Audit and reduce third-party scripts. Use WP Rocket's JavaScript deferral settings. Remove unused plugins that load scripts site-wide.
CLS — Cumulative Layout Shift
CLS measures visual stability — how much page elements move around unexpectedly as the page loads. Nothing is more frustrating than trying to tap a button that jumps away as an ad loads above it. Good = under 0.1, Needs Improvement = 0.1 to 0.25, Poor = over 0.25.
Common causes of poor CLS: Images without width and height attributes specified, ads or embeds that load without reserved space, web fonts causing layout shifts (FOUT/FOIT), dynamically injected content above existing content.
How to fix it: Always specify width and height on img tags. Reserve space for ads and embeds with CSS aspect-ratio or fixed dimensions. Use font-display: optional or preload your web fonts. Avoid injecting content above existing page content.
How to Measure Your Core Web Vitals
Google PageSpeed Insights — Free, shows both lab data and real-world field data from the Chrome User Experience Report. The field data is what Google actually uses for ranking.
Google Search Console — The Core Web Vitals report shows your real-world scores across all pages grouped by URL type. This is the most important place to monitor your scores at scale.
GTmetrix — Useful for diagnosing specific issues with its waterfall chart and film strip view of page loading.
Chrome DevTools — The Lighthouse audit in DevTools gives a lab-based assessment and specific recommendations.
Prioritising Your Fixes
Start with LCP — it is the most impactful metric and the most commonly failing one. Image optimisation and good hosting will fix most LCP problems. Then address CLS by adding image dimensions. INP is the hardest to fix as it requires JavaScript profiling, but third-party script auditing often produces the biggest gains.
Focus on mobile scores first. Google uses mobile-first indexing so your mobile Core Web Vitals are more important than desktop for ranking purposes.