Update, Jan 2023: Due to the latest improvements in PageSpeed Insights (PSI), the article has been expanded to include information on how to run Lighthouse audits with PSI and the Chrome extension.
Google loves websites that load fast and provide an exceptional user experience.
And what better way to test your site against Google’s performance requirements than its own tool?
In this article, you’ll learn everything you need about Lighthouse, how to run audits, and get answers to the most common questions.
Let’s begin!
What is Google Lighthouse?
Lighthouse is a free, open-source, fully automated tool that will help you improve your site’s speed, performance, and overall user experience.
You can run it against any web page, and provides audits for performance, accessibility, best practices, SEO, and progressive web apps.
Besides returning a report with the calculated scores for each metric, Google Lighthouse offers a list of specific improvement suggestions to enhance your results.
Lighthouse’s seamless UI makes it suitable not only for experienced developers but every owner that wants to keep track of their website’s performance.
Why You Should Use Google Lighthouse
For two reasons:
Firstly, your site’s speed impacts traffic, bounce rates, ranking, user experience, and conversions. Regularly tracking performance allows you to apply improvements timely. Thus, you will guarantee your business happy visitors and higher sales.
Secondly, Lighthouse is a Google-developed tool. Hence, if you want to make sure that your site meets Google’s latest web performance, accessibility, and SEO standards, Lighthouse is the go-to solution for testing.
Let’s see how you can run audits with Lighthouse.
How to Use Google Lighthouse
You can choose from four different ways to run Lighthouse audits:
- Chrome DevTools
- PageSpeed Insights
- Chrome Extension
The last one requires installing and running the Node command line tool. It gets a bit technical, so we won’t explore it further in this article. However, if you’re interested in trying it - check out Google’s official documentation.
Now, let’s go through the easy options:
Run Local Lighthouse Audits Through Chrome DevTools
Download Google Chrome for Desktop (if you don’t have it already).
1. In Google Chrome, open the page URL you want to audit.
2. From Chrome’s main menu, select More Tools, then Developer Tools (or directly right-click on the page and select Inspect):
Or
3. Click on >>, then the Lighthouse tab.
4. Select Mode, Device, and Categories. (Google suggests leaving all Categories enabled).
5. Click Analyze page load.
6. After 10 seconds, Lighthouse gives you a report on the page.
As you can see, the process is pretty straightforward.
The only question that might arise while running an audit through Chrome DevTools might be:
What's the difference between the three modes in Lighthouse audit?
Here is what Google says:
- Navigation mode analyzes a single page load.
- Timespan mode analyzes an arbitrary period of time, typically containing user interactions.
- Snapshot mode analyzes the page in a particular state.
Source: github.com
Run Lighthouse Speed Test via PageSpeed Insights (PSI)
- Open PageSpeed Insights.
- Enter URL.
- Click Analyze.
Both Chrome DevTools and PageSpeed Insights reports look identical.
With one big difference.
PSI provides both lab and field data.
You’ll notice that your PSI report starts with your page’s Core Web Vitals assessment.
The Core Web Vitals are a set of three metrics measuring your page’s load time, visual stability, and page interactivity. Your scores are based on real-user experience data (field data) that is provided by the Chrome User Experience Report (CrUX) dataset.
The rest of the report replicates the Chrome DevTools result page.
However, these results are based on lab data collected within a controlled environment with a predefined device and network settings.
In other words, achieving a 100/100 score doesn’t necessarily mean that you offer a great user experience to your visitors.
In general, the Lighthouse audit and the Performance score are great ways to debug issues and test the effect of the applied optimizations.
Additional resources: If you’re new to PageSpeed Insights, check our PSI beginner’s guide.
Run Google Lighthouse as a Chrome Extension
Download Google Chrome for Desktop (if you don’t have it already).
1. Install the Lighthouse Chrome Extension.
2. Navigate to the page you want to test.
3. Click the Lighthouse icon.
4. Click Generate report.
However, you should consider the following Google recommendation:
“Unless you have a specific reason, you should use the Chrome DevTools workflow rather than this Chrome Extension workflow. The DevTools workflow allows for testing local sites and authenticated pages, while the extension does not.”
Lighthouse Score Explained
Most people, after running their first couple of Lighthouse audits and getting used to the interface, inevitably come to the following three questions:
- How is my Performance score (aka Lighthouse score, aka PageSpeed score) calculated?
- Why is my Lighthouse score different from PageSpeed Insights?
- Why is my score different each time I test?
Here’s a brief explanation of each question:
How is my Performance score calculated?
The Performance score is a weighted average of the following six metrics:
Each metric has a different weight on the overall score:
Source: web.dev
Hence, putting more effort into optimizing LCP and Total Blocking Time first will have the biggest impact on your Performance score.
Good to know: The weight values aren’t set in stone. Google tend to revise the percentages every time they upgrade Lighthouse’s version. Make sure to check for upcoming updates regularly.
Why is my Lighthouse score different from PageSpeed Insights?
The main difference comes from the testing location.
PageSpeed Insights picks the server to run the test from based on your current location. It has servers in:
Your PSI score might vary depending on the physical distance between the server and your location. The closer you’re to the testing server, the better your results will be.
On the contrary, using Chrome DevTools, you’re running a local test. No data is transferred between servers, so there will be no network latency.
Therefore, the final results will always show how a user in your location would experience the website.
Why is my score different each time I test?
One anomaly you might notice rerunning several tests back to back is the difference in results.
There are several underlying conditions and variables that impact your Performance score, including:
- A/B tests or changes in ads being served
- Internet traffic routing changes
- Testing on different devices (a high-performance desktop vs. a low-performance laptop)
- Browser extensions that inject JavaScript and add/modify network requests
- Antivirus software
To delve deeper into the technicalities, visit Lighthouse’s in-depth documentation on variability.
Everything You Should Know about Running Lighthouse Audits (Summary)
We’ve covered a lot of ground in this article, so here’s a summary of the essential points:
- Lighthouse is an open-source, fully automated web performance testing tool.
- Using it, you can monitor your site’s performance and deal with potential performance issues timely.
- It’s a Google-developed tool which makes it the go-to solution for web performance testing.
- There are four different ways to run Lighthouse audits Chrome DevTools, PageSpeed Insights, Chrome Extension, running the Node command line tool.
- Your Lighthouse scores are based on lab data.
- PSI provides real-user experience data in the Core Web Vitals widget.
- If you have to choose between running audits via the Chrome extension and Chrome DevTools, Google suggests using the latter.
- Your Performance score is a weighted average of six metrics: FCP, TTI, Speed Index, TBT, LCP, and CLS.
- The weight values may vary depending on Lighthouse’s version.
- The difference between your PSI and Chrome DevTools score comes from the testing location.
- Rerunning audits may give back different scores due to various variability factors.
