One input responsiveness demo to rule them all.
The Interaction to Next Paint (INP) metric metric is an experimental responsiveness metric that records the total interaction latency of all click, tap, and keyboard events on a page. This input responsiveness demo is a companion toy app for the Optimize INP guide on web.dev designed to help you profile and understand which phase of an interaction inputs are spending the most time.
Do the following:
git clone git@github.com:malchata/the-lord-of-the-links.gitin a directory of your choosing.npm install.npm run preview.- Open your browser to
http://localhost:8080/(assuming port 8080 is available).
You'll see a simple page with a title graphic and a text input. The text input searches all pages available on the Tolkien Gateway by title. For example, type "numenor" or "elrond" and watch the results filter in as the information is requested from a back end API. As you interact with the demo, follow the instructions in the Optimize INP guide.
To open the app's debugger, type "debug" into the search field to toggle it open. You'll see options for input throttling, generating synthetic main thread work, and toggling useful console logs.