Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
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!
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.
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.
You can choose from four different ways to run Lighthouse audits:
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:
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:
Here is what Google says:
Source: github.com
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.
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.”
Most people, after running their first couple of Lighthouse audits and getting used to the interface, inevitably come to the following three questions:
Here’s a brief explanation of each question:
The Performance score is a weighted average of the following five metrics:
Each metric has a different weight on the overall score:
Source: Chrome Developers
Hence, putting more effort into optimizing Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift first will have the biggest impact on your Performance score.
Lighthouse v10 Update: Google introduced scoring changes with the introduction of Lighthouse v10. Time to Interactive has been removed, and its weight (10%) was shifted to Cumulative Layout Shift (CLS).
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.
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:
To delve deeper into the technicalities, visit Lighthouse’s in-depth documentation on variability.
We’ve covered a lot of ground in this article, so here’s a summary of the essential points:
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.
