Exploring Additional Reporting Hints

[Joel Willi]

There are several reasons why the ability to provide visual feedback after an interaction may be delayed.

We annotate our INP measurements with additional contextual information. Therefore, we derive several custom properties from our technical stack and rendering approach. One of these properties we derive is a "paint blocker". Within this property we inform about the component that is blocking the (re-)painting of an element on the page and how long it is doing so.

We start a "paint blocker" hint when the component is about to be rendered. And by starting the hint, we immediately schedule a race between an animation frame request and an idle callback request. As soon as one of them returns, we release the blocker hint. 
If an INP occurs, we check for current "paint blockers" and add them to the reportable.

 

We now wonder if there are other/better ways to measure the next opportunity for a browser to paint since a rendering task was started; and whether this approach is even feasible?