Optimizing INP when individual interactions are slow

How do you optimize INP when only certain user interactions are slow?

Slow individual interactions are first narrowed down in the field by element, event type, and page type. During profiling, the longest segment—comprising waiting, handler work, and rendering—is then broken down and specifically shortened.

Average instead of outliers

• Average instead of outliers Fast standard clicks can mask a rare but problematic interaction that many users will notice.

• Long main thread Independent background work can block the start of input, even though the actual handler is short.

• Deferred work Deferred computation can improve immediate response but make a later required state inconsistent.

Working Example: "Average Instead of Outliers"

Opening a filter usually responds instantly, but stalls after several selections. A profile shows a complete recalculation of results in the click handler; incremental updates and distributed work preserve the filter logic with faster feedback.

Functional Equivalence

• INP Distribution and Proportion of Slow Interactions by Element Group, Route, and Device.

• Duration of input delay, event processing, and next display for the affected action.

Phase separation

1. Field data is supplemented with interaction goal, page type, and rough phase values ​​without capturing unnecessary input content.

2. The problematic action is reproduced with a realistic state, and its main thread tasks are assigned in the profile.

3. Handlers are shortened, long tasks are split, or unnecessary display is avoided, and then the functionality is retested.

Interaction context

• Interaction context Measurement and diagnosis must identify which user action in which UI state triggered the long latency.

• Phase separation – Input lag, processing lag, and presentation lag are considered separately because they have different causes.

• Functional Equivalence – The optimized user action must maintain the same result, the same state transitions, and the same error handling.

Related questions and next steps

An in-depth question answered Automatically detecting performance regressions after deploymentsHow to reliably detect performance regressions directly after a deployment

Further Perspectives When an article should be merged, split, or deleted.

If you want to practically implement "Optimizing Slow Interactions for INP," you can refer to Robust Website Systems This focuses on "Optimizing LCP, CLS, and INP" and "Interaction Context."

Conclusion: Optimizing Slow Interactions for INP

INP is improved by focusing on the slowest relevant interactions, not on an abstract overall JavaScript value. Phase separation prevents actions being taken at the wrong bottleneck.

Sources and Further Information

The following official documentation and standards provide the technical classification.

• Optimize Cumulative Layout Shift – web.devOfficial diagnosis of common CLS causes in images, embeds, dynamic content, and web fonts.

• Optimize Interaction to Next Paint – web.devOfficial guidance on analyzing and improving input lag, event handling, and rendering.

• Optimize Largest Contentful Paint – web.devOfficial Chrome team guidance on decomposing LCP and prioritizing resources needed early.