Today I learned

What's new in Lighthouse 10

Edit this Post Opens in new tab

If you haven't heard of Lighthouse before, it's a tool that helps you improve the quality of your website. It's available as a Chrome extension and as a Node module. It's also integrated into Chrome DevTools.

It's my go-to tool for improving the performance of my websites. I test every a website with it before I publish it, and I test it regularly after that to make sure, I don't regress.

Lighthouse 10 Opens in new tab was released recently and includes some major new features.

TTI is being removed

One of the most significant changes is that TTI (Time To Interactive) Opens in new tab is being removed completely. Its 10% score weight is shifting to CLS (Cumulative Layout Shift) Opens in new tab which will then account for 25% of the performance score.

Here is a comparison of the metrics that are used to calculate the performance in Lighthouse 8 and Lighthouse 10.

Lighthouse 8 vs Lighthouse 10 performance score metrics

Google explains the removal of TTI as "being overly sensitive to outlier network requests and long tasks." They say that other metrics are better heuristics and tend to correlate better to the Core Web Vitals.

The shifted and increased score weight of CLS will improve the performance the score of about 90% of all websites.

Back/forward cache

Besides the removal of TTI and the increased score weight of CLS, there are two completely new features in Lighthouse 10.

Back/forward cache will be added as a new audit. It will navigate away from the test page, go back to it to see if it's bfcache-able.

Bfcache Opens in new tab will restore the page layout and execution state nearly instantly, improving the user experience dramatically. However, if the website prevents the browser from restoring a page from bfcache, the audit will be impacted negatively and list reasons for the failure.

Paste-preventing Inputs

Another new audit is paste-preventing-inputs. It will check if users can paste into any input fields on the page. Before that, there was only a check for password fields. Paste-preventing is a net-negative user experience and should be avoided.

Some significant improvements to Lighthouse! They are available in the CLI tool, right away and they will land in Chrome stable in Chrome 112.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco