Skip to content
Insight

Core Web Vitals: how to diagnose and fix CWV at scale

Core Web Vitals measure speed, responsiveness and visual stability. This covers how to diagnose them across a large site and apply fixes to many pages at once.

You can use free tools like Google PageSpeed Insights and Lighthouse to test your website’s performance and spot common CWV problems. From there, the work is on three metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP).

At scale, the job moves from single pages to templates and the whole site. That takes audits, a prioritised fix list and ongoing monitoring.

The Core Web Vitals metrics

The three metrics cover loading speed, responsiveness and visual stability.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures the time it takes for the biggest visible content element on your page to load. This could be an image, video, or a large block of text. It shows how quickly your page becomes useful.

Google recommends an LCP of 2.5 seconds or less. If your LCP is slow, it may be due to server delays or large files. To improve LCP, you can optimise images, use faster hosting, or reduce render-blocking scripts.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a newer metric that measures how responsive your page feels when users interact with it. It records the time from when a user initiates an action (like clicking a button) to the next frame being painted on their screen.

A low INP means interactions feel quicker and smoother. Google suggests keeping INP below 200 milliseconds. If interactions are slow, check for heavy JavaScript or slow server responses that might delay feedback to the user.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) tracks the amount of unexpected layout movement during page load. It shows how stable your page is visually. When elements jump around while loading, your CLS score worsens.

To have a good user experience, your CLS score should be less than 0.1. High CLS often happens from images without size attributes or ads and embeds that change size after loading. Fixing this involves setting explicit size dimensions and reserving space for dynamic content.

Related metrics: FCP and TTFB

First Contentful Paint (FCP) measures the time from when a page starts loading until any content is shown on the screen. This gives a quick sense of how fast something appears to the user.

Time to First Byte (TTFB) is the time taken for the browser to receive the first byte of page data from the server. It feeds into overall speed and can be improved by optimising server performance or using caching.

Neither FCP nor TTFB is a Core Web Vital, but both relate closely to LCP and INP, helping you understand where delays might occur early in the loading process.

Diagnosing Core Web Vitals at scale

To diagnose Core Web Vitals (CWV) for many pages, you need tools that provide both detailed data and broad overviews. Diagnosis depends on knowing where each number comes from.

Lab data and field data

Lab data comes from controlled tests, simulating how a page loads in a set environment. This data gives you precise, repeatable results for diagnosing performance problems on your pages. However, it doesn’t reflect real-world user experience, as conditions vary widely.

Field data, or real user data, shows how actual visitors experience your site over time. It captures metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) from a variety of devices and conditions. It is the data that reflects what visitors experience.

When diagnosing at scale, combine lab data for quick problem spotting with field data to confirm and prioritise fixes based on actual user experience.

The Search Console report

Google Search Console (GSC) provides a Core Web Vitals report that aggregates field data from your real users. The report breaks down performance by URL groups, highlighting pages with poor scores.

In GSC, you’ll see status categories such as Good, Needs Improvement, and Poor. Focus on pages marked as Poor first. The report allows you to filter by specific metrics like LCP, CLS, and INP.

You can export this data to create tracking sheets or connect it with other tools for deeper analysis. Regularly reviewing the GSC Core Web Vitals report helps you catch ongoing issues and measure improvements over time.

PageSpeed Insights

PageSpeed Insights (PSI) provides both lab and field data for individual URLs. PSI uses Lighthouse for lab testing, showing you detailed performance scores and diagnostic suggestions.

You get a snapshot of key metrics including LCP, CLS, and INP, plus advice on how to fix problems like slow server response or render-blocking scripts. PSI also includes the Chrome User Experience Report (CrUX) field data for that URL, which helps you understand user experience in the wild.

Use PSI to prioritise fixes on important pages and to verify improvements after optimisations.

Chrome User Experience Report (CrUX)

The Chrome User Experience Report (CrUX) collects real user data from millions of opted-in Chrome users. It provides detailed reports on performance metrics across devices, connection types, and geographic regions.

CrUX data is publicly available via BigQuery and the PageSpeed Insights API. It helps you understand broad trends in user experience beyond your own analytics.

At scale, you can analyse CrUX to compare your site’s performance against industry benchmarks or competitors. Use this data to identify patterns and focus areas, especially for markets or devices where performance is weakest.

Combining CrUX with your own GSC and PSI data gives you a full picture of how well your site meets Core Web Vitals standards worldwide.

Optimising Core Web Vitals across large websites

On a large site, fixes need to work across many pages at once, which usually means fixing templates rather than single URLs.

Improving LCP and resource loading

Largest Contentful Paint (LCP) measures how fast the main content loads. To improve LCP, focus on reducing the time it takes for critical assets to appear.

Use critical CSS to inline styles needed for above-the-fold content. This lets browsers render key content faster. A Content Delivery Network (CDN) serves resources from servers closer to your visitors.

Avoid FOIT (Flash of Invisible Text) by preloading fonts properly. You can do this using rel="preload" tags to make sure fonts are available immediately without blocking rendering.

Lazy-load images and non-critical scripts so they don’t delay the main content. Regular audits with Lighthouse or the Web Vitals Chrome Extension spot slow-loading pages at scale.

Improving INP and responsiveness

Interaction to Next Paint (INP) shows how quickly your site responds to user input. Lower INP times mean smoother, more responsive experiences.

You should minimise JavaScript blocking the main thread. Break up large scripts into smaller chunks and defer non-essential code. Using web workers can move heavy tasks off the main thread entirely.

Prioritise interactive elements like buttons and forms by making them available early. Avoid complex animations or heavy event listeners that delay interaction readiness.

Monitor real-user data across pages to identify bottlenecks. Automated performance tracking finds slow responses across many URLs at once.

Reducing CLS and layout shifts

Cumulative Layout Shift (CLS) happens when visible elements move unexpectedly during page load. It frustrates visitors and is one of Google’s page experience signals.

Reserve fixed space for images, ads, and embeds using width and height attributes in your HTML or CSS. This prevents elements from jumping as they load.

Avoid inserting dynamic content that pushes existing elements down without animation. Use placeholders for late-loading assets so layout changes feel smooth.

Test your site regularly, especially on different devices and screen sizes. Track pages with high CLS scores and focus on consistent layout behaviour. Predictable page structure is what keeps CLS down.

Automation at scale

At scale, manual fixes aren’t practical. Use automated tools and workflows to handle Core Web Vitals optimisation across thousands of pages.

Set up continuous integration pipelines that run Lighthouse or UnLighthouse reports on new deployments automatically. This identifies regressions early.

Implement scripts that inject critical CSS and preload fonts dynamically based on page content. Automate lazy-loading rules and optimise image delivery with smart CDN settings.

Use dashboards that display Core Web Vitals metrics for your whole site. They show where to fix first and whether fixes held.

The aim is to keep Core Web Vitals within target thresholds as the site grows.

Monitoring and maintenance

Scores drift as code, content and third-party scripts change, so they need checking on a schedule.

Tracking scores over time

You should monitor your Core Web Vitals metrics daily or weekly to see trends in your website performance. Real User Monitoring (RUM) tools and Google Search Console give you data on metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP).

Create a dashboard that shows scores by device type and page. This helps you spot where performance drops happen and if they affect mobile or desktop users more. Automated reports sent daily or weekly keep you updated without manual data gathering.

Use trend analysis to find patterns. For example, repeated increases in LCP might indicate server delays or heavy images. Detecting these trends early lets you prioritise fixes and track the results of changes you make.

A routine for ongoing fixes

Develop a routine that includes regular performance audits with clear roles assigned to team members. Use alerts to notify you immediately when scores fall below your target thresholds.

Standardise your fix process. Document each step from identifying issues to testing after changes. This keeps your team aligned and speeds up recovery time.

Prioritise fixes based on user impact. Start with pages that have the highest traffic and worst Core Web Vitals scores. Confirm changes with field data, not only lab tests.

Make the check part of every release.

Frequently asked questions

Quick answers, for anyone who skipped ahead.

Which metrics make up Core Web Vitals?

Three: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. INP replaced First Input Delay (FID) in March 2024.

How do large sites monitor Core Web Vitals across many pages?

With automated monitoring, Search Console’s grouped URL report, and alerts when metrics drop.

What improves Core Web Vitals on a large website?

Focus on optimising resource loading by compressing images, reducing JavaScript blocking, and using lazy loading. Implement clean, minimal code and avoid adding too many plugins, especially on WordPress sites. Regularly audit your pages to identify high-impact fixes and prioritise the slowest or most visited pages first.

How does tracking differ on desktop and mobile?

Mobile users often face slower network conditions, so tracking needs to include real-world data that reflects different connection speeds. Mobile devices may also trigger different layout shifts or delays due to screen size and interaction type. Your monitoring tools should capture both desktop and mobile data separately to provide an accurate picture.

Which tools help diagnose Core Web Vitals at scale?

Google Search Console provides real user metrics grouped by URL, while tools like PageSpeed Insights offer lab testing for specific pages. DebugBear and similar tools combine lab and field data for ongoing monitoring. For WordPress, lean, no-plugin approaches can avoid conflicts but must be combined with manual checks or external tools.

How often should Core Web Vitals be checked?

You should test your Core Web Vitals continuously or at least weekly for larger sites. Automated alerts catch regressions early. Always recheck after making site updates or adding new features that can affect loading, interactivity, or layout stability.