Complete Core Web Vitals & Lighthouse Guide

Master Google metrics for a fast and well-ranked website

Core Web Vitals are essential web performance metrics for Google. This guide explains how to measure with Lighthouse, interpret your LCP/CLS/INP scores, and optimize your site to improve user experience and SEO.

< 2.5s

LCP Target

< 0.1

CLS Target

< 200ms

INP Target

90+

Lighthouse Score

The 3 Core Web Vitals Metrics

LCP (Largest Contentful Paint)

Loading time of largest visible element. Target: < 2.5s. Optimize images, server, cache.

CLS (Cumulative Layout Shift)

Visual stability of page. Target: < 0.1. Reserve space for images/fonts, avoid dynamic injections.

INP (Interaction to Next Paint)

Responsiveness to interactions. Target: < 200ms. Optimize JavaScript, limit long tasks > 50ms.

Lighthouse CI/CD

Integrate Lighthouse into your pipeline. Automated tests, performance budget, regression alerts.

Understanding Core Web Vitals

Core Web Vitals are 3 user-centric performance metrics that Google uses as ranking factors. They measure:

Loading: How fast your content loads (LCP)
Visual Stability: How stable your layout is (CLS)
Interactivity: How responsive your site is (INP)

1. LCP (Largest Contentful Paint)

LCP measures the loading performance of your page. It marks the point when the largest content element becomes visible.

What counts as LCP?

Hero images
Background images
Large text blocks
Video poster images

How to improve LCP

Quick Wins

Optimize and compress images (WebP, AVIF)
Implement lazy loading for below-the-fold images
Use a CDN for faster content delivery
Preload critical resources with <link rel="preload">
Minimize server response time (TTFB < 600ms)
Remove render-blocking resources

2. CLS (Cumulative Layout Shift)

CLS measures visual stability. It quantifies how much unexpected layout shifts occur during page load.

Common causes of CLS

Images without dimensions (width/height)
Ads, embeds, iframes without reserved space
Web fonts causing FOIT/FOUT
Dynamically injected content

How to improve CLS

Best Practices

Always include width and height attributes on images/videos
Reserve space for ads and embeds
Use font-display: swap for web fonts
Preload critical fonts
Use CSS aspect-ratio to reserve space
Avoid inserting content above existing content

3. INP (Interaction to Next Paint)

INP replaced FID in March 2024. It measures the overall responsiveness of your page to user interactions (clicks, taps, keyboard).

What affects INP?

Long JavaScript tasks (> 50ms)
Main thread blockage
Heavy DOM manipulation
Unoptimized event handlers

How to improve INP

Optimization Tips

Break up long tasks into smaller chunks
Use code splitting to reduce JS bundle size
Defer non-critical JavaScript
Use web workers for heavy computations
Minimize main thread work
Optimize third-party scripts

Measuring with Lighthouse

Lighthouse is an open-source tool from Google that audits performance, accessibility, SEO, and more.

How to run Lighthouse

Chrome DevTools: Open DevTools > Lighthouse tab > Generate report
Command Line: npm install -g lighthouse then lighthouse https://void.ma
PageSpeed Insights: Visit pagespeed.web.dev
CI/CD: Integrate Lighthouse CI for automated testing

Interpreting Lighthouse Scores

90-100: Excellent (green)
50-89: Needs improvement (orange)
0-49: Poor (red)

Lighthouse CI/CD Integration

Automate performance testing in your deployment pipeline to catch regressions early.

# Install Lighthouse CI
npm install -g @lhci/cli

# Run Lighthouse CI
lhci autorun

# GitHub Actions example
- name: Run Lighthouse CI
  uses: treosh/lighthouse-ci-action@v9
  with:
    urls: |
      https://void.ma
    uploadArtifacts: true

Core Web Vitals vs Lighthouse

Core Web Vitals (CrUX data) = Real user data from Chrome User Experience Report

Lighthouse (Lab data) = Simulated data in controlled environment

Both are important! Lighthouse helps you test and optimize, while Core Web Vitals show real-world performance.

Frequently Asked Questions

What is the difference between Core Web Vitals and Lighthouse?

Core Web Vitals are 3 specific metrics (LCP, CLS, INP) measured on real users (field data). Lighthouse is a Google audit tool that measures these metrics + 50 others in lab conditions. Lighthouse simulates, Core Web Vitals measure reality.

How to quickly improve my LCP score?

1) Optimize your largest image (WebP, lazy load, CDN, sizes). 2) Reduce server time (cache, CDN). 3) Eliminate render-blocking CSS/JS (critical CSS, defer/async). 4) Preload critical resources (preload, prefetch). 5) Use HTTP/2 or HTTP/3.

My CLS is bad, how to fix it?

CLS caused by: images without dimensions (add width/height), web fonts (font-display: swap), dynamically injected content (ads, embeds). Solutions: reserve space (aspect-ratio CSS), preload critical fonts, stabilize layout before React/Next.js hydration.

Why does my site have good Lighthouse score but bad Core Web Vitals?

Lighthouse tests in lab (fast connection, powerful device). Core Web Vitals measure real users (3G, old mobiles). Your site may be optimized for ideal conditions but not for 75% real users. Test on mobile 3G with Lighthouse throttling.

How to integrate Lighthouse into my CI/CD?

Use Lighthouse CI: npm install -g @lhci/cli. Configure lighthouserc.json with performance budgets. Integrate in GitHub Actions / GitLab CI. Lighthouse CI blocks merge if regression > 5 points. Add Slack webhook for alerts.

Need Help Optimizing Core Web Vitals?

Our performance experts can audit your site and implement optimizations to improve your Core Web Vitals scores.

Request a Performance Audit

🌱Eco-designed site