How to Fix Core Web Vitals: LCP, INP & CLS (2026)

Core Web Vitals directly impact search ranking and user experience. After optimizing several production applications, here’s my practical playbook for hitting good scores on all three metrics. For the component layer, pair this with my React performance optimization techniques — and to keep the gains from regressing, a solid frontend testing strategy. See also The $1,100 Framework That Just Made Vercel’s $3 Billion Moat Obsolete.

WEB VITALS IN ONE SCREEN

The fastest way to improve Core Web Vitals is to treat each metric as a different kind of failure mode. They do not respond to the same fixes.

LCP

Fix what delays the largest visible element

Largest Contentful Paint is usually an image, hero block, or large text section arriving too late.

Preload the real hero asset
Reduce server response time
Avoid oversized unresponsive media

INP

Remove long tasks from interaction paths

Interaction to Next Paint is mainly about keeping the main thread free enough to respond when users click or type.

Break synchronous work into chunks
Defer non-urgent updates
Debounce search-heavy interactions

CLS

Reserve space before content arrives

Cumulative Layout Shift punishes surprise movement. The fix is usually explicit dimensions and stable placeholders.

Set media dimensions
Reserve async content slots
Avoid injecting banners above existing content

MEASUREMENT

Use field data before declaring victory

Lab scores are useful for diagnosis, but real-user telemetry is what tells you whether the experience is actually improving.

Collect `web-vitals` data
Track regressions over time
Validate on realistic devices and networks

The Three Metrics

Metric	Measures	Good	Needs Work	Poor
LCP (Largest Contentful Paint)	Loading	< 2.5s	2.5-4.0s	> 4.0s
INP (Interaction to Next Paint)	Interactivity	< 200ms	200-500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability	< 0.1	0.1-0.25	> 0.25

Measuring Before Optimizing

Always measure in the field, not just in lab conditions.

JavaScript

// web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });
  navigator.sendBeacon('/api/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Optimizing LCP

LCP measures when the largest content element becomes visible. It’s usually a hero image, heading, or text block.

1. Preload the LCP Image

HTML

<!-- In <head> — tell the browser about the hero image early -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high" />

2. Use Responsive Images

HTML

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Hero image"
  width="800"
  height="400"
  fetchpriority="high"
  decoding="async"
/>

3. Optimize Server Response Time

TypeScript

// SvelteKit example: cache expensive data
export const load: PageServerLoad = async ({ setHeaders }) => {
  setHeaders({
    'Cache-Control': 'public, max-age=3600, s-maxage=86400',
  });

  const data = await fetchExpensiveData();
  return { data };
};

4. Inline Critical CSS

For SvelteKit, CSS is automatically inlined during SSR. For other frameworks, use tools like critters:

JavaScript

// vite.config.ts
import critters from 'critters-webpack-plugin';

// This inlines above-the-fold CSS and defers the rest

Optimizing INP

INP (Interaction to Next Paint) replaced FID in 2024. It measures the responsiveness of all interactions, not just the first one.

1. Break Up Long Tasks

JavaScript

// Before: one long synchronous operation
function processLargeDataset(items) {
  items.forEach(item => heavyTransform(item)); // Blocks for 300ms
}

// After: yield to the main thread
async function processLargeDataset(items) {
  const chunks = chunkArray(items, 50);
  for (const chunk of chunks) {
    chunk.forEach(item => heavyTransform(item));
    await scheduler.yield(); // Let the browser handle pending interactions
  }
}

2. Use `startTransition` for Non-Urgent Updates (React)

TSX

import { startTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    setQuery(e.target.value); // Urgent: update input immediately

    startTransition(() => {
      setResults(filterResults(e.target.value)); // Non-urgent: can be deferred
    });
  }
}

3. Debounce Event Handlers

TypeScript

function debounce<T extends (...args: any[]) => void>(fn: T, ms: number): T {
  let timer: ReturnType<typeof setTimeout>;
  return ((...args: Parameters<T>) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  }) as T;
}

// Usage
input.addEventListener('input', debounce(handleSearch, 200));

Optimizing CLS

CLS measures unexpected layout shifts. It’s the most frustrating metric for users.

1. Always Set Image Dimensions

HTML

<!-- Bad: causes layout shift when image loads -->
<img src="/photo.webp" alt="Photo" />

<!-- Good: browser reserves space -->
<img src="/photo.webp" alt="Photo" width="800" height="600" />

2. Use CSS `aspect-ratio` for Dynamic Content

CSS

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #1a1a1a;
}

3. Reserve Space for Async Content

CSS

/* Reserve space for an ad slot or dynamic banner */
.ad-slot {
  min-height: 250px;
  contain: layout;
}

4. Avoid Inserting Content Above Existing Content

This is the most common CLS offender. Cookie banners, notification bars, and lazy-loaded headers all push content down.

CSS

/* Pin dynamic banners to the top of the viewport */
.notification-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

Real Results

On this portfolio site, after applying these optimizations:

Metric	Before	After
LCP	3.2s	1.4s
INP	180ms	45ms
CLS	0.12	0.01
Lighthouse Score	78	98

The biggest wins came from image optimization (LCP), removing synchronous third-party scripts (INP), and setting explicit dimensions on all media (CLS).

START WITH THE BIGGEST LEVERS

Most Web Vitals work is not a giant rewrite. It is a sequence of targeted fixes that remove very specific bottlenecks.

HIGH-LEVERAGE FIXES

These changes usually move the metrics fastest

Preload and right-size your true LCP asset
Remove or defer blocking third-party scripts
Break up long interaction handlers and heavy transforms
Set explicit dimensions or aspect ratios on all media and embeds

COMMON WASTE

These patterns slow teams down without solving much

Chasing Lighthouse points without field measurement
Optimizing tiny components while the hero image is still oversized
Ignoring CLS until banners and ads start shifting the page
Testing only on fast laptops and office Wi-Fi

Key Takeaways

Measure in the field using the web-vitals library, not just Lighthouse
LCP: preload hero images and optimize server response time
INP: break long tasks, debounce handlers, use startTransition
CLS: always set image dimensions and reserve space for dynamic content
Small, targeted fixes often deliver the biggest improvements
Test on real devices — your development machine isn’t representative

How to Fix Core Web Vitals: LCP, INP & CLS (2026)

Fix what delays the largest visible element

Remove long tasks from interaction paths

Reserve space before content arrives

Use field data before declaring victory

The Three Metrics

Measuring Before Optimizing

Optimizing LCP

1. Preload the LCP Image

2. Use Responsive Images

3. Optimize Server Response Time

4. Inline Critical CSS

Optimizing INP

1. Break Up Long Tasks

2. Use `startTransition` for Non-Urgent Updates (React)

3. Debounce Event Handlers

Optimizing CLS

1. Always Set Image Dimensions

2. Use CSS `aspect-ratio` for Dynamic Content

3. Reserve Space for Async Content

4. Avoid Inserting Content Above Existing Content

Real Results

These changes usually move the metrics fastest

These patterns slow teams down without solving much

Key Takeaways

Related Articles

React Performance Optimization: 10 Proven Techniques

SEO in the AI Era: The 2026 GEO Playbook for Winning AI Search Traffic

React Server Components in 2026: The Mental Model, the use client Boundary & When Not to Use Them

Explore Topics

Fix what delays the largest visible element

Remove long tasks from interaction paths

Reserve space before content arrives

Use field data before declaring victory

These changes usually move the metrics fastest

These patterns slow teams down without solving much

Related Articles

React Performance Optimization: 10 Proven Techniques

SEO in the AI Era: The 2026 GEO Playbook for Winning AI Search Traffic

React Server Components in 2026: The Mental Model, the use client Boundary & When Not to Use Them

Get new posts on AI, Claude Code & LLMs

Explore Topics