How to Monitor Your Website's Core Web Vitals (Free Tools)
Core Web Vitals are Google's page experience ranking signal, and you can measure them without spending a dollar. This guide covers every free tool, what each metric means, how to fix failing scores, and a monitoring workflow that keeps your site fast.
Web hosting enthusiast who tests providers and breaks down features, pricing, and real world speed
Key Thresholds at a Glance
⚡ LCP (Loading)
≤ 2.5 seconds
Largest element fully rendered
👆 INP (Interactivity)
≤ 200 milliseconds
Click/tap to visual response
📐 CLS (Stability)
≤ 0.1 score
No unexpected layout shifts
What Are Core Web Vitals?
Core Web Vitals (CWV) are three specific metrics Google uses to measure real-world user experience on your website. They focus on loading speed, interactivity, and visual stability: the three things that frustrate users most when they're poor.
| Metric | Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | How fast the main content loads | ≤ 2.5s | 2.5–4.0s | > 4.0s |
| INP (Interaction to Next Paint) | How fast the page responds to input | ≤ 200ms | 200–500ms | > 500ms |
| CLS (Cumulative Layout Shift) | How much the layout moves unexpectedly | ≤ 0.1 | 0.1–0.25 | > 0.25 |
Important: Google evaluates CWV using the 75th percentile of real user data (field data from Chrome users over 28 days). This means 75% of your visitors must have a good experience, not just the average.
Why Core Web Vitals Matter for SEO
of mobile users abandon a site that takes more than 3 seconds to load (Google research)
longer sessions on pages that pass all three CWV thresholds vs. pages that fail (Chrome UX data)
fewer page abandonments when sites meet CWV thresholds (Google case studies)
CWV is a confirmed ranking factor since June 2021, acts as a tiebreaker between equally relevant pages
Some rich results (Top Stories) require passing CWV to be eligible
LCP: Largest Contentful Paint
LCP measures when the largest visible element in the viewport finishes rendering, typically a hero image, heading block, or video poster. It's the metric most affected by hosting quality and image optimization.
| LCP Phase | What Happens | Target Time | Common Fix |
|---|---|---|---|
| TTFB (server response) | Browser sends request → server responds | ≤ 800ms | Better hosting, CDN, edge caching |
| Resource load delay | Time before LCP resource starts downloading | ≤ 100ms | Preload hero image, inline critical CSS |
| Resource load time | Time to download the LCP resource | ≤ 800ms | Compress images, use WebP/AVIF, resize |
| Render delay | Time between download and paint | ≤ 100ms | Remove render-blocking JS, font-display: swap |
INP: Interaction to Next Paint
INP replaced FID in March 2024. While FID only measured the delay before the browser started processing your first interaction, INP measures the full latency of every interaction (from input to visual update ) and reports the worst one (at the 98th percentile).
| INP Phase | What's Measured | Common Cause of Slowness |
|---|---|---|
| Input delay | Time from user interaction to event handler start | Long main-thread tasks (>50ms), heavy JS execution |
| Processing time | Time spent in event handlers | Complex state updates, synchronous DOM reads/writes |
| Presentation delay | Time from handler completion to next paint | Large DOM trees (>1,500 nodes), forced reflow/layout |
CLS: Cumulative Layout Shift
CLS quantifies how much visible content shifts unexpectedly during page load. Every time an element moves without user interaction, it contributes to the CLS score. The most common culprits are images without dimensions, late-loading ads, and dynamically injected content.
| CLS Cause | Why It Shifts | Fix |
|---|---|---|
| Images without width/height | Browser doesn't know size until loaded → content jumps | Always set width and height attributes or use CSS aspect-ratio |
| Web fonts (FOUT/FOIT) | Fallback font renders → custom font loads → text reflows | font-display: swap + preload key fonts + size-adjust |
| Ads / embeds / iframes | Injected after page load → pushes content down | Reserve space with min-height or aspect-ratio containers |
| Dynamically injected content | Banners, cookie notices, notifications inserted above viewport | Insert below the fold or use transform animations (no layout shift) |
| Late-loading CSS | Stylesheets load after render → layout recalculates | Inline critical CSS, preload important stylesheets |
Free CWV Tools Compared
| Tool | Data Type | Scope | Best For | Limitation |
|---|---|---|---|---|
| PageSpeed Insights | Field + Lab | Single URL | Quick diagnosis + real user data | One URL at a time; no trend tracking |
| Google Search Console | Field only | Entire site | Site-wide CWV monitoring + URL grouping | No debugging details; delayed data (28-day) |
| Lighthouse (DevTools) | Lab only | Single URL | Debugging specific issues + actionable fixes | Simulated, doesn't reflect real users |
| web-vitals JS library | Field (RUM) | Your analytics | Continuous real-user monitoring + custom events | Requires code integration + analytics platform |
| CrUX Dashboard | Field only | Domain-level | Monthly trend charts + competitor comparison | Only domains with enough traffic; monthly updates |
| Web Vitals Extension | Lab | Current page | Instant CWV overlay while browsing | Your device only; not real user data |
| DebugBear (free tier) | Lab + Field | 3 pages | Automated monitoring + historical charts | Limited to 3 URLs on free plan |
| Treo Site Speed | Field only | Domain-level | CrUX data visualization + page-level breakdown | Depends on CrUX data availability |
Google PageSpeed Insights
URL: pagespeed.web.dev: The single most useful CWV tool. It combines field data (from CrUX, what Google actually uses for ranking) with lab data (Lighthouse, for debugging).
Enter your URL
Test both mobile and desktop. Google evaluates mobile CWV for mobile search rankings and desktop CWV for desktop rankings.
Check the field data section first
Look at 'Discover what your real users are experiencing': this shows the 75th percentile CWV from Chrome users. If your URL has enough traffic, you'll see green/yellow/red indicators for LCP, INP, CLS.
Review Lighthouse diagnostics
Scroll to the 'Diagnose performance issues' section. Each audit has an estimated time saving and priority level. Focus on the biggest wins first.
Check the 'Opportunities' section
These are specific actions: serve images in WebP, eliminate render-blocking resources, reduce unused JavaScript, etc. Each shows estimated savings in seconds.
Google Search Console CWV Report
Search Console's Core Web Vitals report is the only tool that shows site-wide CWV status across all your pages using real field data. Navigate to Experience → Core Web Vitals.
| Feature | What It Shows | How to Use It |
|---|---|---|
| URL grouping | Groups similar URLs by template (e.g., all blog posts) | Fix one page in the group → validate fix → it applies to all similar pages |
| Mobile vs Desktop split | Separate CWV assessments for each device type | Prioritize mobile, Google uses mobile-first indexing for rankings |
| Trend chart | 28-day rolling view of Good/Needs Improvement/Poor URLs | Watch for regressions after deployments or plugin updates |
| Issue details | Specific failing metric + affected URL count | Click into each issue to see example URLs for debugging |
| Validate fix button | Triggers Google to re-evaluate pages after you fix issues | Click after deploying fixes, GSC re-checks within 28 days |
Lighthouse (Chrome DevTools)
Lighthouse is the best debugging tool for CWV. It runs in a simulated environment and gives you specific, actionable recommendations with estimated time savings.
Use Incognito mode
Extensions can skew results by injecting scripts and modifying the DOM. Always test in an Incognito window.
Test mobile mode
Lighthouse simulates a mid-tier phone on 4G. Desktop scores are almost always higher, focus on mobile for SEO.
Run 3–5 times
Lab results vary between runs. Average multiple runs or use the median for reliable results.
Check the Performance trace
Click 'View Trace' to see a detailed timeline, find exactly which resource or script is blocking LCP or causing layout shifts.
Use the Treemap
Click 'View Treemap' to visualize JavaScript bundle sizes, find the largest modules to code-split or lazy-load.
web-vitals JavaScript Library
Google's open-source web-vitals library (npm) lets you collect real user metrics (RUM) from every visitor and send them to your analytics platform.
Basic setup (send to Google Analytics 4)
import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToGA4(metric) {
gtag('event', metric.name, {
value: Math.round(metric.name === 'CLS'
? metric.delta * 1000 : metric.delta),
event_label: metric.id,
metric_rating: metric.rating, // good|needs-improvement|poor
non_interaction: true,
});
}
onLCP(sendToGA4);
onINP(sendToGA4);
onCLS(sendToGA4);Why this matters: CrUX and Search Console only report data for pages with enough Chrome traffic. The web-vitals library captures data from every visitor, giving you complete coverage and the ability to segment by page, device, geography, or connection speed.
Chrome UX Report (CrUX) & Dashboard
CrUX is the dataset behind PageSpeed Insights and Search Console. You can query it directly via BigQuery or use the free CrUX Dashboard in Looker Studio for monthly trend charts.
| CrUX Access Method | Best For | Cost |
|---|---|---|
| CrUX Dashboard (Looker Studio) | Monthly trend charts, competitor comparison, easy sharing | Free |
| CrUX API | Programmatic access, custom dashboards, CI/CD integration | Free (quota limits) |
| BigQuery (CrUX dataset) | Advanced analysis, cross-origin queries, custom percentiles | Free 1TB/mo + $5/TB after |
| PageSpeed Insights API | Automated testing in CI/CD pipelines, batch URL analysis | Free (quota limits) |
Other Free Tools Worth Using
Web Vitals Chrome Extension : Chrome Web Store
Real-time CWV overlay on every page you visit. Shows LCP, INP, CLS in the toolbar. Great for quick spot-checks during development.
GTmetrix (free tier) : gtmetrix.com
Lighthouse-based analysis with waterfall charts and historical tracking (1 URL, daily). Good for monitoring a single critical page.
WebPageTest : webpagetest.org
Advanced lab testing with filmstrip view, connection throttling, and multi-location testing. Best for deep debugging.
Unlighthouse : unlighthouse.dev
Open-source tool that crawls your entire site and runs Lighthouse on every page. Generates a single dashboard with all scores.
Perfume.js : npm: perfume.js
Lightweight RUM library (alternative to web-vitals) with built-in reporting to analytics platforms. Measures CWV + custom metrics.
How to Fix Poor LCP
| Fix | Impact | Difficulty | Implementation |
|---|---|---|---|
| Upgrade hosting / add CDN | High (500ms–2s) | Easy | Switch to managed hosting with edge caching; add Cloudflare (free) |
| Preload LCP image | High (200ms–800ms) | Easy | <link rel="preload" as="image" href="/hero.webp"> in <head> |
| Serve images in WebP/AVIF | High (30–80% smaller) | Easy | Use <picture> with WebP fallback; or auto-convert via CDN |
| Inline critical CSS | Medium (100–300ms) | Medium | Extract above-the-fold CSS into <style> in <head>; defer the rest |
| Remove render-blocking JS | Medium (200–500ms) | Medium | Add defer/async to <script> tags; code-split with dynamic imports |
| Enable HTTP/2 or HTTP/3 | Medium (100–300ms) | Easy | Most CDNs enable by default; check server config for origin |
| Set fetchpriority='high' on LCP image | Medium (50–200ms) | Easy | Add fetchpriority="high" to your hero <img> element |
| Use font-display: swap | Low (50–100ms) | Easy | Prevents invisible text while custom fonts load |
How to Fix Poor INP
| Fix | Impact | Implementation |
|---|---|---|
| Break up long tasks (>50ms) | High | Use setTimeout, requestIdleCallback, or scheduler.yield() to split work |
| Reduce JavaScript bundle size | High | Code-split with dynamic import(); tree-shake unused code; lazy-load routes |
| Debounce/throttle event handlers | Medium | Limit scroll, resize, input handlers to 100–200ms intervals |
| Use CSS containment | Medium | contain: layout style paint on isolated components to limit reflow scope |
| Reduce DOM size | Medium | Target <1,500 nodes. Virtualize long lists (react-window, tanstack-virtual) |
| Move work to Web Workers | High | Offload parsing, computation, or data transformation off the main thread |
| Avoid forced synchronous layouts | Medium | Don't read layout properties (offsetHeight) then write (style changes) in a loop |
| Use content-visibility: auto | Medium | Browser skips rendering off-screen content until needed, reduces initial rendering work |
How to Fix Poor CLS
| Fix | Impact | Implementation |
|---|---|---|
| Set explicit width/height on images & video | High | Always include width and height attributes on <img> and <video> elements |
| Use aspect-ratio CSS | High | aspect-ratio: 16/9 on containers for responsive media without shifts |
| Reserve space for ads/embeds | High | Set min-height on ad containers before they load |
| Preload fonts + font-display: swap | Medium | Use <link rel="preload" as="font"> + size-adjust for fallback fonts |
| Avoid inserting content above viewport | Medium | Banners and notifications should appear below fold or use overlay/transform |
| Use transform for animations | Low | transform: translateY() instead of top/margin changes, no layout shift |
| Load CSS synchronously | Medium | Critical CSS inline in <head>; avoid dynamically injecting stylesheets late |
Recommended Monitoring Workflow
| Frequency | Tool | Action |
|---|---|---|
| Every deploy | Lighthouse CI (in CI/CD pipeline) | Fail the build if performance score drops below threshold (e.g., 80) |
| Daily | web-vitals JS → analytics dashboard | Monitor real-user CWV trends; alert on regressions > 10% |
| Weekly | Google Search Console → CWV report | Check for new failing URL groups; validate previous fixes |
| Monthly | PageSpeed Insights on top 10 pages | Deep audit of highest-traffic pages; document scores |
| Monthly | CrUX Dashboard (Looker Studio) | Review monthly trend charts; compare against competitors |
| Quarterly | Unlighthouse full-site crawl | Audit every page for CWV regressions; prioritize fixes by traffic |
Hosting Impact on Core Web Vitals
| Hosting Type | Typical TTFB | LCP Impact | CWV Grade |
|---|---|---|---|
| Shared hosting (budget) | 300–800ms | Adds 300ms–800ms to LCP baseline | ⚠️ Often fails LCP |
| Managed WordPress (SiteGround, Kinsta) | 80–200ms | Minimal overhead, server-level caching helps | ✅ Usually passes |
| VPS (untuned) | 200–500ms | Depends on your config, no automatic optimization | ⚠️ Mixed results |
| Edge hosting (Vercel, Cloudflare Pages) | 30–80ms | Excellent, content served from nearest edge location | ✅ Best LCP scores |
| CDN + origin (Cloudflare, Fastly) | 50–150ms | Static assets cached at edge; origin only for dynamic | ✅ Great for static content |
Core Web Vitals Optimization Checklist
| Category | Action | Metric Helped |
|---|---|---|
| Server | Use managed hosting or CDN with TTFB < 200ms | LCP |
| Server | Enable HTTP/2 or HTTP/3 (QUIC) | LCP |
| Server | Enable Brotli compression | LCP |
| Images | Serve WebP/AVIF with explicit width/height | LCP + CLS |
| Images | Preload hero image with <link rel="preload"> | LCP |
| Images | Lazy-load below-fold images | LCP |
| CSS | Inline critical CSS; defer non-critical | LCP |
| CSS | Use font-display: swap + preload fonts | LCP + CLS |
| JavaScript | Defer/async all non-critical scripts | LCP + INP |
| JavaScript | Code-split with dynamic import() | INP |
| JavaScript | Break long tasks into <50ms chunks | INP |
| Layout | Set width/height on all media elements | CLS |
| Layout | Reserve space for ads/embeds | CLS |
| Monitoring | Install web-vitals JS library | All |
| Monitoring | Set up Lighthouse CI in deployment pipeline | All |
| Monitoring | Review Search Console CWV report weekly | All |
Frequently Asked Questions
What are the three Core Web Vitals in 2026?
Do Core Web Vitals affect Google rankings?
What's the difference between lab data and field data?
How often should I check Core Web Vitals?
Can my hosting provider affect Core Web Vitals?
Is a Lighthouse score of 90+ necessary?
What's the best free tool for monitoring Core Web Vitals?
How long does it take to see CWV improvements in search rankings?
Need Faster Hosting for Better CWV?
Your hosting provider directly impacts LCP. Find a host with sub-200ms TTFB, built-in CDN, and edge caching to pass Core Web Vitals effortlessly.
Find Fast Hosting