Live Web Vitals Monitor - Online Real‑Time LCP, INP, CLS

Core Web Vitals are Google's key performance metrics for measuring real-world user experience on the web.

LCP (Largest Contentful Paint) measures how long it takes for the largest visible content element (hero image, heading, video) to render. It reflects perceived load speed.

INP (Interaction to Next Paint) measures the latency of all user interactions (clicks, taps, key presses) throughout a page's lifecycle, reporting the worst interaction. It replaced FID in March 2024.

CLS (Cumulative Layout Shift) quantifies visual stability — how much content unexpectedly shifts during page load. A high CLS frustrates users who might click the wrong button.

According to Google's official guidelines (as of 2024):

Good LCP ≤ 2,500ms — the page feels fast to users.
Needs Improvement LCP 2,501ms – 4,000ms — room for optimization.
Poor LCP > 4,000ms — significant delays, users may abandon.

Good INP ≤ 200ms — interactions feel instant.
Needs Improvement INP 201ms – 500ms — noticeable lag.
Poor INP > 500ms — sluggish experience.

Good CLS ≤ 0.1 — minimal layout shifts.
Needs Improvement CLS 0.11 – 0.25 — some unexpected movement.
Poor CLS > 0.25 — jarring layout instability.

This tool uses the web-vitals JavaScript library (v4) by Google, which leverages the browser's PerformanceObserver API to capture real user metrics directly in your browser.

• LCP is captured when the largest content element finishes rendering.
• INP is tracked as you interact with the page — the slowest interaction is reported.
• CLS accumulates every time a layout shift occurs during the page lifecycle.

Data updates in real time and is stored locally in your browser (localStorage). No data is sent to any server.

INP (Interaction to Next Paint) requires actual user interactions to be measured — such as clicks, taps, or keyboard input. If you just loaded the page and haven't clicked anything yet, there is no interaction data to report.

Try this: Click the buttons on this page, type in the URL input field, or interact with the accordion FAQ items. The INP value will update after your interactions are processed.

This tool measures the Web Vitals of the page you are currently on. To test a different website:

1. Navigate to that website in your browser.
2. Open this tool again on that page.
3. The metrics will reflect that page's real-world performance in your browser.

Alternatively, use the "Track This URL" button to label your current session — it helps you organize measurements when testing multiple pages. For lab-based testing, consider using Google PageSpeed Insights or Lighthouse.

Improve LCP: Optimize server response times (use CDN, caching), preload key images, use efficient image formats (WebP, AVIF), remove render-blocking resources, and minimize main-thread work during load.

Improve INP: Break up long JavaScript tasks (yield to the browser), debounce event handlers, use requestAnimationFrame for visual updates, avoid synchronous layout calculations, and consider using a Web Worker for heavy computation.

Improve CLS: Always set explicit width and height on images and videos, reserve space for dynamic content (ads, embeds), avoid injecting new content above existing content, and use transform animations instead of layout-triggering properties.

No, INP replaced FID (First Input Delay) as a Core Web Vital in March 2024.

• FID only measured the first user interaction's delay — missing poor experiences later in the page lifecycle.
• INP measures all interactions throughout the page visit and reports the worst (or near-worst) latency — giving a more comprehensive picture of interactivity.

This change means websites need to ensure consistent responsiveness, not just a fast first impression.