How to Measure Web Vitals
Core Web Vitals 2026: LCP (Largest Contentful Paint) < 2.5s, INP (Interaction to Next Paint, replaced FID March 2024) < 200ms, CLS (Cumulative Layout Shift) < 0.1. Field data (real users) — critical for SEO. Lab data (Lighthouse) for testing. Tools: web-vitals.js, Google CrUX, Search Console, Vercel Speed Insights, Enterno RUM.
Below: step-by-step, working examples, common pitfalls, FAQ.
Step-by-Step Setup
- Install
npm install web-vitals - Report on all 4 metrics in JS
- POST beacon to your analytics endpoint
- Aggregate p75 (75-percentile — Google threshold)
- Dashboard: filter by page, device, country
- Alert: p75 LCP > 2.5s on critical pages
- Cross-reference with Google Search Console CrUX data
Working Examples
| Scenario | Config |
|---|---|
| Basic web-vitals reporting | import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
fetch('/api/vitals', { method: 'POST', body, keepalive: true });
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics); |
| Enterno RUM beacon | <!-- Add to <head> -->
<script src="https://enterno.io/rum/beacon.js"
data-site="my-site"
defer></script>
<!-- Automatically collects CWV, sends to Enterno RUM dashboard --> |
| Vercel Speed Insights | # Next.js
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<SpeedInsights />
</body>
</html>
);
} |
| Fix slow LCP | <!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Lazy-load below-fold -->
<img src="/hero.webp" fetchpriority="high"> <!-- LCP candidate -->
<img src="/below.webp" loading="lazy"> |
| Fix CLS | /* Reserve space for images */
.hero-img {
aspect-ratio: 16 / 9;
width: 100%;
}
<!-- Or explicit size -->
<img src="hero.webp" width="1600" height="900" alt="..."> |
Common Pitfalls
- Only lab data (Lighthouse) — misses real-world slow devices. Field data from RUM essential
- INP replaces FID — old implementations still track FID. Update to web-vitals v3+
- p75 aggregate — not p50 (median hides slow tail). Google uses p75
- RUM overhead: beacon.js ~2 KB + send overhead. Use keepalive + sendBeacon API
- Privacy: do not send user_id in vitals. Aggregate without PII
Why teams trust us
How it works
Enter page URL
Lighthouse analyzes
Get CWV scores & tips
Why Does Site Speed Matter?
Page load speed directly impacts conversion, SEO rankings, and user satisfaction. Google uses Core Web Vitals as a ranking factor. Every extra second of load time cancost up to 7% in conversions.
Lighthouse Analysis
Google Lighthouse-based analysis: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (rendering), FID (interactivity), CLS (visual stability) — key Google metrics.
Resource Analysis
Breakdown by type: HTML, CSS, JavaScript, images, fonts. Size, request count, blocking resources.
Actionable Advice
Specific recommendations with savings estimates: image compression, caching, minification, etc.
Mobile vs Desktop
- Tested on Moto G Power emulation (slow CPU)
- Network: 4G (1.6 Mbps, 150ms RTT)
- Stricter speed scoring
- Google indexes mobile-first
- Priority for SEO optimization
- High CPU performance
- Fast connection without throttling
- Scores typically 20-40 points higher
- Important for B2B and corporate sites
- Use for baseline comparisons
Who uses this
SEO
Core Web Vitals for rankings
Developers
performance optimization
Marketers
speed = conversions
DevOps
performance regression
Common Mistakes
async/defer block rendering. Move to end or add attribute.Cache-Control, the browser reloads CSS/JS on every visit.Best Practices
loading="lazy" for images below the fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> for fonts and CSS. Reduces LCP by 200-500ms.Get more with a free account
Speed check history, competitor comparison and PageSpeed monitoring.
Sign up freeLearn more
Frequently Asked Questions
Field vs Lab data?
Field (CrUX, RUM): real users, slow devices, varied networks. Lab (Lighthouse): synthetic ideal conditions. Google SEO = field data.
Why did INP replace FID?
FID = first interaction (usually fast). INP = worst interaction per session → better UX signal. March 2024 migration.
RUM provider?
<a href="/en/rum">Enterno RUM</a> (free tier + pro), Vercel Speed Insights ($10/mo), Google CrUX (free but aggregated), SpeedCurve ($20+).
Check without install?
<a href="/en/speed">Enterno PageSpeed</a> for lab scores. Google PageSpeed Insights — shows CrUX field data.