"Does anyone have a good hello world demo for a project with INP issues?"
The above question was asked on a Slack community I'm part of. And so people started sharing their INP demo's and INP playgrounds. Great timing too, since the INP deadline of March 12 is due.
List of INP demo's
Below are either INP demo's that are fun to analyzing via DevTools performance panel.
Text-wrap: balance CSS vs JS comparison
A simple before and after comparison, illustrating that JavaScript might not always be the right tool for the job.
Here's a link to a demo page while my recent blogpost is giving more background info.
Squares moving up and down
A demo by Google themselves. The demo page with ready to go buttons can be found here.
An explanation (although with screenshots of an ancient Chrome version) can be found on developer.chrome.com (Analyze runtime performance).
Cookie clicker
Cookie clicker is a demo by Annie Sullivan.
See this glitch.me demo page and this youtube video for an explanation.
Get a feel for the INP metric
A demo by Philip Walton where you can change the delay, see how the browser is coping and maybe even get frustrated ;)
Demo to be found over at this glitch.me demo page.
How annoying is too annoying?
Talking about getting frustrated, there's another input delay demo, created by Monica Dinculescu.
This demo is also hosted on glitch.me.
INP workshop
Not really a demo I would say, but as I think it should be in this, here's an INP workshop by Michal Mocney.
Got more?
Found or built your own INP related demo? Hit me up over here or on LinkedIn and I happily add it here!
New to the technical implications of INP? It might then also be wortwhile to watch this Optimizing INP deep dive video from Chrome for Developers.
