Core Web Vitals: Measure and Improve Web Performance

You've built a modern web app, but users complain it feels slow. Search rankings are slipping, and you're not sure why. The culprit might be poor Core Web Vitals—Google's metrics for user experience. In this guide, you'll learn what they are, how to measure them, and most importantly, how to improve them with actionable steps.

What Are Core Web Vitals?

Core Web Vitals are a set of specific metrics that Google uses to evaluate the user experience of a webpage. They focus on loading, interactivity, and visual stability:

• Largest Contentful Paint (LCP): Measures loading performance. The time it takes for the largest content element (e.g., hero image, heading) to become visible. Good: ≤ 2.5 seconds.
• First Input Delay (FID): Measures interactivity. The time from when a user first interacts (e.g., clicks a button) to when the browser can respond. Good: ≤ 100 milliseconds.
• Cumulative Layout Shift (CLS): Measures visual stability. Quantifies unexpected layout shifts during loading. Good: ≤ 0.1.

These metrics are part of Google's page experience signals and can affect search rankings. But more importantly, they reflect real user satisfaction.

How to Measure Core Web Vitals

You need both lab and field data to get a complete picture. Lab data (synthetic) helps debug issues, while field data (real user monitoring) shows actual performance.

Lab Tools

• Lighthouse: Built into Chrome DevTools. Run an audit to get scores and opportunities.
• PageSpeed Insights: Combines lab and field data for a URL.
• WebPageTest: Advanced testing with custom locations and devices.

Field Tools

• Chrome User Experience Report (CrUX): Public dataset of real-user metrics. Access via PageSpeed Insights or BigQuery.
• web-vitals JavaScript library: Add to your site to collect real-user metrics and send to your analytics.
• Search Console: Core Web Vitals report shows group performance based on CrUX data.

Here's how to use the web-vitals library to log metrics:

import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Improving LCP

LCP is often the most challenging metric. Focus on these areas:

1. Optimize images: Compress images, use modern formats like WebP or AVIF, and serve responsive images with srcset. Lazy-load offscreen images.
2. Preload critical resources: Use <link rel="preload"> for hero images, fonts, and key CSS.
3. Reduce server response time: Use a CDN, enable caching, and optimize backend code.
4. Eliminate render-blocking resources: Inline critical CSS, defer non-critical JS, and avoid large CSS files.
5. Use a CDN: Serve assets from edge locations closer to users.

Improving FID

FID is about responsiveness. Long tasks block the main thread, delaying interactivity.

1. Break up long tasks: Use setTimeout or requestIdleCallback to yield to the main thread.
2. Optimize JavaScript: Code-split, tree-shake, and defer non-critical scripts.
3. Use web workers: Move heavy computations off the main thread.
4. Reduce third-party impact: Audit and limit third-party scripts.

Improving CLS

CLS is caused by elements shifting during load. Prevent it by:

1. Always include width and height attributes on images and videos. This reserves space.
2. Reserve space for ads and embeds: Use CSS aspect-ratio or fixed containers.
3. Avoid inserting content above existing content: Except in response to user interaction.
4. Use CSS transforms for animations: Instead of properties that trigger layout.
5. Preload fonts: Use font-display: swap to avoid invisible text and layout shifts.

Comparison of Core Web Vitals Metrics

Practical Workflow to Improve Core Web Vitals

Follow this step-by-step process:

1. Measure: Use PageSpeed Insights to get a baseline for both lab and field data.
2. Identify issues: Look at the opportunities and diagnostics in Lighthouse.
3. Prioritize: Focus on the metric with the worst score first.
4. Implement fixes: Apply the optimizations listed above.
5. Test: Re-run Lighthouse and check field data after deployment.
6. Monitor: Set up real-user monitoring with the web-vitals library and track over time.

FAQ

What are the current thresholds for Core Web Vitals?

For LCP, good is ≤ 2.5s, needs improvement is ≤ 4s, poor is > 4s. For FID, good is ≤ 100ms, needs improvement is ≤ 300ms, poor is > 300ms. For CLS, good is ≤ 0.1, needs improvement is ≤ 0.25, poor is > 0.25.

How often should I measure Core Web Vitals?

Monitor field data continuously and run lab tests after significant changes. Google updates CrUX data monthly, so check Search Console regularly.

Can I improve Core Web Vitals without a developer?

Some fixes like image compression can be done with tools, but many require code changes. Consider using a performance optimization plugin if you're on a CMS like WordPress.

Ready to optimize your images for better LCP? Try our Image Compressor to reduce file sizes without losing quality.