Level 2 - Core web vitals interaction to next paint scorecard rule

Interaction to Next Paint (INP) measures how quickly your website responds to user interactions like clicks, taps, and key presses. This scorecard rule helps you identify and fix responsiveness issues that can frustrate users and negatively impact engagement and conversions.

About this scorecard rule

This interaction to next paint rule is part of Level 2 (Proactive) in the digital experience maturity model. It evaluates whether your pages respond quickly to user interactions, ensuring smooth and responsive user experiences.

Why this matters: Slow interaction responses make interfaces feel sluggish and unresponsive, causing users to click multiple times, abandon tasks, or lose confidence in your application. Fast INP scores indicate an interface that feels snappy and reliable to users.

How this rule works

This rule evaluates whether the 75th percentile of your page's Interaction to Next Paint (INP) time exceeds 200 milliseconds, which is Google's threshold for "good" responsiveness. INP measures the time from when a user initiates an interaction until the browser presents the next visual update.

Important note: INP is measured in milliseconds, not seconds. The metric captures the worst interaction responsiveness during a page visit.

Understanding your score

• Pass (Green): 75th percentile INP is 200ms or less (Good)
• Fail (Red): 75th percentile INP exceeds 200ms (Needs Improvement or Poor)
• Target: Achieve INP times below 200ms for optimal user experience

Google's INP thresholds:

• Good: 200ms or less
• Needs Improvement: 200ms to 500ms
• Poor: Greater than 500ms

What INP measures: INP captures the responsiveness of user interface interactions including clicks, taps, and keyboard inputs. It measures the time from interaction start until the browser can present the visual response to users.

Understanding interaction responsiveness

INP measures three phases of interaction handling:

Input delay

Time from user interaction (click/tap) until event handler starts running

• Caused by main thread being busy with other tasks
• Can be improved by reducing JavaScript execution time

Processing time

Time spent executing event handlers and updating application state

• Includes JavaScript code execution and DOM updates
• Can be optimized through efficient code and algorithms

Presentation delay

Time from handler completion until browser presents visual update

• Includes style calculations, layout, and paint operations
• Can be improved by optimizing CSS and reducing DOM complexity

Common causes of slow INP

• Heavy JavaScript execution: Complex calculations blocking the main thread
• Large DOM manipulations: Extensive changes requiring layout recalculation
• Inefficient event handlers: Poorly optimized code in click/tap handlers
• Third-party scripts: External code interfering with interaction processing

How to improve INP scores

If your score shows poor interaction responsiveness, follow these steps to optimize performance:

1. Identify slow interactions

1. Use New Relic Browser monitoring: Review INP data to identify which interactions are slowest
2. Analyze interaction patterns: Understand which user actions (clicks, form inputs, navigation) have poor responsiveness
3. Check device and network patterns: Determine if slow INP affects specific devices or connection types
4. Prioritize critical interactions: Focus on interactions essential to user tasks and conversions

2. Optimize JavaScript performance

Reduce main thread blocking:

• Break up long tasks into smaller chunks using setTimeout() or requestIdleCallback()
• Use web workers for heavy computational tasks
• Implement code splitting to load only necessary JavaScript

Optimize event handlers:

• Debounce frequent events like scroll or resize
• Use event delegation for better performance with many elements
• Cache DOM queries and calculations outside event handlers
• Avoid synchronous operations in interaction handlers

Improve code efficiency:

• Profile JavaScript performance to identify bottlenecks
• Optimize algorithms and data structures
• Remove unused code and dependencies
• Use efficient DOM manipulation techniques

3. Optimize rendering performance

Reduce layout thrashing:

• Batch DOM reads and writes to minimize layout recalculation
• Use CSS transforms and opacity for animations instead of layout properties
• Implement virtual scrolling for long lists
• Avoid forced synchronous layout operations

Streamline CSS:

• Minimize complex CSS selectors
• Reduce the number of DOM elements requiring style calculation
• Use CSS containment to isolate rendering work
• Optimize CSS animations and transitions

4. Implement performance best practices

Use modern web APIs:

• Implement content-visibility for off-screen content
• Use requestAnimationFrame() for smooth animations
• Leverage browser caching and service workers
• Implement proper resource prioritization

Monitor and test:

• Use Chrome DevTools Performance panel to profile interactions
• Test on various devices, especially lower-end mobile devices
• Implement real user monitoring with New Relic Browser
• Set up alerts for INP regression detection

Implementation guidance

Setting up INP monitoring

1. Configure New Relic Browser monitoring with Core Web Vitals data collection enabled
2. Set appropriate measurement thresholds based on your user experience goals
3. Establish baseline measurements before implementing optimizations
4. Create dashboards to track INP performance across different pages and user segments

Creating actionable alerts

Set up alerts for INP performance degradation:

• Good threshold: Alert when 75th percentile exceeds 200ms
• Poor threshold: Critical alert when 75th percentile exceeds 500ms
• Trend monitoring: Alert on 20% degradation week-over-week
• Segment-specific alerts: Monitor mobile vs desktop performance separately

Building optimization workflows

1. Regular assessment: Schedule monthly reviews of INP performance data
2. Prioritization framework: Focus on pages with high traffic and poor INP scores
3. A/B testing: Test optimizations with user segments to validate improvements
4. Escalation process: Define clear paths for engineering involvement when thresholds are breached

Important considerations

Custom evaluation: These guidelines provide a foundation, but every application is unique. Evaluate INP performance based on your specific user experience goals and business objectives. Consider your user base, typical interaction patterns, and critical user journeys when setting performance targets.

Continuous improvement: Web performance optimization is an ongoing process. User expectations, browser capabilities, and web standards evolve constantly. Regularly review your INP strategy, update measurement criteria, and adapt optimization techniques to maintain excellent interaction responsiveness.

Holistic approach: INP works best as part of a comprehensive performance strategy. Combine it with other Core Web Vitals (CLS and LCP) and traditional performance metrics for complete user experience visibility.

Next steps

After implementing this scorecard rule:

1. Review the L3 Core Web Vitals LCP scorecard rule to complete your Core Web Vitals optimization
2. Explore JavaScript error tracking to identify interaction issues
3. Implement AJAX monitoring for comprehensive frontend observability
4. Consider the Experience implementation roadmap for systematic digital experience optimization