How-to

Interaction Timing Tool

The interaction timing tool allows you to inspect in detail each interaction's latency and get notified for interactions taking >200ms.
Table of Contents

Interaction Timing Tool is available on all plans

As you navigate your site, the interaction timing tool allows you to inspect in detail each interaction's latency and get notified with toasts for interactions taking > 200ms. This can help you ensure your site's Interaction to Next Paint (INP) (a Core Web Vitals) has a good score.

To access the interaction timing tool:

  1. Open the Command Menu
  2. Select the Interaction Timing option. If any interaction has been detected on the page, a badge will display next to the option. The number inside the badge is the current INP
  3. The Interaction Timing popover will open on the right side of the screen. As you navigate your site, each interaction will appear in this panel. Mouse over the interaction timeline to understand how the duration of input delay, processing (event handlers), and rendering are affecting the interaction's latency

To change preferences for the interaction timing tool:

  1. Open the Command Menu
  2. Select the Preferences option
  3. Select your desired setting for Measure Interaction Timing
    • On will show the toasts for interactions taking >200ms
    • On (Silent) will not show toasts, but will still track interaction timing and display it in the interaction timing side panel when opened
    • Off will turn off tracking for interaction timing
Last updated on July 23, 2024