Categories: Uncategorized

web-vitals vs Lighthouse vs PageSpeed Insights – What’s the Difference?

There are quite a few different libraries out there that can help with measuring your Site Speed, specifically Google’s Core Web Vitals standards. The primary three tools that are are commonly used and set the standards are web-vitals, Lighthouse, and PageSpeed Insights. Each tool/library in the list is connected to the one before it.

web-vitals

The web-vitals library is a JavaScript library that runs in the browser to collect the three primary web vitals – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). It’s built into the latest versions of Chrome (the Chrome version data gets sent to Google Search Console), but can be loaded by any website and supports many browsers, including Internet Explorer to a limited degree. It doesn’t do anything by itself, but it’s the base dependency that any tool collecting CWV will use.

Lighthouse

Lighthouse is the name of the tool created by Google to collect many site speed metrics, as well as some SEO and accessibility data. It also collects Core Web Vitals. Lighthouse runs attached to a browser, and by default can be run on a headless version of Chromium (meaning you can run it on a server to create reports). The CLI version, for example, allows you to generate reports from the command line on your own computer, and can output to different formats, including as a visual HTML report.

Lighthouse also provides a standard scoring system.

PageSpeed Insights

Google PageSpeed Insights is a cloud hosted version of Lighthouse. Where Lighthouse requires someone to host the server or computer running the Lighthouse report, PageSpeed Insights provides the hosting and backend, allowing anyone to use the hosted tool and let Google’s server run the report. It’s virtually identical to Lighthouse in the final report, with the exception of “Lab Data”, which is Google’s field data extracted from users using Chrome to visit the page over the last 30 days (the same data that Google Search Console uses).

Other Tools

On a side note, those aren’t the only three tools that can be used for site speed. Lighthouse has been around for awhile, even longer than web-vitals and before Core Web Vitals was a thing. Lighthouse has been used to accompany other reporting tools like GTMetrix and WebPageTest, usually to provide a score. More recently, GTMetrix has switched to using Lighthouse as the primary method of data collection rather than their own scanning tool, as Core Web Vitals became a bigger thing. Additionally, WebPageTest now uses the web-vitals library to supplement their own scans.

Recent Posts

Higher-Order React Hooks

As part of the next step in learning React, I've been moving the business logic…

1 year ago

Finding and Fixing Layout Shifts/CLS Issues

Over the past few months, I've been working on fixing Cumulative Layout Shift issues for…

2 years ago

Google Search Console Showing High CLS But PageSpeed Insights Shows Good Score

So you've asked a plugin provider/your theme designer/ads provider to fix CLS issues that you…

2 years ago

Using AMP Pages to Boost your Mobile Performance

Site Speed Having a slow site can be a real headache, and unlike many issues…

3 years ago

How to get the intrinsic coordinates on an image mouse click

I'm currently working on a program that can generate a customizable image report. It needs…

3 years ago

Score Doesn’t Matter – How to Sanity-Check Your GTMetrix Report

I commonly see people running a site speed test through GTMetrix or Google PageSpeed Insights…

3 years ago