Optimize Core Web Vitals in 2026: Improve LCP, INP, and CLS (Current Thresholds)

Metric	Good	Needs improvement	Poor
LCP	2.5s	2.5–4.0s	>4.0s
INP	200ms	200–500ms	>500ms
CLS	0.1	0.1–0.25	>0.25

These targets are designed around field data (real users). In practice, you’ll often use lab tools to reproduce issues, then validate improvements in field reporting.

2. Optimize Your Images

Images are frequently the LCP element, so image work is often the fastest path to improve LCP:

• Compress and serve modern formats (WebP/AVIF where supported).
• Use responsive images (srcset/sizes) to avoid shipping desktop-sized assets to mobile.
• Preload the likely LCP image (e.g., hero) and avoid lazy-loading it.
• Lazy-load below-the-fold images to reduce contention for bandwidth and main-thread work.

3. Minimize JavaScript Execution (Reduce INP)

INP is commonly driven by main-thread blocking and long tasks that delay event handling and rendering. To reduce INP, focus on:

• Break up long tasks (code-splitting, chunking work, yielding to the main thread).
• Reduce JS shipped and executed (remove dead code, trim dependencies, avoid heavy client-only widgets).
• Optimize event handlers (do less work per interaction; debounce thoughtfully; avoid forced synchronous layout).
• Watch SPA/CSR hydration cost: defer non-critical hydration, prefer partial hydration/islands where feasible.
• Govern third-party scripts (tag manager sprawl, chat widgets, A/B tools): load conditionally, defer, and audit regularly—this pairs well with a disciplined approach to minifying CSS and JavaScript.
• Consider Web Workers for CPU-heavy work that doesn’t need DOM access.

4. Use a Content Delivery Network (CDN)

A CDN reduces latency and improves cache hit rates, which can lower time-to-first-byte and help LCP—especially for global audiences. Ensure:

• Long-lived caching for static assets (immutable filenames).
• Brotli compression and HTTP/2 or HTTP/3 where available.
• Edge caching for HTML when appropriate (with safe cache variation).

5. Implement Server-Side Rendering (SSR)

SSR (or pre-rendering) can improve LCP by getting meaningful HTML on screen faster and reducing client-side work before content appears. To avoid trading LCP gains for INP regressions:

• Keep server-rendered markup lightweight.
• Avoid shipping large hydration bundles; hydrate only what needs interactivity.

6. Optimize CSS Delivery

Render-blocking CSS is a classic LCP bottleneck. To improve LCP without destabilizing layouts:

• Inline critical CSS for above-the-fold content.
• Defer non-critical CSS and remove unused rules.
• Use font-display: swap and preload key fonts; prefer variable fonts when it reduces requests.
• Minimize expensive style recalculation (complex selectors, excessive DOM changes), which can also impact INP.

7. Address Cumulative Layout Shift (Fix CLS)

To fix CLS, prevent late layout changes:

• Reserve space for images/iframes/ads (explicit dimensions or aspect-ratio).
• Avoid inserting banners or promos above existing content unless triggered by user action.
• Preload fonts or use metric-compatible fallbacks to reduce text reflow.

8. Monitor and Measure Performance

Use both lab and field data:

• Lab (diagnosis): Lighthouse and DevTools Performance panel to find long tasks, render-blocking resources, and layout shifts.
• Field (truth): PageSpeed Insights and the Chrome UX Report (CrUX) to see real-user LCP/INP/CLS distributions; INP is reported in PSI/CrUX when sufficient data exists.

For deeper insight, add RUM using Google’s web-vitals library to capture INP/CLS with context (route, component, interaction type), then correlate spikes with releases and third-party changes.

9. Optimize Mobile Experience

For many sites, mobile is the primary traffic and conversion surface, and it’s also where CPU/network constraints amplify CWV issues. Prioritize:

• Smaller bundles and fewer third-party tags on mobile breakpoints.
• Touch-friendly UI that avoids heavy interaction handlers.
• Testing on mid-tier Android devices (not just desktop emulation).

10. Continuous Improvement

Treat Core Web Vitals optimization as an ongoing workflow: set budgets (JS size, LCP resource timing), monitor field regressions, and review third-party additions like code changes. When you consistently improve LCP, reduce INP, and fix CLS, you build a faster site that users—and search engines—can trust.