Core Web Vitals Audit: Measure and Improve LCP, INP, and CLS

What Are Core Web Vitals

Core Web Vitals (CWV) are a set of three metrics that Google uses to measure real-world user experience on web pages. They became a ranking signal in 2021 and have grown in importance with each algorithm update. The three metrics measure loading speed, interactivity, and visual stability — the three pillars of a good page experience.

Google measures CWV using real user data collected from Chrome users who have opted into usage statistics reporting (this is called "field data" or CrUX data). If your site doesn't pass CWV thresholds in field data, you're at a ranking disadvantage compared to competitors who do.

LCP: Largest Contentful Paint

LCP measures how long it takes for the largest visible element to render on screen. This is usually a hero image, a large text block, or a video poster frame. It represents when the user perceives the page as "loaded."

Thresholds:

• Good: Under 2.5 seconds
• Needs Improvement: 2.5–4.0 seconds
• Poor: Over 4.0 seconds

Common causes of poor LCP:

• Slow server response (TTFB): If your server takes 2 seconds to respond, LCP can't possibly be under 2.5s. Upgrade hosting, enable caching, or use a CDN.
• Unoptimised hero images: A 3MB JPEG hero image will tank LCP. Convert to WebP/AVIF, serve responsive sizes with srcset, and preload the hero image.
• Render-blocking resources: Large CSS files or synchronous JavaScript in the head delay rendering. Inline critical CSS and defer non-critical resources.
• Client-side rendering: If your LCP element is rendered by JavaScript (React, Vue), the browser has to download, parse, and execute JS before showing content. Use server-side rendering or static generation.
• Web font loading: If the LCP element is text styled with a web font, it won't render until the font loads. Use font-display: swap and preload your primary font.

How to fix LCP:

1. Identify your LCP element using Chrome DevTools Performance panel or PageSpeed Insights
2. If it's an image: preload it, optimise format/size, use fetchpriority="high"
3. If it's text: preload the web font, use font-display: swap
4. Reduce server response time to under 600ms
5. Remove or defer render-blocking CSS and JavaScript

INP: Interaction to Next Paint

INP replaced First Input Delay (FID) in March 2024. It measures the responsiveness of your page to user interactions — clicks, taps, and keyboard input. Unlike FID which only measured the first interaction, INP measures all interactions throughout the page lifecycle and reports the worst one (with some statistical smoothing).

Thresholds:

• Good: Under 200 milliseconds
• Needs Improvement: 200–500 milliseconds
• Poor: Over 500 milliseconds

Common causes of poor INP:

• Long JavaScript tasks: Any JS task over 50ms blocks the main thread and delays response to user input. Break long tasks into smaller chunks using requestIdleCallback or setTimeout.
• Third-party scripts: Analytics, chat widgets, ad scripts, and social embeds often run heavy JavaScript. Audit your third-party scripts and remove or defer non-essential ones.
• Excessive DOM size: Pages with thousands of DOM elements are slow to update. Keep DOM size under 1,500 elements where possible.
• Expensive event handlers: Click handlers that trigger complex calculations, large DOM updates, or synchronous API calls block responsiveness.

How to fix INP:

1. Use Chrome DevTools Performance panel to identify long tasks during interactions
2. Break JavaScript into smaller chunks using yield-to-main patterns
3. Defer non-critical third-party scripts with async or defer attributes
4. Use web workers for CPU-intensive operations
5. Reduce DOM size and complexity

CLS: Cumulative Layout Shift

CLS measures visual stability — how much the page layout shifts unexpectedly while content loads. Nothing frustrates users more than clicking a button just as the page shifts and hitting something else instead.

Thresholds:

• Good: Under 0.1
• Needs Improvement: 0.1–0.25
• Poor: Over 0.25

Common causes of poor CLS:

• Images without dimensions: If width and height aren't set on img elements, the browser can't reserve space before the image loads.
• Ads and embeds without reserved space: Ad slots that inject content after page load push everything below them down the page.
• Web fonts causing FOIT/FOUT: When a web font loads and replaces a fallback font with different metrics, text reflows and causes shifts.
• Dynamically injected content: Banners, cookie notices, or notification bars that push content down after initial render.

How to fix CLS:

1. Add explicit width and height attributes to all images and video elements
2. Reserve space for ads and embeds using min-height or aspect-ratio CSS
3. Use font-display: optional or size-adjust to minimise font swap shifts
4. Never inject content above existing content unless in response to a user interaction
5. Use CSS contain: layout on dynamic content areas

How to Measure Core Web Vitals

• Google Search Console: The Core Web Vitals report shows which URLs pass or fail based on real user data. This is the authoritative source for ranking impact.
• PageSpeed Insights: Shows both field data (CrUX) and lab data (Lighthouse) for any URL. Field data is what matters for rankings.
• Chrome DevTools: Performance panel shows detailed timing data including LCP, CLS, and long tasks. Essential for debugging specific issues.
• Web Vitals Extension: Chrome extension that shows real-time CWV scores as you browse your site. Quick way to spot pages with problems.
• CrUX Dashboard: Google's free Looker Studio dashboard showing CWV trends over time for your domain.

Field Data vs Lab Data

This distinction is critical and often misunderstood:

Field data (CrUX / Real User Monitoring) is collected from actual Chrome users visiting your site. This is what Google uses for ranking. It reflects real devices, real network conditions, and real user behaviour. You need enough traffic (typically thousands of monthly visits) to accumulate field data.

Lab data (Lighthouse, PageSpeed Insights lab section) is simulated on a controlled device with throttled CPU and network. It's reproducible and useful for debugging, but it doesn't directly affect rankings. Lab scores can differ significantly from field data.

If your lab scores are great but field data fails, the problem is likely that real users on slow devices or poor connections have a worse experience than the lab simulation predicts. Focus on optimising for the 75th percentile of real users, not just lab conditions.

How CWV Affects Rankings

Core Web Vitals are a confirmed ranking factor, but they're a tiebreaker rather than a dominant signal. Google has stated that content relevance and quality still outweigh page experience signals. However:

• In competitive queries where multiple pages have similar content quality, CWV can determine who ranks higher
• Failing CWV can prevent you from appearing in certain SERP features like Top Stories
• The impact compounds — poor CWV also increases bounce rate and reduces dwell time, which are behavioural signals that may indirectly affect rankings
• Google evaluates CWV at the page level, but groups pages by similar type (product pages, blog posts, etc.) for reporting

Action Plan

1. Check GSC first: Open the Core Web Vitals report to see which URLs fail and which metric is the problem
2. Run PageSpeed Insights on failing URLs: Look at the field data section first, then use lab data diagnostics to identify specific issues
3. Fix LCP first: It's usually the easiest to improve and has the most visible impact. Image optimisation and preloading solve most LCP issues.
4. Address CLS next: Adding image dimensions and reserving ad space are quick wins that immediately reduce layout shift.
5. Tackle INP last: It's the hardest to fix because it requires JavaScript optimisation. Start by auditing and removing unnecessary third-party scripts.
6. Monitor field data over 28 days: CrUX data updates on a rolling 28-day window. After making fixes, wait at least 28 days before evaluating impact in field data.

For a comprehensive audit that includes Core Web Vitals analysis along with 60+ other technical checks, see our professional audit services.