Core Web Vitals Optimization: Fixing LCP, CLS, and INP in 2026

Core Web Vitals became a ranking factor in 2021, but the bar has only gotten higher. In 2026, with INP replacing FID and Google tightening passing thresholds, sites that ignore these metrics are bleeding rankings and conversions. Here is how to fix each metric step by step.

Fixing LCP: Largest Contentful Paint

LCP measures how long the largest visible element takes to render. Usually that is a hero image, a heading, or a video poster. Google's target is under 2.5 seconds. If you are above that, the fix starts with the critical rendering path.

First, identify the LCP element using the Performance panel in Chrome DevTools or Lighthouse. If it is an image, switch to WebP or AVIF format, preload it with a <link rel="preload"> tag, and host it on a CDN with proper cache headers. Resize the image to render no larger than its display size — serving a 4000 pixel wide image in a 1200 pixel container wastes bandwidth and milliseconds.

If the LCP element is text, the delay is often font-related. Use font-display: swap to show text immediately in a fallback font, then swap to your custom font. Self-host fonts rather than loading from Google Fonts to eliminate DNS lookup and connection negotiation time.

Eliminating CLS: Cumulative Layout Shift

CLS measures visual stability. A shift happens when content moves after it has already been painted. The target is a score below 0.1. The biggest CLS offenders are images without dimensions, dynamically injected content, and web fonts.

Set explicit width and height attributes on every image and video. This allows the browser to reserve the correct space before the asset loads. For responsive images, combine the width and height attributes with aspect-ratio in CSS to maintain proportions across breakpoints.

Reserve space for late-loading content like ads, embeds, and banners. Wrap these in a container with a fixed minimum height. For web fonts, font-display: optional prevents layout shifts but hide the text briefly — font-display: swap with a matching fallback font is the better trade-off for most sites.

Improving INP: Interaction to Next Paint

INP replaced FID in March 2024 and measures the responsiveness of all interactions, not just the first one. The target is under 200 milliseconds. High INP is almost always caused by JavaScript that blocks the main thread.

Audit your third-party scripts. A single heavy tag manager, analytics script, or chat widget can push INP over 300 milliseconds. Defer non-critical scripts with the defer or async attribute. For essential scripts, use requestIdleCallback or scheduler.postTask to yield control back to the browser between execution chunks.

Break up long tasks. If a click handler runs for 80 milliseconds, the next interaction has to wait. Use setTimeout or scheduler.yield to split work into smaller chunks. For frameworks like React, lazy load components that aren't immediately visible using dynamic imports.

Monitoring With Real User Data

Lab tools like Lighthouse are useful for debugging, but real user data from CrUX tells you what actual visitors experience. Set up a custom dashboard in Google Search Console's Core Web Vitals report and monitor the top 20 pages by traffic weekly.

Track the origins labeled "poor" in the report — those are the pages hurting your rankings. Prioritise fixes by traffic impact. A 0.2 second improvement on your top ten pages matters more than a 0.5 second improvement on a page that gets fifty visits a month.

---

Need help ? Core Web Vitals optimisation requires deep technical knowledge of browser rendering, CDN configuration, and JavaScript performance. SoniNow's technical team audits and optimises sites for every metric, delivering measurable improvements. Book a speed audit to see exactly where your site stands.