Google Lighthouse Does Not Count INP As A Core Web Vital

Source: Freepik_Free Vector _ Online education background

Such a strong tool of performance testing by Google Lighthouse does not offer the Interaction to Next Paint (INP) metric among its regular tests. It seems paradoxical because INP is described as being one of the Core Web Vitals. Web Performance Developer Advocate at Google, Google Chrome Barry Pollard explains why this is so and in which ways INP could actually be measured.

Lighthouse Measures Page Loads, Not Interactions

Lighthouse keeps a particular measurement in mind, which is measuring the performance of a simple page load. While it is doing so, it manages to capture many characteristics and can also determine if problems exist, besides providing recommendations for betterment by finding out about Biggest Contentful Paint and Cumulative Layout Shift.

But INP is different. It depends on user interactions. As Pollard says, “The problem is that Lighthouse, like most web perf tools, typically just loads the page and doesn’t do any interactions with it. No interactions = No INP to measure!

While Lighthouse does not directly measure INP, it is possible to measure the same by using “user flows.” These user flows can be defined to simulate common user interactions on a website. Added Pollard, “If you as a site-owner know your common user journeys then you can measure these in Lighthouse using ‘user flows’ which then WILL measure INP.”

All these user flows can be automated in a CI environment where developers can test INP on each commit and spot potential regressions.

Total Blocking Time As An INP Proxy

While Lighthouse cannot measure INP without interactions, it can measure likely causes, particularly long, blocking JavaScript tasks. Where TBT plays here is.

According to Pollard, “TBT (Total Blocking Time) measures the sum time of all tasks greater than 50ms. The theory being:

Lots of long, blocking tasks = high risk of INP!

Few long, blocking tasks = low risk of INP!”

Limitations Of TBT As An INP Substitute

TBT is a poor substitute for INP. As Pollard indicated, “If you don’t interact during long tasks, then you might not have any INP issues. Also interactions might load MORE JavaScript that is not measured by Lighthouse.

Some developers optimize for Lighthouse scores without considering a user impact whatsoever. According to Pollard, this is strongly advised against because: “A common pattern I see is to delay ALL JS until the user interacts with a page: Great for Lighthouse scores! Often terrible for users :

Sometimes nothing loads until you move the mouse.

Often your first interaction gets a bigger delay.”

Why This Matters

Noting the interaction between Lighthouse, INP, and TBT means one can better optimize user experience. Hence, identification of limitations in measuring INP can thus prevent misguided optimizations. Pollard would suggest that when measuring INP, there ought to be real-user interactions; improvements in performance must always enhance UX. As an essential Core Web Vital, understanding how INP works can help keep it below an acceptable threshold.

Practical Applications

• Monitoring site performance as well as INP
• Use Lighthouse’s “user flows” for INP measurement in common journeys.
• Automate user flows in CI to watch INP and catch regressions.
• Use TBT as an INP proxy, but know the limitations.
• Prioritize field measurements for quality INP data.
• Balance performance optimizations with UX considerations.

Impact of INP on User Experience

The measurement of responsiveness for web pages is usually carried out by Interaction to Next Paint, or INP. It measures the elapsing time from when a user interacts with an element in the page up to the moment when the page begins to be responsive to the eye. Thus, a high-value INP may call for a slow and not responsive page, hence unfavorable to the use of the web page.

Importance of INP

A low INP value is crucial to achieving a great user experience. When the page responds correctly, users can work with it fluidly and without frustration, thereby increasing user engagement, satisfaction, and conversions.

Factors that Affect INP

INP can be affected in several ways including:

• JavaScript execution: Long-running JavaScript tasks block the main thread and make the rendering slow leading to a high INP value.
• Network latency: Bad network may make the actual loading of resources slower, which, as a result, affects INP.
• Third-party scripts: These scripts may increase extra latency and at times block the main thread.
• CSS rendering: The more complex the style is, the longer time it takes to render, so the more massive INP value.

Improving INP

Optimizing INP has to be approached from these aspects:

• Minimize JavaScript execution: Reduce the amount of JavaScript code on your pages, and optimize the code that is necessary. Consider code splitting: only load what is necessary on every page.
• Optimize network performance: optimize images and other assets to make them as small as possible; leverage a CDN to implement a cache of resources closer to users.
• Third-party script management. Limit third-party scripts on your pages, and use both efficient and performant scripts.
• Use a CSS preprocessor: Sass or Less enhances the rendering of CSS in ways which would be considerably more complicated with old CSS. Be limiting for complex selectors, properties, etc.

Measuring INP

There are a number of tools which can be used to measure INP, namely:

• Chrome DevTools: Chrome DevTools has a performance panel through which INP and other performance metrics are measured.
• Lighthouse: Lighthouse is an open-source tool which one can use to audit the performance of a web page. It includes a metric for INP.
• WebPageTest: WebPageTest, apart from being a free online tool, is used to measure the performance of a web page from different locations. It includes a metric for INP.

Conclusion

InP is one of the critical metrics of measure for responsiveness of any webpage. So, an INP value that is low is essential in providing a great user experience. Developers can improve INP and provide improved user experience of the website by optimizing JavaScript execution, network performance, third-party scripts, and CSS rendering.

Sources:

• https://www.searchenginejournal.com/why-google-lighthouse-doesnt-include-inp-a-core-web-vital/528734/
• https://www.gcc-marketing.com/the-reason-google-lighthouse-does-not-include-inp-in-core-web-vitals/
• https://support.google.com/webmasters/thread/114825349/lighthouse-or-core-vitals?hl=en
• https://twitter.com/sejournal/status/1840898006456885588

Subscribe to our newsletter