Core Web Vitals Explained: LCP, INP and CLS and How to Improve Them

Users leave slow, jumpy websites, and Google uses page experience signals, including Core Web Vitals, as part of how it evaluates pages. The good news is that a handful of fixes usually solve most problems.

The three metrics

Metric	Measures	Good	Needs improvement	Poor
LCP – Largest Contentful Paint	Loading: when the main content appears	≤ 2.5 s	≤ 4.0 s	> 4.0 s
INP – Interaction to Next Paint	Responsiveness: how fast the page reacts to taps and clicks	≤ 200 ms	≤ 500 ms	> 500 ms
CLS – Cumulative Layout Shift	Visual stability: how much content jumps around	≤ 0.1	≤ 0.25	> 0.25

Google evaluates these at the 75th percentile of real visits, separately for mobile and desktop.

Measure with real users first

• Field data comes from real Chrome users: see it in Search Console's Core Web Vitals report or PageSpeed Insights.
• Lab data from Lighthouse is useful for debugging, but it runs on a simulated device and may not match real users.

Fix the templates that affect the most pages first, such as article pages or product pages.

Improving LCP

The LCP element is usually the hero image, a large heading or a banner.

1. Speed up the server. Use caching and a CDN; aim for a fast time to first byte.
2. Optimise the hero image. Serve modern formats such as WebP or AVIF, at the right size for the device.
3. Prioritise it. Do not lazy-load the main above-the-fold image; mark it high priority.
4. Reduce render-blocking resources. Inline critical CSS, defer non-critical CSS and scripts.
5. Limit web fonts. Fewer weights, font-display: swap and preconnect to font hosts.

Improving INP

INP replaced First Input Delay in 2024. It looks at all interactions during a visit and reports one of the slowest.

1. Ship less JavaScript. Remove unused libraries and split code by route.
2. Break up long tasks. Long-running scripts block the main thread; split work into smaller chunks.
3. Load third-party scripts carefully. Chat widgets, analytics and ads often cause slow interactions. Load them after the page is interactive.
4. Keep event handlers light. Show immediate visual feedback, then do heavy work afterwards.
5. Avoid huge DOM trees that make every update expensive.

Improving CLS

Layout shift happens when elements move after the user has started reading.

1. Set width and height (or aspect-ratio) for images and videos.
2. Reserve space for ads, embeds and banners before they load.
3. Avoid inserting content above existing content, such as late-loading notices pushing text down.
4. Use fonts carefully, matching fallback font metrics to reduce text reflow.
5. Animate with transforms, not properties that change layout.

A quick fix list by site type

Site type	Most common problem	First fix
Blogs and news	Ads and embeds causing CLS	Reserve fixed space for ad slots
E-commerce	Large product images causing slow LCP	Right-sized modern images, CDN
Web apps	Heavy JavaScript causing poor INP	Code splitting, remove unused libraries
Corporate sites	Sliders and video heroes	Replace with a static optimised hero

Frequently asked questions

Do Core Web Vitals directly decide rankings? They are one of many signals. Relevant, helpful content matters most, but when pages are similar, a better experience can help, and faster pages usually convert better regardless of rankings.

Why does PageSpeed Insights show different scores each time? Lab tests vary with network and server conditions. Focus on the field data section, which reflects real users over the previous 28 days.

How long until improvements show in Search Console? Field data is collected over a rolling 28-day window, so expect several weeks before the report fully reflects your fixes.

Which metric should we fix first? Start with the metric that is failing on the most important templates in Search Console. For content sites that is often CLS from ads and embeds, for shops LCP from large product images, and for web apps INP from heavy JavaScript. Fixing one shared template, such as the article layout, usually improves thousands of pages at once, so prioritise templates over individual URLs.

Do ads hurt Core Web Vitals? They can, especially layout shift and responsiveness. Reserve space for ad slots, limit the number of ads above the fold and load ad scripts after the main content.

Key takeaways

• LCP measures loading, INP responsiveness, CLS visual stability; aim for the "good" thresholds at the 75th percentile.
• Use real-user data from Search Console to decide what to fix first.
• Optimise the hero image and server for LCP, reduce JavaScript for INP, and reserve space for media and ads for CLS.
• Re-check after every major design change; performance is maintained, not finished.

KHR Digital Solutions builds fast websites and web apps and offers performance reviews for existing sites.