INP
Category: Design
What is INP?
Interaction to Next Paint (INP) is a performance metric that measures the responsiveness of a web page. It evaluates how quickly the page reacts to user interactions such as clicks, key presses, and taps.
INP is the successor of FID (First Input Delay) and became part of Google's Core Web Vitals in March 2024.
Basic concepts:
Interaction
Every user action that requires a response from the page
Next Paint
The next frame in which the visual changes appear on the screen
Latency
The time between the interaction and the visual response
Why is INP important?
User experience
Users expect immediate feedback from their actions
Accepted performance
Fast reactions make the website look faster and more modern
SEO impact
INP is part of Core Web Vitals and affects the ranking in Google
Conversion and engagement
Slow response can lead to leaving the website
How is INP measured?
- 1
Interaction
User performs an action (click, tap, key press)
- 2
Input Delay
Time required for the browser to begin processing the event
- 3
Processing Time
Time required to execute the JavaScript code associated with the event
- 4
Presentation Delay
Time required to render the visual changes
- 5
Next Paint
Moment when the changes become visible to the user
Standard evaluation of INP:
Good <= 200 milliseconds
The page reacts quickly and provides excellent user experience
Needs improvement 200 - 500 milliseconds
There is noticeable delay in some interactions
Weak > 500 milliseconds
The page reacts slowly and needs significant improvements
Types of interactions that INP measures:
Mouse clicks
- Clicking on buttons
- Clicking on links
- Interaction with menus
Touch interactions (taps)
- Tapping on mobile devices
- Swiping
- Gesture recognition
Key presses
- Entering data into forms
- Keyboard navigation
- Keyboard combinations
Other input devices
- Sensor screens
- Stylus
- Voice commands
Common reasons for bad INP:
Long running JavaScript
Problem: Complex calculations or processing of large data blocks the main thread
Solution: Task splitting, Web Workers, code optimization
High density of interactions
Problem: Many user actions in a short period of time
Solution: Debouncing, throttling, event listener optimization
Complex animations and effects
Problem: Animations that require too much computation
Solution: Using CSS animations, rendering optimization
Many event listeners
Problem: Many event listeners that are executed for each interaction
Solution: Event delegation, event handling optimization
Large JavaScript libraries
Problem: Heavy frameworks and libraries add overhead
Solution: Code splitting, tree shaking, selection of lightweight alternatives
Techniques for optimizing INP:
JavaScript optimizations
- Task splitting with setTimeout or queueMicrotask
- Using Web Workers for heavy calculations
- Optimization of event listeners with passive option
- Code splitting for reducing the initial bundle
Rendering optimizations
- Using CSS transforms instead of changing layout properties
- content-visibility for rendering optimization
- will-change for browser hints
- Avoiding forced synchronous layouts
Event handling optimizations
- Event delegation for reducing the number of listeners
- Debouncing and throttling for frequent interactions
- Optimization of input handlers
- Removing unnecessary event listeners
Architectural optimizations
- Virtual scrolling for large lists
- Lazy loading for non-critical components
- Selection of efficient algorithms
- Caching of results from calculations
Tools for measuring INP:
- Chrome DevTools Performance panel for analyzing individual interactions
- Lighthouse Full check including INP metric
- PageSpeed Insights Online analysis of INP for desktop and mobile
- Web Vitals JavaScript library For monitoring in real time
- Chrome UX Report Aggregated data from real users
Good practices for INP:
- Test with real devices - especially mobile devices with limited resources
- Monitoring in production - track INP with real users
- Focus on the worst interactions - INP takes the worst value
- Optimize the critical path of interaction
- Use Performance Observer API for monitoring
- Test with different load conditions
- Prioritize user interactions