Updated April 13, 2026

Framework-Specific
Performance Fixes

Step-by-step guides to fix Core Web Vitals in every major framework and CMS. Pick your stack and metric.

LCP Next.js

Fix LCP in Next.js

4.2s → 1.4s
CLS Next.js

Fix CLS in Next.js

0.28 → 0.04
INP Next.js

Fix INP in Next.js

380ms → 112ms
TTFB Next.js

Fix TTFB in Next.js

1240ms → 180ms
LCP React

Fix LCP in React

3.8s → 1.3s
CLS React

Fix CLS in React

0.24 → 0.03
INP React

Fix INP in React

420ms → 110ms
LCP Vue 3

Fix LCP in Vue 3

3.6s → 1.4s
CLS Vue 3

Fix CLS in Vue 3

0.27 → 0.04
INP Vue 3

Fix INP in Vue 3

400ms → 135ms
TTFB Vue 3

Fix TTFB in Vue 3

1100ms → 185ms
LCP Angular

Fix LCP in Angular

4.1s → 1.5s
CLS Angular

Fix CLS in Angular

0.29 → 0.04
INP Angular

Fix INP in Angular

450ms → 140ms
TTFB Angular

Fix TTFB in Angular

1350ms → 220ms
LCP WordPress

Fix LCP in WordPress

5.2s → 1.8s
CLS WordPress

Fix CLS in WordPress

0.34 → 0.05
INP WordPress

Fix INP in WordPress

520ms → 160ms
LCP Shopify

Fix LCP in Shopify

4.8s → 2.0s
CLS Shopify

Fix CLS in Shopify

0.31 → 0.05
LCP Sanity

Fix LCP in Sanity

4.6s → 1.8s
LCP Contentful

Fix LCP in Contentful

4.4s → 1.7s
LCP Strapi

Fix LCP in Strapi

4.6s → 1.8s
LCP Webflow

Fix LCP in Webflow

4.5s → 1.9s
CLS Webflow

Fix CLS in Webflow

0.26 → 0.03
LCP Squarespace

Fix LCP in Squarespace

5.5s → 2.2s
LCP Astro

Fix LCP in Astro

3.1s → 0.9s
CLS Astro

Fix CLS in Astro

0.18 → 0.02
LCP SvelteKit

Fix LCP in SvelteKit

3.4s → 1.1s
CLS SvelteKit

Fix CLS in SvelteKit

0.22 → 0.03
LCP Remix

Fix LCP in Remix

3.6s → 1.2s
INP Remix

Fix INP in Remix

340ms → 95ms
LCP Nuxt

Fix LCP in Nuxt

3.8s → 1.3s
CLS Nuxt

Fix CLS in Nuxt

0.25 → 0.03
CLS All Frameworks

Fix CLS from Font Loading

0.28 → 0.02
LCP All Frameworks

Fix LCP from Third-Party Scripts

4.8s → 1.9s
LCP All Frameworks

Image Optimization for LCP

5.1s → 1.6s
INP All Frameworks

Reduce JS Bundle for INP

580ms → 120ms
TTFB All Frameworks

Improve Server Response TTFB

1.8s → 180ms
LCP All Frameworks

Lazy Loading Pitfalls for LCP

4.1s → 1.5s
TTFB Vercel

Fix TTFB on Vercel

1.2s → 45ms
TTFB Netlify

Fix TTFB on Netlify

1.5s → 65ms
TTFB Cloudflare Pages

Fix TTFB on Cloudflare Pages

900ms → 35ms
TTFB AWS Amplify

Fix TTFB on AWS Amplify

1.8s → 85ms
LCP CDN

CDN Optimization for Faster LCP

3.8s → 1.4s
TTFB Edge Functions

Edge Functions for Sub-100ms TTFB

1.5s → 40ms
LCP CSS

Render-Blocking CSS and LCP

3.9s → 1.8s
LCP CSS

Critical CSS Extraction

2.8s → 1.5s
CLS Animations

Animation Performance and CLS

0.22 → 0.04
LCP Fonts

Web Fonts Performance Guide

3.1s → 1.6s
LCP Images

Responsive Images and LCP

4.1s → 1.4s
LCP Hints

Resource Hints: Preload, Preconnect, Prefetch

2.6s → 1.7s
LCP Gatsby

Fix LCP in Gatsby

4.2s → 1.4s
CLS Tailwind CSS

Fix CLS with Tailwind CSS

0.21 → 0.04
INP Webpack

Fix INP with Webpack

310ms → 118ms
LCP Vite

Fix LCP in Vite

3.8s → 1.4s
TTFB Docker

Fix TTFB on Docker

1.6s → 110ms
LCP Eleventy

Fix LCP in Eleventy

3.4s → 1.2s
CLS Bootstrap

Fix CLS with Bootstrap

0.28 → 0.04
INP TypeScript

Fix INP in TypeScript

295ms → 120ms

No fixes match the selected filters.

Frequently asked

Common questions

Guides explain a metric end-to-end: what it measures, how it is calculated, what thresholds are good, and the general optimization strategy. Fixes are framework-specific or stack-specific tactical pages: how to fix LCP in Next.js, how to fix INP in React, how to fix CLS in WordPress. Start with the relevant guide to understand the metric, then jump to the fix page that matches your stack.

Within each fix page, optimizations are ordered by expected impact for the typical site on that stack, with the highest-leverage change first. Across fix pages, the catalog page (this page) groups by metric rather than impact, because impact is highly stack-dependent: a fix that moves LCP by 1.5 seconds on a Next.js site might move it by 200 milliseconds on a Hugo site. The benchmark methodology page documents how impact estimates are generated, including lab versus field framing and the reporting conventions used across the catalog.

The fix catalog covers frameworks in order of measured prevalence in the HTTP Archive Web Almanac and our own crawl data. Frameworks with under 1% market share are added on contributor request or when a notable performance pattern emerges. The contribute page documents how to propose a new fix page.