New Core Web Vital: Interaction to Next Paint and the Enterspeed Perspective

Interaction to Next Paint is Google's new(ish) performance metric for measuring how responsive a webpage feels to interact with. We have added it to our top 10 performance metrics you should track last year. The newsworthiness is due to Google making INP a Core Web Vital as of 12th of March 2024.

This is potentially a big thing, as Core Web Vitals metrics are one of the variables Google uses when ranking the search result page. Core Web Vitals (CWV) are important because they ensure that websites provide a better user experience, and this improves the search results ranking, which again leads to more traffic and better business.

What is INP?

Interaction to Next Paint measures a web page's responsiveness to user interactions by calculating the time gap between an interaction (tap, click, or keypress) and when the UI is updated. Or put in layman's terms, how sluggish working with a webpage feels. People much more experienced with INP and frontend optimisations have already written extensively on the topic, so we won't, but instead recommend a good introduction to INP, a case study on improving INP or a deep dive on debugging INP.

We do want to note that, as with the other Core Web Vitals, Google has defined what a good score INP metrics looks like. For the INP, a good value is below 200 ms, so the window for delivering a good user experience is, in fact, small.

What are the sources of a high INP?

Without going into the technical details of the browser's rendering engine, again read the links above, a bad INP stems from doing too much before the UI is updated. In short, you are either doing too much with JavaScript or have third-party scripts, accidentally triggering re-rendering of the page, or waiting for API calls to respond from the server. And now we are finally getting to the interesting point from the Enterspeed perspective.

It is a common scenario that a user's interaction triggers a call to one or more APIs. Within the composable/best of breed style of architecture, it is commonplace that different tools and APIs are required to create one coherent user experience. With a relatively small window for updating the UI, the frontend code is limited in what it can make happen in this window.

What can Enterspeed do?

With Enterspeed, we offer reliable low latency API response times and the option for doing some of the heavy lifting of merging data from multiple sources. The Enterspeed way is to defer the computationally heavy work to an asynchronous process so the data is ready even before the user interacts with the webpage.

We love to see Google push for a better user experience, and including INP as a Core Web Vital is good for users and good for Enterspeed.