What’s new in Lighthouse 10

This article is a translation of the original article “What’s new in Lighthouse 10

I also run a telegram channelFrontend in a navy way”, where I talk about interesting things from the world of interface development.

Introduction

Lighthouse is a website audit toolwhich helps developers with features and diagnostics to improve the user experience of their sites.

Lighthouse 10 is available in command line via npm and in Chrome Canary. In the coming weeks, it will appear in Chrome stable in Chrome 112 and in PageSpeed ​​Insights.

Scoring Changes

Venerable indicator Time To Interactive (TTI) will be removed in Lighthouse 10, ending deprecation process started in Lighthouse 8. 10% TTI weight goes to indicator Cumulative Layout Shift (CLS)which will now be 25% of ooverall performance rating.

TTI marks a point in time, but the way it is defined makes it too sensitive to unusual network requests and long running tasks. Indicators Largest Contentful Paint (LCP) And Speed ​​Index are usually better indicators of page content load than the number of active network requests. Total Blocking Time (TBT) handles long running tasks and main thread availability more reliably and, better correlates with Core Web Vitalsmeasured in the field.

The increase in the weight of CLS is due to the removal of TTI, but better reflects its importance as a core metric of web life, and ideally will increase attention to sites that are still making unnecessary rearrangements of layout elements.

We expect this to improve the performance scores of most pages, as most pages tend to score better on CLS than TTI. In an analysis of 13 million pageloads in the latest HTTP archive, 90% of those pages improved their Lighthouse scores, with 50% of them improving their scores by more than 5 points.

If for some reason you still need the Lighthouse TTI value (for example, in a CI assertion), it is still available unchanged in the Lighthouse JSON output, only with a score weight of 0 and hidden in the HTML report. Any scripted access to the JSON value should still work without modification.

New audits

Lighthouse 10 brings a brand new performance audit and other significant changes.

Back/forward cache

Back/forward cache (bfcache) is one of the most powerful page performance tools for real users. Aside from the normal browser cache, a page loaded from bfcache restores page layout and execution state almost instantly, pretty much skipping all page loading actions, and your page is in front of users immediately as they navigate back and forth through their history.

However, there are several ways a page can prevent a browser from restoring a page from bfcache. The new Lighthouse check actually goes from the test page and back to see if it can be restored from bfcache and lists the reasons for the failure.

look bfcache audit documentation for more information.

Inputs not allowing insertion

The old “Best Practices” check “Allow users to paste passwords into fields” has been extended to check that pasting into any (unreadable) input field will work. For most sites, disallowing embeds is a negative user experience and an impediment to legitimate security and accessibility workflows.

New audit “Allow users to paste into input fields” (paste-preventing-inputs).

Node Users

If you are using Lighthouse as your Node library, there are a few changes in this release that you need to consider. See details in changelog 10.0.

Lighthouse 10 also comes with full TypeScript type declarations! Anything imported from lighthouse should now be typed, which is especially useful if you’re writing Lighthouse Custom Flow Scripts.

Try these types and let us know if you have any problems using them.

Lighthouse launch

Lighthouse is available in Chrome DevTools, npm (as a Node module and CLI tool) and as a browser extension (in Chrome And Firefox). It is also used in several Google services including PageSpeed ​​Insights.

To try the Lighthouse Node CLI, run the following commands:

npm install -g lighthouse
lighthouse https://www.example.com --view

Contact the Lighthouse Team

To discuss new features, changes in the Lighthouse 10 release, or anything related to Lighthouse:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *