Lighthouse and Core Web Vitals Comparison

Google's Lighthouse and Core Web Vitals are two different methods for measuring the performance and user experience of your website. There are several differences between Lighthouse and Core Web Vitals in terms of how they measure website performance, the metrics used, what constitutes a passing score, and the tools available to run each report. This article contrasts the two approaches so that you can make an informed decision about when to use which.

How Performance Scores are Determined

Lighthouse

Lighthouse assesses your web pages' performance, accessibility, SEO, and other quality indicators based on best practices. Lighthouse accomplishes this by utilising lab data generated in a controlled testing environment. This laboratory data is used to simulate visits to your website using a fixed CPU speed, a 3G internet connection, and a Moto G4 mobile device. The use of a slightly underpowered CPU, a slower internet connection, and a less powerful smartphone reflects the real-world conditions of your site's visitors.

Core Web Vitals

Core Web Vitals are a set of three metrics that aim to measure and summarise the overall user experience of visiting your web pages by emphasising loading speed, interactivity, and visual stability. These metrics make use of field data, which is real-world data sent to Google anonymously by actual users when they visit a specific page.

We recommend that you rely as much as possible on Core Web Vitals data because real-world aggregated data is a better indicator of performance than point-in-time data based on a controlled set of lab conditions. Furthermore, the score you receive on Core Web Vital's metrics can influence how prominently you appear in Google's own search engine results pages for your targeted search queries.

Metrics and Scores

Lighthouse and Core Web Vitals generate reports using different metrics. Each set of metrics has optimal thresholds that determine whether or not a page passes.

Lighthouse

Lighthouse generates its report using six different metrics:

• Largest Contentful Paint (LCP). Measures the loading time of your page and how long it takes for the largest above-the-fold element (image, text, etc.) to load. The ideal time is less than 2.5 seconds.
• Cumulative Layout Shift (CLS). The visual stability of a page load is measured by focusing on unexpected layout shifts that are not caused by user interaction. When a page loads, elements may shift around unexpectedly, frustrating users. For example, you could load a page and begin reading a paragraph only to have an image load, pushing the paragraph down the page. The optimal layout shift threshold is less than 0.1.
• Total Blocking Time (TBT).  The total amount of time a page is prevented from responding to user input. Mouse clicks and keyboard strokes are examples of inputs. The ideal time is less than 0.2 seconds.
• First Contentful Paint (FCP). The time it took for the first piece of content to appear on the page. The content must be derived from the page's DOM (Document Object Model). The DOM contains standard page content such as images and text. The ideal time is less than 1.8 seconds.
• Speed Index. Captures a video of the page loading and compares the difference between frames to measure the entire loading process for the visual parts of a web page. The total duration is the time it takes to go from a blank screen to a finished page. The ideal time is less than 3.4 seconds.
• Time to Interactive (TTI). How long does the page become fully interactive and respond consistently to user inputs. The ideal time is less than 0.1 seconds.

The Lighthouse performance report converts raw scores into standard 0-100 values before calculating your website's total performance score using a weighted average. Anything above 90 is a passing score for any individual metric or the total performance score.

Core Web Vitals

Core Web Vitals measures CLS and LCP similarly to Lighthouse and employs the same optimal thresholds. Furthermore, Core Web Vitals measures First Input Delay (FID), which is the time it takes between the user's initial interaction, such as clicking a button, and the browser's response to that action. The ideal time is less than 0.1 second. The optimal threshold for FID is the same as for Lighthouse's TBT metric. To be considered passing, a page on your website must achieve the optimal threshold for each metric at the 75th percentile.

See Introduction to Core Web Vitals for more information.

Core Web Vital scores are calculated over a 28-day period using aggregated field data from many users. This 28-day period is important to remember because if you score poorly and then improve, you'll have to wait for Google to recognise your improvements.

Tools

The most user-friendly ways to obtain a Lighthouse report are to use the Lighthouse extension for your Chrome web browser or to visit Google's Web Dev Portal and enter your URL. Chrome Dev Tools, Page Speed Insights, and the command line are also options.

Core Web Vitals can be measured using a variety of tools, including Chrome User Experience Report (CrUX), Google Search Console, and PageSpeed Insights. PageSpeed Insights is the quickest and easiest way to check any URL's Core Web Vitals.