Interaction to Next Paint (INP) ⚡ Live Demo

To help you get a "feel" for the INP metric 👉 (Learn more)

Instructions

  1. Use the controls below to add interaction latency.
  2. Start interacting with the page (type, click, etc.)
  3. Notice how the experience affects the INP value.
  4. Refresh the page to start over.

Introduce periodic main thread blocking

Never Often

Customize event processing times

0 200
0 200
0 200
0 200
0

Start typing...

Event log (descending order)

Interaction No. Event Type Duration Timestamp