Core Web Vitals: Everything You Need to Know

Core Web Vitals are a set of specific metrics that Google considers important for a web page's overall user experience. They are part of Google's page experience signals used in ranking, making them critical for SEO.

The Core Metrics

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible content element (image, video, or text block) to load. It reflects perceived load speed.

• Good: ≤ 2.5 seconds
• Needs Improvement: 2.5 – 4.0 seconds
• Poor: > 4.0 seconds

Cumulative Layout Shift (CLS)

CLS measures the total amount of unexpected layout shifts that occur during the entire lifespan of the page. A layout shift happens when a visible element changes position unexpectedly — like when an ad loads and pushes content down.

• Good: ≤ 0.1
• Needs Improvement: 0.1 – 0.25
• Poor: > 0.25

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) in March 2024. It measures the latency of all interactions (clicks, taps, keyboard inputs) throughout the page's lifecycle, reporting the worst interaction.

• Good: ≤ 200 milliseconds
• Needs Improvement: 200 – 500 milliseconds
• Poor: > 500 milliseconds

Additional Important Metrics

First Contentful Paint (FCP)

FCP measures how long it takes for the first piece of content to appear on screen. While not a Core Web Vital, it's a key indicator of perceived performance.

• Good: ≤ 1.8 seconds
• Poor: > 3.0 seconds

Total Blocking Time (TBT)

TBT measures the total time between FCP and Time to Interactive where the main thread was blocked long enough to prevent input responsiveness. It correlates strongly with INP.

• Good: ≤ 200 milliseconds
• Poor: > 600 milliseconds

How to Improve LCP

1. Optimize images — Use WebP/AVIF formats, lazy-load below-the-fold images, and specify width/height attributes.
2. Preload critical resources — Use <link rel="preload"> for fonts, hero images, and critical CSS.
3. Minimize render-blocking resources — Defer non-critical JavaScript and inline critical CSS.
4. Use a CDN — Serve assets from edge servers close to your users.
5. Optimize server response time — Target TTFB under 800ms.

How to Improve CLS

1. Set explicit dimensions — Always include width and height on images and videos.
2. Reserve space for ads — Use CSS to allocate space for dynamic content like ads.
3. Avoid inserting content above existing content — Load dynamic elements at the bottom or in reserved spaces.
4. Use CSS contain — Prevent layout recalculations from propagating.

How to Improve INP

1. Break up long tasks — Split JavaScript work into smaller chunks using requestIdleCallback or scheduler.yield().
2. Reduce JavaScript execution time — Remove unused code, lazy-load non-critical scripts.
3. Optimize event handlers — Keep event callbacks fast and avoid synchronous DOM reads.
4. Use web workers — Offload heavy computation to background threads.

Measuring Core Web Vitals

Use DarnItSEO's performance tab to measure all Core Web Vitals in one scan. You can also use Google's PageSpeed Insights, Chrome DevTools Lighthouse panel, or the Chrome UX Report for field data.