Core Web Vitals (2024→2025 thresholds)

Metric	Good	Needs Improvement	Poor
LCP Largest Contentful Paint	= 2.5s	2.5→4s	> 4s
INP Interaction to Next Paint	= 200ms	200→500ms	> 500ms
CLS Cumulative Layout Shift	= 0.1	0.1→0.25	> 0.25

Test your site: PageSpeed Insights — web.dev/measure — Chrome DevTools ? Lighthouse panel

LCP — Largest Contentful Paint

Measures when the largest content element becomes visible. Poor LCP means slow loading hero image, render-blocking CSS/JS, or slow server response.

LCP Server response time (TTFB) is slow

TTFB (Time to First Byte) > 600ms hurts LCP. Often caused by slow backend, unoptimized database queries, or no caching.

1Enable server-side caching (Redis, Varnish, CDN edge cache).
2Optimize database queries — add indexes, reduce N+1 queries.
3Use a CDN (Cloudflare, Fastly, Vercel edge) to serve static assets closer to users.
4Upgrade hosting if shared hosting is the bottleneck.

TTFB goal: under 200ms for fast sites. Use webpagetest.org to break down TTFB.

LCP Render-blocking CSS or JavaScript

Browser can't paint LCP element until blocking CSS/JS loads and executes.

1Inline critical CSS (above-the-fold styles) directly in <head>.

<style>/* critical CSS: navbar, hero bg */</style>

2Load non-critical CSS asynchronously:

<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="non-critical.css"></noscript>

3Defer non-critical JavaScript: defer or async attribute.

<script src="analytics.js" defer></script>

Use our CSS Minifier to reduce CSS file size. For JS, use JS Minifier.

LCP Large, unoptimized hero image / video

LCP element is often a large image or video. If not optimized, it takes too long to download and render.

1Compress and resize to exact dimensions needed. Use modern formats:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="600" alt="..." loading="eager">
</picture>

2Dimensions: don't rely on CSS scaling. Ship an image close to its display size.
3Preload LCP image:

<link rel="preload" as="image" href="hero.webp" imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" imagesizes="100vw">

4Use loading="eager" for LCP image (default for above-the-fold), loading="lazy" for below-fold.

Use our Image Resizer to resize and optimize images. GIF Optimizer for animated content.

Target widths for responsive: 400, 800, 1200, 1600, 2000px. WebP is ~30% smaller than JPEG; AVIF is even smaller.

LCP No preconnect or DNS prefetch for critical origins

Third-party resources (CDNs, fonts, APIs) add DNS lookup, TCP, TLS handshake delays. preconnect warms up connections early.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

Preconnect to critical third parties: Google Fonts, CDNs, analytics (if you must). Don't overuse — each connection costs CPU/memory. crossorigin needed for fonts.

INP — Interaction to Next Paint (replaced FID)

Measures responsiveness: time from user interaction (click, tap, keypress) to next paint. Poor INP means UI feels laggy. Often caused by long JavaScript tasks blocking the main thread.

INP Long main-thread tasks block responsiveness

JavaScript running > 50ms delays paint after interaction. Break up heavy work or move off-main-thread.

1Break large tasks into chunks with setTimeout or requestIdleCallback:

function processChunk(items) {
  const chunk = items.splice(0, 50);
  chunk.forEach(processItem);
  if (items.length) {
    setTimeout(() => processChunk(items), 0);
  }
}

2Move expensive work to a Web Worker:

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* result */ };

// worker.js
self.onmessage = (e) => {
  const result = heavyCalc(e.data);
  self.postMessage(result);
};

3Debounce or throttle frequent event handlers (scroll, resize, mousemove).

Use async/await with setTimeout or requestAnimationFrame to yield to the browser. Chrome DevTools ? Performance panel identifies longest tasks.

INP JavaScript bundle too large

Large JS downloads, parses, and executes slowly, delaying interaction handlers. Code-split, tree-shake, and minify.

1Code-split: load only what's needed for current page.

import('./heavy-module.js').then(module => {
  module.init();
});

2Minify all JS — use our JS Minifier or build tool (Terser, esbuild).

3Lazy-load non-critical scripts with defer/async or after DOMContentLoaded.

4Use requestIdleCallback to schedule low-priority work during idle time.

Don't block the main thread. Any single task > 50ms risks poor INP. If a function takes 200ms, split it into four 50ms chunks with setTimeout or queueMicrotask.

CLS — Cumulative Layout Shift

Measures visual stability. Elements moving around unexpectedly cause poor CLS. Usually images without dimensions, dynamic content insertion, or fonts that shift text.

CLS Images without width/height attributes

Browser doesn't know image aspect ratio until it loads ? layout shifts when image renders.

<!-- Bad — no dimensions -->
<img src="photo.jpg" alt="...">

<!-- Good — explicit width & height -->
<img src="photo.jpg" width="800" height="600" alt="...">

<!-- For responsive: use CSS aspect-ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3; width: 100%; height: auto;">

If you don't know exact dimensions, compute aspect ratio. Example: 1200x600 ? aspect-ratio: 2/1. Modern CSS: aspect-ratio. Legacy: padding-bottom hack.

CLS Dynamic content inserted above existing elements

Banners, notifications, or ads that appear after page load push content down. Reserve space in advance.

1Reserve fixed-height container for dynamic content:

<div id="banner-container" style="min-height: 80px;"></div>

2Or inject content off-screen (fixed/absolute positioning) then animate in without affecting flow.

3For ads, use aspect-ratio to reserve ad slot dimensions before network response.

CLS whitelist: user-initiated interactions (clicks, scrolls) don't count. But auto-playing videos, cookie banners, or notification popups that appear immediately count toward CLS.

CLS Font loading causes FOIT / FOUT layout shift

Web fonts load after system font fallback. Switch causes text size/width to shift (FOUT) or invisible (FOIT).

1Use font-display: swap in @font-face:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

2Preload key fonts to avoid late discovery:

<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin>

3For hero text, consider system font stack to avoid any FOIT/FOUT.

System fonts: font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;. Zero CLS from font loading.

Detailed Guide: Optimizing Core Web Vitals in 2026

As we navigate the performance-driven web of 2026, Google's Core Web Vitals (CWV) have become the definitive metrics for user experience and search engine ranking. Comprised of Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS), these metrics measure loading speed, responsiveness, and visual stability. Achieving "good" scores is no longer just about technical excellence; it's about providing a seamless, frustration-free journey for your users. Our Fix Core Web Vitals guide provides actionable, framework-agnostic solutions to the most common performance bottlenecks, helping you deliver a world-class digital experience.

A key focus for 2026 is the transition from First Input Delay (FID) to the more comprehensive Interaction to Next Paint (INP). INP measures the latency of all interactions throughout a page's lifecycle, not just the first one. This shift requires developers to optimize long-running JavaScript tasks and ensure that the main thread remains responsive. Our guide offers specific strategies for breaking up "long tasks," using requestIdleCallback, and leveraging modern browser APIs like Web Workers to offload heavy processing.

Finally, consider the role of "Visual Stability" in user trust. High Cumulative Layout Shift (CLS) scores often result from images without dimensions or late-loading fonts, causing content to "jump" unexpectedly. This is not only annoying for users but can also lead to accidental clicks on ads or navigation elements. Our tool provides precise CSS and HTML techniques→like aspect-ratio boxes and font-display strategies→to eliminate layout shifts entirely. By combining these optimizations with the privacy-focused utilities of AllOmnitools, you can build a high-performance web presence that respects both the user's time and their data.

Quick Start Checklist

Why Choose AllOmnitools?

Frequently Asked Questions

What are the three main Core Web Vitals?

Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Why did Google replace FID with INP?

First Input Delay (FID) only measured the very first interaction. INP tracks the responsiveness of all user interactions throughout the entire visit.

How can I fix a high CLS score?

Provide explicit width/height attributes for images/videos, reserve space for late-loading ads, and use font-display: swap to prevent FOIT.

Is my data safe when using this guide?

Absolutely. AllOmnitools is "local-first." All information and code snippets are processed locally in your browser for maximum privacy.

Do Core Web Vitals affect SEO?

Yes. Google uses CWV as a direct ranking signal. Sites that meet the "good" thresholds across all three metrics often see better visibility in search results.

Fix Core Web Vitals