Webflow Interactions That Hurt INP and What to Use Instead

Why it matters

INP measures how quickly a page responds to clicks, taps and key presses. Good is 200 ms or less. Poor is above 500 ms. Google measures it at the 75th percentile, split by mobile and desktop.

Each interaction has three phases: input delay, processing duration and presentation delay. A busy main thread adds to the first. Heavy event code adds to the second. Slow rendering adds to the third.

Scrolling, hovering and zooming are not measured by INP. Webflow still says each interaction adds load time. It lists excessive interactions and animations among the factors that can slow a page. web.dev says script work during load can create long tasks that block input.

How to check it

1. Check field data. Run PageSpeed Insights. Read INP on Mobile and Desktop. This comes from Chrome field data. It cannot tell you the cause.
2. Use real-user data if you have it. web.dev says a real-user monitoring tool shows which interaction caused the INP value and its type.
3. List your interactions. Open the Interactions panel. Note the trigger for each one.
4. Mark the click-driven ones. Mouse click, navbar opens, dropdown opens, tab change and slider change are usually started by a click or tap. Page load interactions add work while the page loads.
5. Look for duplicates. Find interactions that copy another one with only a different target.
6. Test in Chrome DevTools. Open the Performance panel. Interact while the page loads. Then test your common user flows.
7. Look for layout thrashing. web.dev says it shows as a red triangle on Recalculate Style or Layout entries.
8. Do not trust Total Blocking Time alone. web.dev says it can be a proxy, but not a substitute.

How to fix it in Webflow

1. Remove what you do not need. Webflow says to use interactions sparingly, only where they improve the experience. Remove unnecessary interactions, transitions and transforms.
2. Reuse one interaction. Webflow says to structure elements so one interaction can apply to many. Avoid duplicates.
3. Select only the properties that change. For transitions and transforms, Webflow says not to select all properties.
4. Keep click results small. The less the screen has to redraw after a tap, the less presentation delay. web.dev says large DOMs increase rendering work. Flatten nested wrappers where you can.
5. Lighten the page load. Move page-specific scripts to that page's custom code. Update, replace or remove third-party integrations that slow the site, as Webflow advises.
6. Write custom code carefully. If you add JavaScript, keep event callbacks small. web.dev says to break up work into separate tasks, for example with setTimeout. Do not change styles and then read them in the same task. That is layout thrashing.
7. Publish and test again. Check Mobile and Desktop in PageSpeed Insights. Field data covers the previous 28 days, so it updates slowly.

Checklist

• INP is checked on mobile and desktop.
• Each interaction has a known trigger.
• Click-driven interactions are identified.
• Duplicate interactions are merged or removed.
• Transitions select only the properties that change.
• Unneeded interactions are removed.
• Page-specific scripts load only on their pages.
• Third-party integrations are reviewed.
• Custom code keeps callbacks small.
• The page was tested again after publishing.

FAQ

Do hover and scroll interactions count toward INP?

web.dev says scrolling and hovering are not measured. Some gestures that include clicks or taps may be. They can still add load time, which Webflow warns about.

Which Webflow interaction is the worst for INP?

Neither Webflow nor web.dev ranks them. Measure your own page in the DevTools Performance panel and with real-user data.

How long until a fix shows in PageSpeed Insights?

Field data covers the previous 28 days. A fix can take that long to show fully.

Dealing with this on a live Webflow site? It is the kind of work I do in Speed. Send me your site and I will tell you what I would fix first.