Lighthouse Diff: Comparing Two Website Speed Tests
You've launched a new version of your website and need to know what's changed in speed? Lighthouse Diff lays it all out clearly 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 works like a "diff for speed" – much like developers compare two versions of code, you compare two versions of your website’s speed.
What is Lighthouse Diff for?
Imagine you regularly monitor your website's speed, and one day you notice that the Lighthouse score or another metric has significantly changed.
What actually happened? Did a specific metric worsen, or did multiple areas see a change?
Lighthouse Diff answers these questions by taking two JSON reports from the Lighthouse tool and showing you:
- Changes in overall score. See how the overall performance rating of the page has shifted.
- Metric differences. Compare specific metrics like LCP (loading speed), CLS (layout stability), or TBT (browser blocking) and see which have improved and which have worsened.
- Audit changes. Lighthouse conducts dozens of checks (audits) – from image sizes to correct cache settings and JavaScript efficiency. The Diff shows which specific checks have passed or failed compared to the previous measurement.
Why is Comparing Tests Important?
A one-off look at the result of a Lighthouse test tells you where your website stands now. But if you want to understand what changed and why, you need a comparison.
Lighthouse Diff is useful in these situations:
- After deploying a new version of the website. Run a test before and after deployment, and the Diff shows the impact of the changes. See if the new code has slowed things down.
- When investigating performance drops. If the Watchdog alerts you to a metric decline, the Diff helps identify the specific issue – perhaps a new script blocking rendering or a larger image on the page.
- During speed optimization. Want to verify that your adjustments have truly helped? Compare tests 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 the "base" (default state) and the other as "compare" (state to compare).
- The tool instantly shows you 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 details of any measurement and click the Lighthouse diff link – the comparison with the previous measurement opens automatically, with no need to download files.
This works for PLUS tests, where we have complete JSON outputs available from each test run.
Which Metrics to Focus On?
When comparing two tests, we recommend focusing on these key metrics displayed at the top of the Diff:
| Metric | What It Measures | What to Watch For |
|---|---|---|
| LCP | Main content load speed | Changes over 200 ms |
| TBT | Main thread blocking | Changes over 50 ms |
| CLS | Layout shifts during loading | Changes over 0.05 |
| FCP | First contentful paint | Changes over 100 ms |
Apart from metrics, also watch the audit section. Here you’ll find specific causes of changes – perhaps a new image lacking lazy loading, missing compression, or unoptimized web fonts.
Bear in mind that synthetic Lighthouse measurements have a degree of variability. Small differences (up to a few percent in scores) might be due to natural fluctuations, not actual changes on the site. Ensure you're comparing Lighthouse reports from the same environment.
Summary
Lighthouse Diff is a handy tool for anyone responsible for a website's speed. It allows you to precisely see what has changed between two tests without manually comparing dozens of values.
Combined with speed monitoring and Performance Budgets, Lighthouse Diff forms an essential part of the toolkit for maintaining and improving website speed. From version 4.10, it’s available directly in PageSpeed.ONE monitoring.