Core Web Vitals: Measure and Improve for Better Web Performance
You've built a fast website, but users still complain about slowness. Or maybe your SEO rankings are stuck despite great content. 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 practical steps to improve each one.
What Are Core Web Vitals?
Core Web Vitals are three specific metrics that Google uses to quantify user experience:
- Largest Contentful Paint (LCP): Measures loading performance. It should occur within 2.5 seconds of when the page first starts loading.
- Interaction to Next Paint (INP): Measures responsiveness. It should be under 200 milliseconds for 75% of page visits.
- Cumulative Layout Shift (CLS): Measures visual stability. It should be less than 0.1.
These metrics are part of Google's page experience signals and can affect your search rankings. More importantly, they reflect real user experience—slow sites frustrate visitors and drive them away.
How to Measure Core Web Vitals
You can't improve what you don't measure. There are two main types of tools: lab tools (synthetic testing) and field tools (real user monitoring).
Lab Tools
- Lighthouse: Built into Chrome DevTools (Audits tab). Provides a score and specific opportunities.
- PageSpeed Insights: Web tool that combines lab and field data.
- WebPageTest: Advanced testing with custom locations and devices.
Field Tools
- Chrome User Experience Report (CrUX): Real-world data from Chrome users, available via PageSpeed Insights or BigQuery.
- web-vitals library: JavaScript library to measure metrics in your own analytics.
- Search Console: Core Web Vitals report shows group performance based on CrUX data.
Start with PageSpeed Insights to get a quick overview, then use the web-vitals library to track real user metrics over time.
Improving LCP (Largest Contentful Paint)
LCP is usually the largest image or text block above the fold. To improve it:
- Optimize images: Compress images, use modern formats like WebP or AVIF, and serve responsive images with
srcset. - Preload critical resources: Use
<link rel="preload">for hero images and fonts. - Eliminate render-blocking resources: Inline critical CSS, defer non-critical CSS and JavaScript.
- Use a CDN: Serve assets from locations closer to users.
- Enable caching: Set long cache times for static assets.
For images, tools like TryQuickToolBox's Image Compressor can help reduce file sizes without visible quality loss.
Improving INP (Interaction to Next Paint)
INP measures the time from a user interaction (click, tap, key press) to the next visual update. To improve it:
- Reduce JavaScript execution time: Break up long tasks, use
requestIdleCallbackorsetTimeoutto yield to the main thread. - Avoid large DOM sizes: Keep the DOM under 1,500 nodes and depth under 32 levels.
- Optimize event handlers: Debounce or throttle frequent events like scroll and resize.
- Use web workers: Move heavy computations off the main thread.
- Minimize third-party scripts: They often block the main thread.
Use Chrome DevTools Performance panel to identify long tasks and optimize them.
Improving CLS (Cumulative Layout Shift)
CLS measures unexpected layout shifts. To reduce it:
- Always include width and height attributes on images and videos: This reserves space.
- Reserve space for ads and embeds: Use CSS
aspect-ratioor fixed dimensions. - Avoid inserting content above existing content: Except in response to user interaction.
- Use font-display: swap: Prevents invisible text but may cause slight shifts; consider
font-display: optionalfor critical text. - Be careful with dynamic content: Load it below the fold or animate transitions smoothly.
Comparison of Core Web Vitals Metrics
| Metric | What it measures | Good threshold | Primary causes of poor scores |
|---|---|---|---|
| LCP | Loading performance | ≤ 2.5s | Slow server, render-blocking resources, large images |
| INP | Responsiveness | ≤ 200ms | Long tasks, heavy JavaScript, large DOM |
| CLS | Visual stability | ≤ 0.1 | Images without dimensions, dynamic content, web fonts |
Tools and Techniques for Ongoing Monitoring
Improving Core Web Vitals is not a one-time task. Set up continuous monitoring:
- Use the
web-vitalslibrary to send metrics to your analytics platform. - Set up alerts for when metrics exceed thresholds.
- Regularly run Lighthouse in CI/CD to catch regressions.
- Monitor CrUX data in Search Console for real-user trends.
For a quick check, use Chrome DevTools Lighthouse tab or PageSpeed Insights after each significant change.
FAQ
What are Core Web Vitals and why do they matter?
Core Web Vitals are three metrics (LCP, INP, CLS) that measure loading, interactivity, and visual stability. They matter because they reflect real user experience and are used by Google as a ranking signal.
How often should I measure Core Web Vitals?
Measure after every major code change, and set up continuous field monitoring to track real-user metrics over time. Lab tools like Lighthouse are good for quick checks, but field data shows actual user experience.
Can I improve Core Web Vitals without a developer?
Some improvements like compressing images can be done with tools, but most require code changes (e.g., adding width/height attributes, optimizing JavaScript). A developer or someone familiar with web performance is usually needed.
Ready to optimize your images for better LCP? Try our free Image Compressor to reduce file sizes without sacrificing quality.