Core Web Vitals: How to Pass LCP, INP and CLS

Core Web Vitals are three measurements of real user experience: how fast the main content loads, how quickly the page responds and how stable the layout is. They are a small part of page experience, but they are also a good proxy for a site that feels fast and calm.

What Core Web Vitals are

Core Web Vitals are a set of metrics that capture how a page feels to real visitors. Each one measures a different moment of the experience:

• LCP (Largest Contentful Paint): how long it takes for the main content of the page, usually a hero image or a large block of text, to appear.
• INP (Interaction to Next Paint): how quickly the page responds visually after taps, clicks and key presses, measured across the whole visit. INP replaced First Input Delay as a Core Web Vital in 2024.
• CLS (Cumulative Layout Shift): how much visible content jumps around unexpectedly while the page loads or changes.

They matter because users notice them: a slow main image, a button that does not react or a layout that shifts just as you tap are the experiences that make people leave.

The thresholds

Swipe the table sideways to see all columns.

These are evaluated at the 75th percentile of page loads: to count as good, at least three out of four visits must meet the threshold. The thresholds are the same for mobile and desktop, but mobile results are usually worse because phones are slower and networks less stable.

Field data versus lab data

This distinction prevents wasted effort.

• Field data comes from real visitors over time (for example, in the Search Console Core Web Vitals report and in the field section of PageSpeed Insights). It tells you whether you have a problem and on which pages.
• Lab data comes from a simulated test on one device and network (for example, Lighthouse). It helps you find why a problem happens, because you can repeat it and change things.

A great lab score does not guarantee good field data, and a lab score is not what Search Console reports. Use field data to decide priorities, and lab tools to diagnose.

A simple measurement workflow

1. Open the Core Web Vitals report in Search Console and note which groups of URLs are poor or need improvement on mobile.
2. Pick one representative URL from each group and run it in PageSpeed Insights to see field data and lab diagnostics.
3. Use your browser’s developer tools (the Performance panel) to find slow elements, long tasks and layout shifts on that page.
4. Fix the cause on the page template, since the same problem usually affects the whole group.
5. Wait for field data to update. It is collected over a rolling period, so confirmation takes several weeks.

Improving LCP

LCP is the sum of four phases: the server response, the time before the browser starts loading the main resource, the time to load it and the time to render it. Fix in this order:

• Identify the LCP element (often the hero image or a large heading). Optimize that one first.
• Speed up the server response: use caching, a CDN and a good hosting plan. Static pages help a lot.
• Make the main image light: compress it, serve it at the size actually displayed, and use modern formats such as WebP or AVIF.
• Do not lazy-load the main image. Lazy loading is for images below the fold. Give the hero image high priority and, where appropriate, preload it.
• Remove render-blocking resources: inline critical CSS, defer non-essential scripts and avoid large font files delaying text.

Improving INP

INP is about how long the browser is busy when a user interacts. The usual culprit is too much JavaScript running on the main thread.

• Break up long tasks so the browser can respond between chunks of work.
• Reduce and defer JavaScript. Remove unused libraries and load non-critical code after the page is usable.
• Audit third-party scripts: chat widgets, tag managers loaded with many tags, heatmaps and ad scripts often cost the most. Load them only where needed and after consent when required.
• Keep the page structure lean. Very large pages with thousands of elements slow every interaction.
• Give instant feedback, such as a pressed state or spinner, and do heavy work afterward.

Improving CLS

• Set width and height (or aspect-ratio) on images, videos and embeds so the browser reserves space.
• Reserve space for ads, banners and cookie notices instead of inserting them above content that is already visible.
• Handle fonts carefully: use a font-display strategy and choose fallback fonts with similar metrics to avoid text jumping when the web font loads.
• Avoid injecting content above existing content after load, unless it follows a user action.
• Animate with transform and opacity, not with properties that change layout.

If your blog is monetized with ads, plan ad slots with fixed minimum heights so they do not push the article down after load.

Typical fixes by symptom

Swipe the table sideways to see all columns.

Keep it in perspective and keep monitoring

Core Web Vitals are one part of page experience. Google is clear that helpful, relevant content matters far more, and a site with great vitals and thin content will not rank well. Treat vitals as part of a good experience, and include them in a regular SEO audit. Re-check monthly and after every redesign, plugin or tag change, since regressions are common. If you are new to SEO, start with what SEO is, and if you want a team to measure and fix performance, contact MetaEX.