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.