Core Web Vitals: What They Are and How to Improve Them

What Are Core Web Vitals?

Core Web Vitals (CWV) are a set of metrics Google uses to measure user experience on the web. They focus on loading performance, interactivity, and visual stability. Since 2021, Core Web Vitals have been a ranking factor in Google Search, so improving them can help your SEO and user satisfaction.

The three Core Web Vitals are LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). Each has a "good," "needs improvement," and "poor" threshold.

LCP: Largest Contentful Paint

LCP measures how quickly the largest visible content element (usually an image, video, or text block) loads. It reflects perceived loading speed. Google considers LCP "good" when it occurs within 2.5 seconds.

• LCP under 2.5s: Good
• LCP 2.5s–4s: Needs improvement
• LCP over 4s: Poor

The LCP element is typically the hero image, a large heading, or a video. Optimizing it has the biggest impact on perceived performance.

INP: Interaction to Next Paint

INP (replacing FID in March 2024) measures responsiveness. It captures the time from a user interaction (click, tap, keypress) to the next visual update. Low INP means your page feels snappy; high INP means it feels sluggish.

• INP under 200ms: Good
• INP 200ms–500ms: Needs improvement
• INP over 500ms: Poor

INP is influenced by JavaScript execution. Long tasks, heavy scripts, and blocking main-thread work can hurt INP.

CLS: Cumulative Layout Shift

CLS measures visual stability. It quantifies unexpected layout shifts—when elements move as the page loads, causing users to misclick or lose their place. A low CLS score means a stable, predictable layout.

• CLS under 0.1: Good
• CLS 0.1–0.25: Needs improvement
• CLS over 0.25: Poor

Common causes include images and ads without dimensions, dynamically injected content, and web fonts causing text to reflow.

Measuring Core Web Vitals

You can measure CWV in several ways:

• PageSpeed Insights: Free tool that shows lab and field data for a URL.
• Chrome DevTools: Performance panel and Lighthouse for lab testing.
• Search Console: Core Web Vitals report shows field data (real user metrics) for your site.
• Chrome User Experience Report (CrUX): Field data used by PageSpeed Insights and Search Console.

Lab data (Lighthouse) is useful for debugging; field data (CrUX) reflects real users and is what Google uses for ranking.

Improving LCP

• Optimize images: Compress, use modern formats (WebP, AVIF), and serve appropriately sized images.
• Preload LCP element: Use rel="preload" for the LCP image or font.
• Reduce server response time: Use a fast host, CDN, and edge caching.
• Minimize render-blocking resources: Defer non-critical CSS and JavaScript.
• Use a CDN: Serve static assets from servers close to users.

Improving INP

• Break up long tasks: Split heavy JavaScript into smaller chunks so the main thread stays responsive.
• Defer non-critical JavaScript: Load scripts asynchronously or after initial render.
• Reduce JavaScript execution time: Remove unused code, lazy-load components.
• Use web workers: Offload heavy computation to background threads.
• Optimize third-party scripts: Audit and remove or defer non-essential scripts.

Improving CLS

• Set dimensions on images and videos: Use width and height attributes or CSS to reserve space.
• Reserve space for ads and embeds: Use a fixed container so content does not shift when they load.
• Avoid inserting content above existing content: Add new content below the fold or in reserved slots.
• Use font-display: optional or swap carefully: Ensure fallback fonts have similar metrics to avoid layout shifts.

Tools for Testing Core Web Vitals

• PageSpeed Insights: Quick check with lab and field data.
• Lighthouse: Built into Chrome DevTools; run audits locally.
• WebPageTest: Detailed performance testing with waterfall and filmstrip views.
• Chrome DevTools Performance panel: Record and analyze runtime performance.
• Search Console Core Web Vitals report: See how real users experience your pages.