Update April 3rd, 2024: How to identify INP Issues according to Google Google is on the verge of introducing Interaction to Next Paint (INP) issue reporting as an integral part of its Core Web Vitals report in Search Console. This innovative move is a forward-thinking step towards Google's strategic shift scheduled for March 2024, which will witness the phasing out of the First Input Delay (FID) metric and its replacement with INP.
The Transition to INP: A Proactive Approach
Until the transition, INP will serve as a pending metric, but early optimization could unlock the door to a smooth transition. Google made the announcement of this update to Search Console via Twitter, indicating the importance of this change.
A Closer Look at the Upcoming Changes
The new INP data will be prominently displayed in the Search Console reports, assisting website owners in gearing up for the update next year. The Core Web Vitals report is a powerful tool engineered to provide insights into webpage performance, mirroring the actual user experience on your site.
It categorizes URL performance into three comprehensive categories: "Good," "Needs Improvement," and "Poor," providing a straightforward yet effective method to assess user experience.
INP: A Holistic Approach to Page Responsiveness
Unlike FID, which solely measured delay, INP adopts a comprehensive approach to assess the overall responsiveness of a page. A subpar INP score could suggest that an anticipated action, such as an image closeup, takes an excessive amount of time post-user interaction.
Conversely, a commendable INP score signifies swift visual feedback following an interaction, reassuring the user that their input is undergoing processing. Optimal INP scores are below 200ms, while scores between 200-500ms indicate potential for improvement, and anything exceeding 500ms is considered poor.
The Path to INP Optimization
Optimizing for INP involves minimizing delays related to loading scripts, fetching resources, and parsing HTML/CSS to accurately display a page. In the context of complex interactions, the key lies in providing initial visual feedback.
Websites that are optimized for speed and performance should witness commendable INP scores immediately. However, websites that have not been actively monitoring these metrics may face challenges and potentially experience a drop in rankings once the change is implemented.
Understanding Interaction to Next Paint (INP)
INP is a metric that evaluates a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, excluding outliers.
INP is calculated by observing all the interactions made with a page. The chosen value is then a percentile of those interactions. A formula is then used to choose a high percentile value of those interactions. For pages with few interactions, the interaction with the worst latency (the 100th percentile) is chosen. For pages with many interactions, the 99th or 98th percentile is chosen.
An interaction is a group of event handlers that fire during the same logical user gesture. For example, "tap" interactions on a touchscreen device include multiple events, such as pointerup, pointerdown, and click. An interaction can be driven by JavaScript, CSS, built-in browser controls (such as form elements), or a combination thereof.
An interaction's latency consists of the single longest duration of a group of event handlers that drives the interaction, from the time the user begins the interaction to the moment the next frame is presented with visual feedback.
The Components of an Interaction
The primary driver of interactivity is often JavaScript, though browsers do provide interactivity through controls not powered by JavaScript, such as checkboxes, radio buttons, and controls powered by CSS.
As far as INP goes, only the following interaction types are observed:
Clicking with a mouse.
Tapping on a device with a touchscreen.
Pressing a key on either a physical or onscreen keyboard.
Interactions happen in the main document or in iframes embedded in the document—for example clicking play on an embedded video. End users will not be aware what is in an iframe or not. Therefore, INP within iframes are needed to measure the user experience for the top-level page.
INP vs First Input Delay (FID)
While INP considers all page interactions, First Input Delay (FID) only accounts for the first interaction. It also only measures the first interaction's input delay, not the time it takes to run event handlers, or the delay in presenting the next frame.
INP is more than about first impressions. By sampling all interactions, responsiveness can be assessed comprehensively, making INP a more reliable indicator of overall responsiveness than FID.
Looking Forward: Embracing the INP Era
Google's introduction of INP issue reporting in Search Console is designed to ensure a seamless transition for its users. By providing website owners with sufficient time and the necessary tools, Google guarantees you have everything you need to optimize your webpages ahead of the March 2024 deadline.
With the correct approach, INP optimization and a swift and engaging user experience are within reach for any website. The future of web performance metrics is here, and it's time to embrace the change and prepare for the INP era.
Interaction to Next Paint (INP) Test Using Chrome Extension
The Web Vitals extension provides a comprehensive snapshot of your users' page experience, leveraging data from the CrUX API, alongside real-time insights into Core Web Vitals and essential metrics for the ongoing page visit. The Chrome extension can be downloaded here.
How to identify INP Issues according to Google
Update April, 3rd 2024: Google published this video on how to identify INP issues.
Launch Chrome DevTools: Begin by opening the Chrome Developer Tools panel within your web browser. You can accomplish this by right-clicking anywhere on the webpage and selecting "Inspect Element" or by using the keyboard shortcut Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).
Emulate a Slower Mobile Device: Within the DevTools panel, locate the "Device Toggle" icon (resembling a phone and tablet) and click on it to enable mobile device emulation. Next, navigate to the "Network" tab and choose "Mid-tier mobile" from the throttling dropdown menu to simulate a slower mobile network connection.
Capture User Interactions: Switch to the "Performance" tab in DevTools and click the "Record" button (represented by a solid black circle) to initiate a recording. Proceed to interact with the website as a typical user would, such as clicking buttons or following links that trigger actions. Click the "Stop" button (a solid red circle) to conclude the recording when you are done.
Analyze Performance: After stopping the recording, you'll be presented with a performance graph. Locate the "Interactions" track and expand it. This track highlights the time elapsed between your click and the display of the corresponding response on the screen.
Align Interactions with Main Thread: Align the interaction markers on the "Interactions" track with the activity displayed on the "Main" thread to identify any long-running tasks that may be causing slow interactions.
Pinpoint Problematic Code: In the "Summary" pane, you'll find a link to the page's source code. Clicking on this link will direct you to the specific code responsible for the slow interaction you observed. From here, you can begin diagnosing and implementing fixes to address the issue.
By following these steps, you can effectively identify and troubleshoot Interaction to Next Paint (INP) issues, a crucial aspect of optimizing website performance and providing a smooth user experience.
FAQ about INP
What is Interaction to Next Paint (INP) and how is it different from First Input Delay (FID)?
Interaction to Next Paint (INP) is a metric that assesses a webpage's responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions throughout a user's visit. INP considers all interactions, including the time taken to run event handlers and present the next frame. In contrast, First Input Delay (FID) only considers the delay of the first interaction, excluding the time taken for event handlers and subsequent frames. INP provides a more comprehensive measure of page responsiveness than FID.
How will INP be displayed in Google Search Console?
INP data will be prominently featured in the Core Web Vitals report within Google Search Console. The report categorizes URL performance into three categories: "Good," "Needs Improvement," and "Poor." This classification helps website owners assess the user experience on their web pages based on INP scores and other performance metrics.
What is considered a good INP score and what range indicates the need for improvement?
A good INP score is below 200 milliseconds (ms). Scores between 200-500 ms indicate that there is potential for improvement, while anything exceeding 500 ms is considered poor.
How can a website optimize for INP?
Optimizing for INP involves reducing delays associated with loading scripts, fetching resources, and parsing HTML/CSS to accurately display a page. It's essential to provide initial visual feedback during complex interactions. Websites optimized for speed and performance should generally achieve good INP scores.
When is Google planning to replace FID with INP in Search Console?
Google is planning to replace First Input Delay (FID) with Interaction to Next Paint (INP) in March 2024. Google has introduced INP issue reporting in Search Console to ensure a smooth transition for users, and it's recommended that website owners begin optimizing for INP ahead of this deadline.
What types of interactions are observed for calculating INP?
INP takes into account three types of interactions: clicking with a mouse, tapping on a touchscreen device, and pressing a key on either a physical or onscreen keyboard. These interactions can occur in the main document or within iframes embedded in the document, such as clicking play on an embedded video.
How is the final INP value calculated?
The final INP value is calculated by observing all the interactions made with a page and then selecting a high percentile value of those interactions. For pages with few interactions, the interaction with the worst latency (the 100th percentile) is chosen. For pages with many interactions, the 99th or 98th percentile is chosen.
What components drive an interaction's latency, which is considered in INP?
An interaction's latency is driven by the single longest duration of a group of event handlers that are part of the same logical user gesture. These event handlers can be driven by JavaScript, CSS, built-in browser controls such as form elements, or a combination of these.
What is the importance of INP in assessing user experience?
INP is vital for assessing user experience as it provides a holistic view of a page's responsiveness. A good INP score, indicating swift visual feedback, reassures users that their input is being processed. On the other hand, a subpar INP score could suggest delays, which may frustrate users. Thus, INP helps in evaluating and improving the overall user experience on a website.
What kind of support has Google provided to website owners for transitioning to INP?
Google has introduced INP issue reporting within the Search Console, which helps website owners understand and optimize their webpages for INP ahead of the March 2024 deadline. By displaying INP data prominently and categorizing URL performance, Google is ensuring that website owners have the necessary tools and information to make a seamless transition to the new metric.
Comments