Lighthouse diff + WebPageTest

May 9th, 2023. Tagged: performance

Lighthouse (LH), the performance auditing tool from Google now has a diff tool so you can compare what happens before/after a change or me vs competitor types.

And WebPageTest.org (WPT), the industry-darling web perf analyzer, also runs Lighthouse and in addition to presenting the results (in two different ways, actually) you can export the results as JSON.

So you head out to that link on the Export menu, right-cilck and save the JSON which then you can upload to the Lighthouse diff tool.

But there's more. You don't have to save any files, you can just link to them. Not sure if this is documented anywhere but the diff tool takes ?baseReport= and &compareReport= like so:

https://googlechrome.github.io/lighthouse-ci/difftool/
  ?baseReport=BEFOREURLGOETHHERE
  &compareReport=AFTERURLGOETHHERE

You can use the WPT URLs and pass them to LH diff tool, even automatically if you use WPT API.

Just don't forget to escape the URLs, e.g. in the console like:

> encodeURIComponent('https://www.webpagetest.org/lighthouse.php?test=230510_BiDcPD_2R7&f=json')
"https%3A%2F%2Fwww.webpagetest.org%2Flighthouse.php%3Ftest%3D230510_BiDcPD_2R7%26f%3Djson"

Otherwise the & in &f=json in the WPT URL will cause widespread confusion.

Finally, an example URL with everything setup just like it should.

Results!

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov