Understanding Lighthouse 6.0 Performance Metrics: A Comprehensive Guide to Front-end Page Performance Scoring

This article provides an in-depth analysis of Google's Lighthouse tool and its latest performance scoring standards, helping developers better understand various performance metrics to optimize their front-end projects.

Front-end page performance has always been a key area of focus, as user retention is closely related to page loading speed. According to Google's statistics, when page visit duration increases from 1s to 3s, user bounce rate increases by 32%.

Performance evaluation methods include using performance analysis tools for standardized scoring and performance monitoring through the Performance API or custom tracking. Lighthouse, an open-source web page performance analysis tool developed by Google, has become the standard evaluation tool. It can be used directly in Chrome DevTools, via browser extensions (Chrome and Firefox), or through npm packages (Node API or CLI). Google's web.dev measure and PageSpeed Insight tools both use Lighthouse for page analysis.

In Lighthouse 6.0, three new performance metrics were introduced while removing FMP (First Meaningful Paint), FCI (First CPU Idle), and mpFID (Max Potential First Input Delay). The new metrics include TBT (Total Blocking Time), LCP (Largest Contentful Paint), and CLS (Cumulative Layout Shift).

Key Metrics Explained:

LCP (Largest Contentful Paint) measures when the largest content element in the viewport is rendered. It has a 25% weight in the final performance score. Elements considered include <img>, <svg> images, <video>, background images loaded via url(), and block-level elements with text nodes.

TBT (Total Blocking Time) represents the total time the page is blocked from responding to user input. It calculates the sum of blocking portions of all long tasks (tasks exceeding 50ms) between FCP and TTI. TBT is more stable than mpFID and better reflects average page response latency.

CLS (Cumulative Layout Shift) measures visual stability. It uses the Layout Instability API with the formula: layout shift score = impact fraction × distance fraction. CLS is a user experience-focused metric currently with 5% weight, but Lighthouse plans to increase its weight in future versions.

FCP (First Contentful Paint) marks when the first page paint event occurs, though it may not represent meaningful content. Its weight was reduced from 23% to 15% in Lighthouse 6.0.

TTI (Time To Interactive) measures when the page becomes fully interactive, requiring useful content after FCP, event handlers registered for most visible elements, and response times under 50ms.

SI (Speed Index) measures how quickly visible content populates, using the speedline tool to analyze video recordings of page loading.

The performance score is calculated using weighted averages of these six metrics: FCP (15%), SI (15%), LCP (25%), TTI (15%), TBT (25%), and CLS (5%).

The evolution from FMP to LCP, FCI to TTI, and FID to TBT demonstrates a trend toward more stable, clearly defined, and standardized metrics. However, each metric has limitations, and low scores don't always indicate poor user experience. Understanding the principles behind these metrics enables more scientific evaluation of page performance.