Core Web Vitals: Measure and Improve Web Performance

You’ve built a fast website, but users still complain about slowness. Or maybe your SEO rankings dropped after a Google update. The culprit might be Core Web Vitals—Google’s metrics for user experience. In this guide, you’ll learn what they are, how to measure them, and concrete steps to improve them.

What Are Core Web Vitals?

Core Web Vitals are three specific metrics that quantify key aspects of user experience: loading, interactivity, and visual stability. They are part of Google’s Page Experience signal for ranking.

• Largest Contentful Paint (LCP): Measures loading performance. It marks the time when the largest content element (image, video, or text block) becomes visible. Aim for LCP under 2.5 seconds.
• First Input Delay (FID): Measures interactivity. It records the time from when a user first interacts (e.g., clicks a link) to when the browser responds. Aim for FID under 100 milliseconds.
• Cumulative Layout Shift (CLS): Measures visual stability. It quantifies unexpected layout shifts during page load. Aim for CLS under 0.1.

Google also uses other metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP) as diagnostics, but LCP, FID, and CLS are the core three.

How to Measure Core Web Vitals

You can measure these metrics in two ways: in the lab (synthetic testing) and in the field (real-user monitoring). Both are valuable.

Lab Measurement

Tools like Lighthouse (built into Chrome DevTools) and WebPageTest simulate a page load and provide scores. They’re great for debugging because they give detailed diagnostics.

// Run Lighthouse in Chrome DevTools: Open DevTools → Lighthouse tab → Generate report.
// Or use the CLI:
// npm install -g lighthouse
// lighthouse https://example.com --view

Field Measurement

Real-user metrics come from actual visitors. The Chrome User Experience Report (CrUX) provides anonymized data for public sites. You can also use JavaScript APIs to collect your own field data.

// Example: Using web-vitals library to log metrics
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

Send these metrics to your analytics endpoint to track performance over time.

Improving LCP

LCP is often the most impactful metric. To improve it, focus on the largest element—usually a hero image or heading.

1. Optimize images: Compress images, use modern formats like WebP or AVIF, and specify dimensions to avoid layout shifts. Tools like the image compressor can help reduce file size without quality loss.
2. Preload critical resources: Use <link rel="preload"> for the LCP image or font.
3. Reduce server response time: Use a CDN, enable caching, and optimize backend code. TTFB is a component of LCP.
4. Eliminate render-blocking resources: Defer non-critical CSS and JavaScript.

Example: Preload your hero image:

<link rel="preload" as="image" href="/hero.webp">

Improving FID

FID measures responsiveness. A high FID means the main thread is busy when the user tries to interact.

1. Break up long tasks: Split JavaScript into smaller chunks using setTimeout or requestIdleCallback.
2. Optimize event handlers: Debounce or throttle expensive operations.
3. Reduce JavaScript execution time: Remove unused code, code-split, and defer non-critical scripts.
4. Use web workers: Offload heavy computations to a worker thread.

Example: Defer non-critical JavaScript:

<script src="#" defer></script>

Improving CLS

CLS is about visual stability. Unexpected shifts annoy users and cause misclicks.

1. Always include width and height attributes on images and videos.
2. Reserve space for ads and embeds: Use CSS aspect-ratio or fixed-size containers.
3. Avoid inserting content above existing content unless it’s in response to user interaction.
4. Use CSS transforms for animations instead of properties that trigger layout.

Example: Reserve space for an image:

<img src="#" width="800" height="600" alt="...">

Tools and Workflow

Start with lab tools to identify issues, then validate with field data. Here’s a simple workflow:

1. Run Lighthouse in Chrome DevTools to get a baseline.
2. Fix the most impactful issues (usually LCP).
3. Deploy changes and monitor field data via CrUX or your own RUM.
4. Iterate: performance is ongoing.

For quick checks, use online tools like PageSpeed Insights, which combines lab and field data.

FAQ

What are the current thresholds for Core Web Vitals?

As of now, Google considers LCP ≤ 2.5s, FID ≤ 100ms, and CLS ≤ 0.1 as “good.” These thresholds may evolve, so check Google’s official documentation for updates.

Do Core Web Vitals directly affect SEO rankings?

Yes, they are part of Google’s Page Experience signal. However, relevance and quality content remain more significant. Core Web Vitals are a tiebreaker or a factor when other signals are equal.

How often should I measure Core Web Vitals?

Measure after major changes and monitor field data continuously. Lab tests are quick, but field data reflects real user experiences across devices and networks.

Ready to optimize your images for better LCP? Try our free image compressor to reduce file sizes without sacrificing quality.