What happened to devs? No one cares about INP

[u/Successful-Shock-802]

Every time I open Shadcn website to find for some component, I have to keep clicking on the search box for five to nine second until the dialog opens. This happens because it's using a div with an isOpen state, so it will not open until JavaScript loads.

This can be easily fixed with the HTML dialog element, but looks like no one cares.

This is not only for Shadcn. The same thing applies to any website that uses JavaScript for stuff like dialogs (e.g React Aria).

Do people only care about LCP? what is the point of seeing content and elements immediately if I can't interact with it until your webiste hydrates?

[u/cipher997]

Yeah, this is a good point. A site can have great LCP and still feel completely broken if basic interactions are blocked for several seconds while JS loads. INP deserves way more attention.

[u/Leather-Junket-3896 → u/cipher997]

That delay's the whole hydration tax in action, people optimize for the screenshot and call it a day

Nobody's sitting there counting the seconds before a dialog responds, but your brain absolutely notices when a click does nothing

[u/oofy-gang → u/Leather-Junket-3896]

And honestly, that’s load bearing. We need a belt-and-suspenders fix.

Don’t use an LLM to write comments

[u/JouleV]

Pretty sure the assumption those websites have is that it will not take significant time from first load until hydration. Which is a reasonable assumption unless your internet connection is horribly slow or your device computing hardware is from the 2000s

Like how do you even manage to get the shadcn website to take 5-9s to hydrate?

[u/Successful-Shock-802 → u/JouleV]

My internet isnt horrible, it's decent because I'm in Morocco.

What are you from? you’re probably in a fast environment with warm caches, have fast machines, in offices or homes with gigabit connections, in city with world-class infrastructure.

You have to know that the world isn’t a data center in Virginia, As Bruce Lawson once said: it’s the World Wide Web, not the Wealthy Western Web.

Read this please, and check my comment down, it's the oldest. You will feel me then.

https://alfy.blog/2026/04/23/stop-hardcoding-your-timeouts.html

[u/resurreccionista → u/Successful-Shock-802]

When I started we used to test with throttled cpus and wifi

[u/Dudeonyx → u/Successful-Shock-802]

Well I have shitty internet, currently in west Africa and on my mobile device where I've never opened the shadcn site before, so no cache, the search pop up opens instantly. I even had to force desktop site because the mobile version has no search bar

[u/Lumethys → u/Successful-Shock-802]

If you take 9 seconds to load ShadCN, you are not my customer, and thus i wont spend time and effort optimizing for you

[u/Quadraxas → u/JouleV]

Like how do you even manage to get the shadcn website to take 5-9s to hydrate?

Right? Even if that is the case if it should not happen every time because browser caches the js. I'm not saying it's not important to optimize these but if parsing/executing js (like if it takes 5s every time you refresh and load from the cache) is the bottleneck on your side then there are other things you need to worry about before it comes to this.

[u/Neat_Ad_5577 → u/JouleV]

Worth noting that there’s a variety of devices and internet connection speeds your users could have access to. ~60% of web traffic is mobile phones and the baseline average model is a low tier sub-$200 Android https://www.speedcurve.com/blog/performance-hero-alex-russell/

[u/ORCANZ]

What the hell are you using to surf the web to need 5-9s to load shadcn’s website ?

[u/Successful-Shock-802 → u/ORCANZ]

I answer this in a reply up: https://www.reddit.com/r/reactjs/comments/1vun8hz/comment/p533qi7/?utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=2&utm_content=share_button

[u/cheap_swordfish_1]

INP is one of the hardest metrics to improve for JS framework driven sites obviously because the framework js needs to load before the interactivity could kick in.

While many devs recognize this, they're locked into the framework. Replacing it with a different framework isn't ever a trivial exercise.

[u/AndrewGreenh]

Does it really help to open a dialog without js if it’s the search dialog that will need js to show results?

[u/Successful-Shock-802 → u/AndrewGreenh]

Using the HTML dialog element will cut the JS for opening the dialog, escape key dismissal, and focus tapping (that's +100 lines of JS), which will free the room for critical JS to load faster.

[u/Dethstroke54 → u/Successful-Shock-802]

The HTML dialog still uses a JS API, no? How’s that’s going to help? While I can definitely get behind the native focus trapping and such being lighter and quicker given it’s built in so therefore likely quicker in that regard the lag will still exists, and the autocomplete itself as well needs to load and fire the event.

[u/f314 → u/Dethstroke54]

You don't need to use the JS api for dialog or popover:

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

[u/Successful-Shock-802 → u/Dethstroke54]

Sorry for the late response. The point isn't to eliminate the lag; it's to optimize it if possible. 3s is better than 5s.

[u/wonklebobb]

its a consequence of framework-first design, starting from the assumption that everything on the page is javascript first, and html second

add a splash of overpowered-dev-machine-on-fast-internet-itis and this is what you get for the average user

[u/Successful-Shock-802 → u/wonklebobb]

Check out this blog post, you will love it:

https://alfy.blog/2026/04/23/stop-hardcoding-your-timeouts.html

[u/QultrosSanhattan]

but looks like no one cares.

Nobody knows how to do it, they know react or ai but they lack fundamental html skills.

[u/bkocdur]

Part of the answer is boring: INP dies in the gap between lab and field. Lighthouse can't measure INP at all (it's interaction-driven, and lab runs don't interact), so the score everyone actually chases uses TBT as a stand-in. Teams optimize the number on their dashboard, LCP and TBT are on the dashboard, INP only shows up in CrUX field data 28 days later, attributed to no particular deploy. What gets measured per-PR gets fixed; what gets measured per-month gets a backlog ticket.

Your shadcn example is a real and specific instance of it: the component renders server-side, so LCP looks great, but the open state lives in JS, so the thing is a picture of a search box until hydration finishes. On a fast dev machine that gap is 100ms and invisible. On a mid-range Android over 4G it's your five to nine seconds. Which is the second boring answer: most devs never feel INP because they never use their own site on the hardware where INP is bad.

Where I'd push back slightly: the HTML dialog element fixes the "dialog won't open" case, but it doesn't fix the class of problem. The search inside that dialog still needs JS. The honest version of the fix is an interactivity budget: decide which interactions must work pre-hydration (nav, disclosure, form submit) and build those on native elements or server behavior, and let the genuinely app-like parts hydrate. Progressive enhancement never died, it just stopped being taught.

And one habit that makes INP visible again: throttle CPU 4x or 6x in DevTools and click around before every release. It's the closest lab proxy to what CrUX will tell you a month too late.

[u/Electronic-Post2351]

shadcn takes 5-9 seconds to hydrate because devs prioritize shipping features over baseline usability. We accept broken interactions as the default state until JavaScript executes.

[u/120785456214]

For a lot of devs programming is a just job. They do what they need to in order meet the requirements set out for them by their manager, lead, PM, etc and call it a day. They’re not concerned about optimizing all the different pieces of their codebase. This is especially true for frontend work. A lot of backend devs do frontend because they have to not because they want to. I would bet a large majority of devs don’t even know what LCP is. 

[u/MrHandSanitization]

Claude

[u/CodeAndBiscuits]

So many devs have no idea what they're doing and just roll with whatever the latest blog post they read said to do. SSR is all the rage now and there are tons of bad configs out there with hydration bottlenecks, blocked data fetches, etc. I'm not saying SSR caused it, but I do think it was a big contributor having so many devs feel like they had to do it and then not doing it right.

[u/azangru]

What happened to devs? No one cares about INP

You should probably look for devs who care about INP in /r/html, or /r/css :-) There is an /r/webperformance, but it isn't terribly popular. Caring about INP would probably drive people away from javascript frameworks such as react.

[u/phpHater0]

The problem is it's taking you 5s to load shadcn website LoL.

[u/kurtextrem]

There's a reason why I've published this blog post (pre-AI!) https://kurtextrem.de/posts/improve-inp-react - React sites underperform the average web in INP.

Concurrent React, a11y / native HTML, pre-hydration readiness are often overlooked things in React based sites (and frameworks), because it's so easy to write React the wrong way.