Fix Core Web Vitals (LCP, CLS, INP) in 2026

Core Web Vitals became a Google ranking signal in 2021 and the bar has moved up every year since. In 2026, INP replaced FID and the thresholds tightened. Here's how to actually pass — not just nudge into the green.

LCP (Largest Contentful Paint) — under 2.5s

LCP is how long it takes for the biggest visible element (usually your hero image or headline) to render. The fix is almost always the same:

1. Identify the LCP element with PageSpeed Insights
2. Preload it: <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
3. Serve it as WebP or AVIF, sized to the actual rendered dimensions
4. Move it above the fold in the HTML — no lazy-load on the LCP image
5. Inline critical CSS for the above-the-fold area

CLS (Cumulative Layout Shift) — under 0.1

CLS is the jumping you see when ads, images, or fonts load late. Causes and fixes:

• Images without dimensions → always set width and height attributes
• Web fonts swapping in → use font-display: optional or preload the font
• Ads/embeds inserted dynamically → reserve space with a fixed-height container
• Cookie banners that push content down → render them as overlays, not in-flow

INP (Interaction to Next Paint) — under 200ms

INP measures how fast your page reacts to clicks and taps. The killer is usually heavy JavaScript on the main thread:

• Audit third-party scripts — defer or remove anything non-critical
• Code-split your bundle so the homepage doesn't ship dashboard JS
• Replace heavy libraries (moment.js, lodash) with smaller alternatives
• Use requestIdleCallback for analytics and tracking

Verify in real-world data

PageSpeed lab scores are estimates. The real test is field data in Search Console → Core Web Vitals report (28-day rolling). Fixes can take 28 days to fully reflect — be patient.