Google Summer of Code

Improving INP Metric by Exposing InteractionId to a Wider Range of Events

The Interaction to Next Paint (INP) is a performance metric that assesses responsiveness. It reflects how fast a webpage responds to user inputs. For example, when a user types a word in the textbox the INP metric measures speed of a response. In this case, it shows how long it took for a user to see the typed word on the screen in the text box.

To obtain this metric we need to measure multiple components such as click or keyboard events. Although there might be quite a few improvements on click or continuous events in the future steps of the project this project mainly reflects the keyboard and composition events. The project focuses on how exposing Interaction id to certain keyboard and composition events can improve accuracy of the INP metric.

As stated above, the definition of the INP metric relies on measuring interactions. Measuring the timing of the interaction is achieved through the utilization of the Event Timing API. The API groups meaningful key, click events to compute one consistent keyboard interaction. Based on the computation it is possible to obtain several interaction features such as: InteractionId, processing duration and the entry type that triggered the interaction.

The Event Timing API enables analysis of pressing a key on a keyboard. This process entails several keyboard events: keydown, keypress, beforeinput, input and keyup that are fired in this specific sequence. Up until this point, the API exposes the interactionId feature only of the key up and key down events. However, measuring only keyup and keydown events might not reflect the full user experience. Keypress events can have the longest duration from all the events resulting in compromised accuracy of the INP metric. Hence, adding the interactionId to the keypress event might improve precision of the INP metric. Moreover, measuring keypress could possibly solve the confusion when the InteractionId is set to 0.

Another type of interaction that can be measured with the Event Timing API is based on the composition events. In contrast to the keyboard interaction, the composition events are formed by inputting text in a supplementary or alternate manner than by Keyboard Events. However, up until now the Event Timing API exposes only the input event’s InteractionId during the composition. Second goal of the project is to reveal InteractionIds for different types of composed events such as compositionstart or compositionend.

🏆 Accomplishments

• Fixed a major bug within the initial composition events logic.
• Redefined computation of interactionId for keyboard events.
• Exposed interactionId to keypress and composition events.

✨ Try Yourself!