DEV Community

Kui Luo
Kui Luo

Posted on

How to Check Your Website's Core Web Vitals in 5 Minutes

#webdev #programming #seo

Most developers check Core Web Vitals once, see green scores, and never look again. That's a mistake — Core Web Vitals fluctuate with every deployment.

Here's a quick, practical guide to auditing LCP, INP, and CLS without leaving Chrome DevTools.

What to Measure

Metric What It Measures Good Score Tool to Use
LCP Largest content paint Under 2.5s Performance tab
INP Interaction to next paint Under 200ms Event trace
CLS Cumulative layout shift Under 0.1 Layout shift panel

Step 1 — Open the Performance Panel

Press F12, go to the Performance tab. Check the "Web Vitals" checkbox at the top. Reload the page with Ctrl+Shift+R (hard reload) to bypass cache.

Step 2 — Read the LCP Value

After reload, look at the LCP marker in the timeline. It appears as a colored bar showing which element is the largest contentful paint — usually a hero image or heading block.

Common LCP problems I see in audits:

  • Unoptimized hero images: Serving 2MB JPEGs when 80KB WebP looks identical
  • Render-blocking CSS: 400KB stylesheet delaying first paint by 1.5s
  • Client-side rendering: Empty HTML shell waiting for JS bundle to hydrate

Step 3 — Check INP (Replaces FID)

Google replaced FID with INP in March 2024. INP measures the worst interaction latency throughout the entire page lifecycle, not just the first click.

To test it:

  1. Open the Performance tab and check "Web Vitals"
  2. Interact with the page naturally — click buttons, type in forms, open menus
  3. Watch the INP counter update in real-time
  4. Note the highest value recorded

INP above 200ms typically means:

  • Event handlers doing too much synchronous work
  • Main thread blocked by long tasks during user interaction
  • Heavy layout recalculations triggered by DOM changes

Step 4 — Measure CLS

In the Performance tab, enable the Layout Shift Regions checkbox. Reload the page and watch for red highlighted areas — those are layout shifts.

The top 3 CLS causes I find regularly:

  1. Images without explicit dimensions: Always set width and height attributes
  2. Dynamically injected content: Ads, modals, and late-loading widgets pushing existing content
  3. Web fonts with FOIT: Font swaps causing visible text reflow after load

Step 5 — Automate with PageSpeed Insights API

For continuous monitoring, use the free PageSpeed Insights API:

curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&strategy=mobile"
Enter fullscreen mode Exit fullscreen mode

This returns lab data for all three metrics. Extract the LCP, INP, and CLS values from the lighthouseResult.audits object.

Quick Reference

  • Check LCP after every image optimization
  • Test INP by clicking every interactive element on the page
  • Monitor CLS by enabling layout shift regions in DevTools
  • Automate checks with the PSI API in your CI/CD pipeline

Set up a 5-minute check after each deploy. It catches regressions before your users do.

Top comments (0)