How Lighthouse Calculates Core Web Vitals in Chromium

This article explains how the Lighthouse auditing tool, built directly into Chromium-based browsers, measures and calculates Core Web Vitals and overall performance scores. It covers the simulated testing environment, the specific metrics tracked—including how lab proxies replace real-world interaction metrics—the statistical curves used to grade raw data, and the weighting system that generates the final 0 to 100 score.

Lab Data vs. Field Data

To understand Lighthouse calculations, you must first understand that Lighthouse is a "lab" tool. Real-world Core Web Vitals are measured using "field" data from actual users. Because Lighthouse runs in a controlled, automated environment without a real human clicking or scrolling, it must adapt how it measures the three Core Web Vitals:

  • Largest Contentful Paint (LCP): Measured normally. It tracks the time it takes for the largest text block or image to become visible.
  • Cumulative Layout Shift (CLS): Measured during the initial page load only, calculating unexpected movement of visible elements.
  • Interaction to Next Paint (INP): Lighthouse cannot measure INP directly because it requires real user interactions. Instead, Lighthouse measures Total Blocking Time (TBT) as a proxy. TBT measures the total amount of time the main browser thread is blocked long enough to prevent input responsiveness.

Step 1: Gathering Raw Metrics via Simulation

When you initiate a Lighthouse audit in Chromium DevTools, the browser does not just time the page load on your current hardware and internet speed. By default, it uses an engine called Lantern to simulate a mid-tier mobile device on a slow 4G network.

Lighthouse loads the page, records a trace of the browser's execution, and applies CPU and network throttling to the recorded trace. This produces the "raw" metric values: LCP and TBT are recorded in milliseconds, while CLS is recorded as a unitless fraction.

Step 2: Mapping Raw Values to a 0–100 Score

Once Lighthouse has the raw values (e.g., an LCP of 2,100 milliseconds), it converts them into a score between 0 and 100. It does not use a linear scale; instead, it maps the raw numbers onto a log-normal distribution curve.

This curve is derived from real-world website performance data collected by the HTTP Archive. For each metric, Lighthouse sets two control points on the curve based on historical data:

  1. The Median (50th percentile): If a raw metric matches the median performance of websites globally, it receives a score of 50.
  2. The 10th Percentile: If a raw metric is in the top 10% of websites globally, it receives a score of 90.

The log-normal curve accounts for diminishing returns. Improving an LCP from 6 seconds to 5 seconds yields a massive score increase because the page is moving toward the steep middle of the curve. Improving an LCP from 1.5 seconds to 0.5 seconds yields a very small score increase because the metric is already at the flat top of the curve.

Step 3: Applying Metric Weights

Lighthouse calculates an individual 0–100 score for each Core Web Vital, and then combines them with two additional loading metrics—First Contentful Paint (FCP) and Speed Index (SI)—to generate the overall Performance score.

In the current version of Lighthouse, the Core Web Vitals (using TBT as the INP proxy) account for 80% of the total score. The exact weights are:

  • Total Blocking Time (TBT): 30%
  • Largest Contentful Paint (LCP): 25%
  • Cumulative Layout Shift (CLS): 25%
  • First Contentful Paint (FCP): 10%
  • Speed Index (SI): 10%

Lighthouse multiplies each metric's 0–100 score by its designated weight and adds them together. For example, if a page scores 80 in TBT, 90 in LCP, 100 in CLS, 90 in FCP, and 80 in SI, the calculation is:

(80 × 0.30) + (90 × 0.25) + (100 × 0.25) + (90 × 0.10) + (80 × 0.10) = 88.5 (rounded to 89)

Step 4: Color-Coding Thresholds

Finally, both the individual Core Web Vitals scores and the overall weighted score are categorized into three color-coded buckets to indicate pass or fail statuses:

  • 0 to 49 (Red): Poor.
  • 50 to 89 (Orange): Needs Improvement.
  • 90 to 100 (Green): Good.

To officially "pass" a Core Web Vitals assessment in Lighthouse, a webpage must achieve a green score (90 or above) in LCP, TBT, and CLS individually, not just in the overall weighted average.