INP Debugging Demo

This square moves while the main thread isn't blocked

🔲
3000ms
2000ms

Instructions

This page helps you to explore how INP values are reported when you interact with different parts of the page.

  1. Click/Tap around on this page and see what values get reported for INP.
  2. Next, click the "Block Main Thread Once" button to block the main thread for a specified duration.
  3. Click around on the page while the main thread is blocked and see how the INP values change.
  4. Don't forget to try clicking on inert elements like the page heading. Is INP still reported?

Does INP get reported when you paste text into this textarea?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae officiis perferendis id nesciunt nihil quas culpa iusto incidunt molestiae, rerum ducimus repellat consequuntur, iure iste quo magni earum nulla minus.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, nostrum quia facere labore error minus ut vero at fugiat! Error sit praesentium recusandae debitis maiores exercitationem neque est, ipsum eos!

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae officiis perferendis id nesciunt nihil quas culpa iusto incidunt molestiae, rerum ducimus repellat consequuntur, iure iste quo magni earum nulla minus.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, nostrum quia facere labore error minus ut vero at fugiat! Error sit praesentium recusandae debitis maiores exercitationem neque est, ipsum eos!