What is INP by element
INP by element shows how Interaction to Next Paint (INP) varies depending on which HTML element the user interacted with — such as buttons, links, form fields, tabs, modals, and more.
This lens helps you pinpoint which UI elements are driving slow responsiveness and degrading user experience. Since INP is measured from the time a user interacts until the next frame is painted, it directly reflects how responsive each type of component feels in practice.
Common element types:
Link – anchor tags (
<a>) used for navigationButton – any kind of clickable button (
<button>,.btn, etc.)Form field – inputs, selects, textareas
Tab – part of a tabbed interface
Menu – dropdowns, mobile navs
Modal / popup – overlays, alerts, confirmation windows
Other – uncommon or custom interaction patterns (e.g. carousels, sliders)
Healthy INP by element sample
Should you worry
In a healthy experience:
All element types show low INP, especially common ones like buttons and links
Modals and complex components still respond quickly, thanks to efficient event handlers and rendering
No element category stands out as a bottleneck
This indicates a well-architected UI — responsive regardless of what users touch, click, or type into.
Unhealthy INP by element sample
If Button or Link elements have high INP:
These are core interaction points, and slowness here leads to frustration and bounce
You may have blocking scripts, unnecessary DOM updates, or main thread jank after clicks
If Form fields are slow:
Users might experience lag when typing or selecting options — often due to validation or JS-heavy re-renders
If Modals, Menus, or Tabs are slow:
These are complex, layered components — often bundled with animations, transitions, or third-party plugins
Poor INP here suggests that your UI code isn't optimized for interactivity under pressure
Slow INP on any single element type can drag down the overall UX and make the site feel unpolished or unresponsive.
Resolving unhealthy INP by element
Go-to action plan to resolve an unhealthy INP by element:
Ask Uxi to analyze your INP by element values and suggest improvements.
Use Filters to isolate the slowest interaction types and intersect with route, layout, or device.
Simulate INP of the suspected lens to see if fixing it will resolve the INP by element. If yes, this is where the resolution focus should be.
Use an automated INP optimization tool like INProve to improve your INP by element values.
Once you’ve improved INP, set an alert to be the first to know if it starts worsening again.
Try it yourself
Discover how your website performs with real user data.