Lighthouse Diff: Comparing Two Website Speed Tests
Martin Michálek2/25/20264 minutes readingYou've launched a new version of your website and need to know what's changed in terms of speed? Lighthouse Diff provides a clear view all in one place.
Lighthouse Diff is an open-source tool from the Google Chrome team that visually compares two Lighthouse reports, highlighting the differences.
It operates like a "speed diff" – just as developers compare two versions of code, you can compare two versions of your website's speed.
What is the Purpose of Lighthouse Diff?
Imagine you regularly monitor your website's speed and one day notice that your Lighthouse score or another metric has significantly changed.
What actually happened? Did a specific metric worsen, or did the assessment of multiple areas change simultaneously?
Lighthouse Diff answers these questions by taking two JSON reports from the Lighthouse tool and showing you:
- Changes in the overall score. You can see how the overall performance rating of the page has shifted.
- Differences in metrics. Compare specific metrics such as LCP (loading speed), CLS (layout stability), or TBT (browser blocking) and identify which have improved or worsened.
- Changes in audits. Lighthouse performs dozens of checks – from image sizes to proper cache settings to JavaScript efficiency. The Diff highlights which specific checks passed or failed compared to the previous measurement.
Why is Comparing Tests Important?
A one-time glance at the result of a Lighthouse test tells you how the website is performing right now. But if you want to understand what has changed and why, you need a comparison.
Lighthouse Diff is useful in these scenarios:
- After deploying a new version of your site. Run a test before and after deployment, and the Diff will show the impact of changes. You can see whether the new code has slowed things down.
- When identifying causes of deterioration. If the Watchdog alerts you to a metric's decline, the Diff helps pinpoint the specific issue – perhaps a new script blocking rendering or a larger image on the page.
- During speed optimization. Want to verify that your tweaks have actually helped? Compare the test before and after optimization.
- In team communication. The Diff provides clear visual evidence of changes, making it easier to communicate among developers, marketers, and management.
How Does Lighthouse Diff Work?
The tool works with JSON files, which are the standard output of the Lighthouse tool. There are two ways to perform the comparison:
Manual Comparison in the Online Tool
- Obtain two JSON reports – for example, from the test run details in your monitoring, where you can download them.
- Open Lighthouse Diff.
- Upload both files – one as "base" (the default state) and the other as "compare" (the state to compare).
- The tool will immediately display the differences.
Comparison Directly in PageSpeed.ONE Monitoring
From version 4.10, Lighthouse Diff is directly integrated into PageSpeed.ONE monitoring. In the Measurement History, open the detail of any measurement and click on the Lighthouse diff link – the comparison with the previous measurement opens automatically, without the need to download files.
This works with PLUS tests, where we have complete JSON outputs from each test run available.
Which Metrics to Focus On?
When comparing two tests, we recommend focusing on these metrics, displayed at the top of the Diff:
| Metric | What It Measures | What to Watch For |
|---|---|---|
| LCP | Loading speed of main content | Changes over 200 ms |
| TBT | Blocking of the main thread | Changes over 50 ms |
| CLS | Layout shifts during loading | Changes over 0.05 |
| FCP | First contentful paint | Changes over 100 ms |
In addition to metrics, also pay attention to the audit section. It's here you'll find the specific causes of changes – perhaps a new image without lazy loading, missing compression, or unoptimized web fonts.
Remember that synthetic measurements from Lighthouse have some variability. Small differences (within a few percent in score) may be due to natural fluctuations rather than actual changes on the site. Ensure you're comparing Lighthouse reports from the same environment.
Summary
Lighthouse Diff is a practical companion for anyone concerned with website speed. It allows you to precisely see what has changed between two tests, without the need to manually compare dozens of values.
Combined with speed monitoring and Performance Budgets, Lighthouse Diff is an essential part of the toolkit for maintaining and improving website speed. From version 4.10, it is available directly in PageSpeed.ONE monitoring.