shares
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is the most recent Googleโs Core Web Vitals metric.
It measures the responsiveness of a webpage during all interactions. Starting in March 2024, INP replaced First Input Delay (FID), which has until then measured the delay in response to a user command.
Letโs dive deeper into how this new metric works.
How Interaction to Next Paint (INP) Works
Optimal INP Values
To meet the Core Web Vitals standards for Interaction to Next Paint, the 75th percentile of recorded page loads must stay below 200 milliseconds. Specifically:
- – Good INP: โค 200ms
- – Needs Improvement: 200ms to 500ms
- – Poor INP: > 500ms
Measuring Interaction to Next Paint
To measure INP, real user interactions are required, meaning that the metric reflects actual user experiences rather than synthetic tests. Google captures these interactions on web pages through Chrome’s usage data, tracking how users engage with elements such as buttons, links, and scrolling actions.
This data is then aggregated and stored in the Chrome User Experience Report (CrUX), which serves as the official dataset for Core Web Vitals metrics.
The CrUX dataset provides valuable insights into the real-world performance of a website, helping site owners identify areas of improvement based on how their pages respond to user actions across a wide range of devices and network conditions.
Tools for Official INP Metrics
- – PageSpeed Insights: Displays the 75th percentile score from the past 28 days.
- – CrUX Dashboard and Google BigQuery: Provide historical context and deeper insights.
Measuring INP in the Current Session
- – Lighthouse in “timespan” mode: Run a Lighthouse audit in Chrome for session-based measurements.
- – Core Web Vitals Visualizer: Offers a visual representation of INP data.
- – Google Web Vitals Library: Log metrics programmatically:
Improving Interaction to Next Paint
Improving INP involves addressing its three components: input delay, processing time, and presentation delay. Below are actionable strategies:
1. Minimize Input Delay
Most pages are less responsive during the initial load. To optimize:
- – Eliminate unused code: Use tree shaking to remove dead code and code splitting to load small chunks on demand.
- – Defer non-essential code: Load widgets like chat tools only when idle.
- – Optimize slow scripts: Rewrite heavy scripts to make them more efficient.
- – Simplify rendering: Avoid excessive DOM size, large images/videos, and unnecessary CSS animations.
- ย
2. Reduce Processing Time
For user-triggered actions (e.g., form submissions), provide immediate feedback rather than waiting for server confirmation. For instance:
- Display a message like “Submitting…” while processing.
- Yield to the main thread by breaking up JavaScript execution. Use
setTimeout()to allow the browser to render intermediate updates.
Example:
ย
3. Minimize Presentation Delay
Presentation delay occurs when the browser updates visible content. Strategies include:
- Keep the DOM small: Simplify the HTML structure to improve rendering speed.
-
Use
content-visibility: Delay rendering off-screen elements to focus resources on visible content.
Example:
Simplifying Core Web Vitals Optimization with Tuurbo
As seen from these recommendations, optimizing Core Web Vitals, including INP, can be complex and technically demanding. Factors such as your site’s structure and CMS play a significant role in determining the difficulty of implementation.
To streamline this process, we developed Tuurbo, a tool designed to tackle these challenges automatically. With Tuurbo, you can enhance INP and other Core Web Vitals metrics in just 48 hoursโeliminating the need for extensive development or costly technical consultations.
Explore our guides and discover how Tuurbo can help you create a faster, more responsive web experience.
