DevTools Logo

Web Vitals Calculator

Web Vitals Calculator

Rate your Core Web Vitals against Google's thresholds — computed in your browser

Your measurements

Enter field or lab values for each metric

Good / Poor thresholds: LCP ≤2.5s / >4s · INP ≤200ms / >500ms · CLS ≤0.1 / >0.25

Examples

All metrics are Good

Input
LCP: 2200 ms
INP: 180 ms
CLS: 0.08
Output
{
  "LCP": "good",
  "INP": "good",
  "CLS": "good",
  "overall": "good"
}

Every value is at or below its Good threshold, so the overall assessment is Good.

All metrics need improvement

Input
LCP: 3000 ms
INP: 350 ms
CLS: 0.15
Output
{
  "LCP": "needs-improvement",
  "INP": "needs-improvement",
  "CLS": "needs-improvement",
  "overall": "needs-improvement"
}

Each value falls above its Good boundary but at or below its Poor boundary.

One Poor metric determines the overall rating

Input
LCP: 4100 ms
INP: 180 ms
CLS: 0.08
Output
{
  "LCP": "poor",
  "INP": "good",
  "CLS": "good",
  "overall": "poor"
}

A Poor LCP makes the overall result Poor even though INP and CLS are Good.

About this tool

The Web Vitals Calculator rates three Core Web Vitals measurements: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Enter LCP and INP in milliseconds and CLS as a unitless score to receive a Good, Needs improvement, or Poor rating for each metric.

The thresholds implemented by the component are LCP at 2,500 and 4,000 milliseconds, INP at 200 and 500 milliseconds, and CLS at 0.1 and 0.25. Values at the good boundary are Good, values above the good boundary through the poor boundary Need improvement, and values above the poor boundary are Poor.

The overall assessment uses the worst individual rating: any Poor metric makes the overall result Poor, otherwise any Needs improvement metric makes it Needs improvement, and only three Good metrics produce an overall Good result. Invalid, non-finite, and negative values are rated Poor, and all calculations stay in the browser.

How to use

  1. Collect the measurements

    Obtain LCP, INP, and CLS values from your field or lab measurement workflow.

  2. Enter each value

    Enter LCP and INP in milliseconds and enter CLS as its unitless decimal value.

  3. Read the metric ratings

    Review the Good, Needs improvement, or Poor badge shown beside each measurement.

  4. Check the overall result

    Use the overall assessment to identify the worst rating across all three metrics, then prioritize the metrics that prevent a Good result.

Use cases

Interpret a performance report

Enter the three measurements from a lab run or field report to translate raw numbers into consistent threshold ratings.

Prioritize performance work

Use the worst-rated metric to decide whether loading speed, interaction responsiveness, or visual stability needs attention first.

Check threshold boundary cases

Test values close to 2,500 ms, 200 ms, or 0.1 to confirm how an exact boundary is classified.

Compare optimization snapshots

Rate measurements before and after a change to see whether any metric moved into a better threshold band.

Common mistakes

Mistake:Entering LCP in seconds instead of milliseconds.

Fix:Convert seconds to milliseconds before entering LCP; for example, enter 2.5 seconds as 2500.

Mistake:Entering CLS as a percentage.

Fix:Use the unitless decimal score directly, such as 0.1, rather than 10 or 10%.

Mistake:Averaging the three metric ratings into an overall score.

Fix:Treat the overall result as the worst individual rating, which is exactly how this calculator derives it.

Mistake:Assuming a calculator result replaces real-user measurement.

Fix:Use measured field or lab values as the inputs; this tool classifies numbers but does not collect performance data from a page.

Frequently asked questions

Related guides

Turn a Lighthouse Report Into a Plan

Lighthouse produces dozens of audits — this is how to distill them into a ranked action list. Grading thresholds, the failed audits that matter, and prioritizing by estimated savings.

Core Web Vitals in 2026: LCP, INP, and CLS

What the three Core Web Vitals measure, their good/poor thresholds, why INP replaced FID, and the rule that decides whether your page passes.

References & standards

Related tools

.htaccess Generator

Build an Apache .htaccess — HTTPS redirects, rewrites, error pages, security headers, and basic auth

Ansible Playbook Generator

Build an Ansible playbook — hosts, vars, and tasks with modules — as YAML

Apache Config Generator

Build an Apache 2.4 VirtualHost — ServerName, DocumentRoot, Directory, aliases, and optional SSL

AWS Architecture Diagram

Drag-and-drop AWS service blocks, connect edges and export architecture diagrams as SVG

AWS Pricing Calculator

Estimate monthly AWS costs from static list prices with a Chart.js breakdown

Azure Architecture Diagram

Compose Azure architecture diagrams with VM, Storage, Functions, AKS blocks and SVG export