Interaction to Next Paint (INP)
How quickly your page responds to user interactions. Measures the latency between user input and visual feedback.
What is Interaction to Next Paint?
INP measures the time from when a user first interacts with your page to when the browser is actually able to paint the next frame. This represents the responsiveness of your page to user interactions.
How INP is Measured
Interaction Types
Measures key presses, taps, and clicks. The worst interaction on the page becomes the INP value.
Processing Time
Considers event callback processing time, rendering time, and presentation delay to calculate the total latency.
Good Score
Good: Under 200ms
Needs Improvement: 200-500ms
Poor: Over 500ms
Why INP Matters for SEO
- •Directly impacts Google's Core Web Vitals ranking factor
- •Better user experience increases engagement and conversions
- •Responsive sites have lower bounce rates
- •Users are more likely to return to responsive websites
Common INP Issues
- •Long JavaScript tasks blocking the main thread
- •Heavy DOM manipulation in event handlers
- •Inefficient rendering that causes frame drops
- •Large JavaScript bundles that delay processing
- •Slow resource loading that delays interaction handling
How to Improve INP
Four key areas to focus on for improving your Interaction to Next Paint score.
Optimize Event Handlers
Efficient event handling is crucial for good INP
- Break up long tasks into smaller chunks using requestIdleCallback
- Use web workers for computationally expensive operations
- Debounce or throttle event listeners (scroll, resize, input)
- Avoid heavy DOM manipulations in event handlers
- Use passive event listeners where possible
Reduce Main Thread Work
Free up the main thread for user interactions
- Minimize JavaScript bundle size
- Remove unused JavaScript code
- Defer non-critical JavaScript loading
- Use code splitting and dynamic imports
- Implement efficient rendering patterns
Optimize Rendering Performance
Smooth rendering improves responsiveness
- Use CSS transforms and opacity for animations
- Avoid forced synchronous layouts
- Implement virtual scrolling for long lists
- Use memoization for expensive computations
- Optimize React re-renders with useMemo/useCallback
Improve Resource Loading
Fast resource loading reduces interaction delays
- Preload critical resources with <link rel='preload'>
- Use resource hints like preconnect and dns-prefetch
- Implement efficient caching strategies
- Compress and optimize assets
- Use a Content Delivery Network (CDN)
Tools to Measure INP
Use these tools to measure your INP and track improvements.
- Mobile and desktop analysis
- Specific optimisation suggestions
- Lab and field data
- Performance panel with interactions
- Lighthouse audits
- Real-time metrics
Ready to Improve Your INP?
Start by analyzing your event handlers and breaking up long JavaScript tasks. These typically provide the biggest improvements to INP.
Pro Tip: Use the Performance panel in Chrome DevTools to record user interactions and identify exactly where delays occur in your event handling pipeline.