Lighthouse? PageSpeed Insight? Web Vitals? Chrome UX?

When it comes to measuring site performance and auditing a website, Google does not have a shortage of tools that they use. However, when it comes to understanding the data that is collected, we can separate them into two different classes: lab test data, and real-world data. Or basically the Lighthouse Tool, or Chrome User Experience Report. Both of these tools are based on the same performance and auditing core logic, however they take different approaches when it comes to evaluating the value of a website.

When it comes to collecting lab data tests, we would use the Lighthouse Tool. With this tool, we can control the environment and emulate the devices that we would use to measure the performance of a site. Many of you may be familiar with the Lighthouse tab that is within the Chrome browser, however, the browser does not flex the full power of the Lighthouse tool. With the NodeJS version of Lighthouse, we are able to control how the site is tested, what data we want to collect, and which device and network configuration that we would like to emulate. With the Lighthouse Tool, we can go further and set up automated testing and auditing stacks to test our site before allowing the rest of the world to see it.

When it comes to collecting real world data, we would use the Chrome User Experience. Think of this as a lightweight version of Lighthouse Tool. This tool is triggered when a user is visiting one of our webpages. The tool will later send the data to Google for further examination, which then Google will examine data for the past 28 days in order to generate a score and report for a website. This is built around the Performance API, and we can set up a JavaScript application to read the collected data and have a copy recorded elsewhere, if desired. However, unlike the Lighthouse tool, we would have to create an app that will be able to fetch the data from Google’s API

PageSpeed Insight and Web Vitals are best described as tools used to analyze the data from Lighthouse and Chrome User Experience. PageSpeed Insight focuses more on lab data, so it cares more about the data reported from Lighthouse. But instead of reporting the full report from Lighthouse, it only reports the “Performance” metrics. I will not go through all the metrics that are under the “Performance” metric, because there are too many to list. But, in general, it looks at how fast the content is loaded and if we need to optimize our content and assets. PageSpeed Insight does use Chrome User Experience to provide a general outline of the real world performance of our site.

Unlike PageSpeed Insight, Web Vitals focus more on Chrome User Experience to understand how our users are experiencing our site. Web Vitals places great importance on Content Layout Shift, First Input Delay, and Largest Contentiful Paint. Or, in simple terms, does elements on our website move around unexpectedly, and does it take a long time for our site to load. Data from the Lighthouse Tool is used to help provide general guidelines as to ways to improve the performance, SEO, accessibilities, as well as providing best practices.

So now that I have hit you with all of that knowledge, let’s discuss how we can use this to build a better site.

One of the biggest challenges when it comes to improving our website is that we need to consider our audience and how they will access our website. They can be using anything from a potato rig to a custom rig that will make anyone from the #PCMaster race jealous. From a phone that cost $10 to a phone that cost $3000. With the Lighthouse Tool, we can emulate multiple devices as well as various network bandwidth.

The Lighthouse Tool generates a pretty detailed report that can help show us ways that we can improve the experience of our users. One of the reasons why I like using the NodeJS Lighthouse tool is that there is a plugin that we can use that will gather the Chrome UX Report for our website, and with that data can use that to track real world experience and understand what our users are experiencing.

We would run the Lighthouse Tool at least once a week, or after the conclusion of our project so that we can note any improvements before we make the changes available to the world; and for the Chrome UX Report, we would fetch for that data once a month, since that data is based on the past 28 days.

Though there is one thing we need to always remember. Just because the Lighthouse tool says that our site is perfect does not mean our users will have the same experience. But once we have a firm grasp of how our users interact with our site, then we will be able to deliver them the best web experience possible.