Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024, fundamentally changing how Google evaluates page responsiveness. This article explores INP's impact on SEO and optimization strategies.
What is INP?
INP measures the latency of all user interactions throughout the entire page lifecycle—not just the first click. It observes the duration from the user interaction to the next paint, capturing the full experience of:
- Input delay (time before event handlers start)
- Processing time (event handler execution)
- Presentation delay (time to paint the next frame)
INP Scoring Thresholds
- Good: Under 200ms
- Needs Improvement: 200-500ms
- Poor: Over 500ms
Why INP Replaced FID
FID only measured the first interaction, missing subsequent responsiveness issues. A page could have good FID but terrible INP if:
- The page becomes sluggish after JavaScript loads
- Long tasks block interactions during scrolling
- Third-party scripts interfere with later interactions
SEO Impact of INP
Direct Ranking Impact
Google confirmed INP is part of the page experience ranking factor. Sites with poor INP may experience:
- Lower rankings in competitive SERPs
- Reduced visibility in mobile search
- Exclusion from certain rich results
Indirect SEO Impact
Poor INP correlates with:
- Higher bounce rates
- Lower time on page
- Reduced conversion rates
- Decreased pageviews per session
Common INP Issues and Fixes
1. Long Main Thread Tasks
Any task over 50ms is considered a long task. Solutions:
- Break tasks using
scheduler.yield() - Use
requestIdleCallback()for non-urgent work - Split large computations into smaller chunks
2. Expensive Event Handlers
Common culprits:
- Heavy React re-renders
- Complex DOM manipulation on click
- Synchronous analytics calls
- Large data processing on user action
3. Third-Party Script Interference
Third-party scripts are the #1 cause of poor INP:
- Analytics scripts
- Chat widgets
- A/B testing tools
- Advertising scripts
Optimization Strategy
// Yield between operations
async function handleInteraction() {
showLoadingState();
await scheduler.yield();
const result = processComplexData();
updateUI(result);
}
Measuring INP
Field Data Sources
- Chrome UX Report
- PageSpeed Insights (field data tab)
- Search Console Core Web Vitals report
- Custom RUM with web-vitals library
Lab Testing
- Chrome DevTools Performance panel
- Lighthouse (new INP audit)
- WebPageTest with interaction testing
INP Optimization Checklist
- Audit all event handlers for performance
- Implement yielding in long operations
- Defer non-critical third-party scripts
- Use Web Workers for CPU-intensive work
- Optimize React/Vue render cycles
- Test with real user interactions
- Monitor INP in production with RUM
- Set performance budgets for interaction latency