As web development continues to evolve, so must website performance measurement in order to continue prioritizing the user experience. Interaction to Next Paint (INP) is a Core Web Vital metric that evaluates a webpage’s responsiveness to user interactions. It uses observations of the response time of all click, tap, and keyboard interactions that occur throughout the lifespan of a user’s visit to a page. The final INP web vitals are based on the longest interaction, ignoring outliers. Google will soon be using INP as the new Core Web Vital measurement for how quick it takes a website to process a user interaction. Since Google is the most popular web browser, with 246 million unique Google users in the US, your website must be optimized for its algorithm.
Source: web.dev/inp
Table of Contents
Replacing FID
First Input Delay (FID) is set to be replaced by Interaction to Next Paint in March 2024. Since FID only accounts for the first interaction’s input delay, it does not account for the whole picture. In fact, the time it takes to run event handlers or the delay in presenting the next frame are not even considered with FID.
The transition from FID to INP shows a shift in how web performance is gauged. Instead of a sole focus on the first interaction, the overall efficiency of the website is considered. Since the user experience does not end after the first interaction, it’s important to acknowledge all subsequent interactions. This will call for web developers to improve performance holistically throughout the entire website. Studies show that decreasing site load times by just one-tenth of a second resulted in an 8.4% increase in conversion rates on retail websites.
How It’s Measured
For most websites, the Interaction to Next Paint value with the worst latency is reported. However, for websites with a large number of interactions, random errors can cause the INP to be unusually high on an unresponsive site. To work against this issue, if the site has more than 50 interactions, it will ignore the highest for every 50 interactions. If the site has 50 interactions or less, it will use the highest value. Additionally to this point, It will also use the 75th percentile of all page views as a way to further remove outliers, meaning if 75% of the pages get a score of good, then it will pass the INP criteria. This allows for a better measure of responsiveness.
INP can be measured in the field and in the lab. It is important to note, however, that data from actual users in the field will give you a more comprehensive feel of the performance.
In the Field
In addition to INP web vitals, field data from Real User Monitoring (RUM) can provide you with important data that highlights what specific interaction was responsible for the INP value itself, whether the interaction occurred during or after page load, the type of interaction (click, keypress, or tap).
Moreover, if your website can be included in the Chrome User Experience Report, you can get INP field data from CrUX in PageSpeed Insights. The information presented includes an original-level picture of your INP and, if possible, page-level data. The main drawback of CrUX is that though it can help you find that there is a problem, it doesn’t give you enough information to figure out what the problem is. Meanwhile, RUM can help you inspect the details of the webpage, user, or user interactions that lead to slow interactions. Attributing INP to specific interactions prevents wasted efforts and guesswork.
In the Lab
Lab testing should ideally begin once your field data concludes that your website has slow interactions. If field data is not available, there are methods of replicating slow interactions in the lab. For example, you can follow user flows and test interactions along the way, or you can interact with the page while it is loading, which is when the main thread is busiest.
Optimizing Your Website
Optimizing your website for Interaction to Next Paint will allow it to rank highly on SERPs. The first step for optimization is to identify the problem. Run field and lab tests to understand which interactions on your website are slowest.
Source: web.dev/inp
Input Delay
Input delay begins when the user initiates an interaction on a webpage, and it ends when the event callbacks for the interaction to begin running. The length of an input delay could depend on other activity on the page, such as scripts loading, parsing, fetch handling, timer functions, or other interactions occurring in overlap with one another. No matter the cause, web developers’ goal is to reduce input delay to improve INP web vitals.
One main way to shorten input delay is by reducing the likelihood of long tasks related to script evaluation during a page load. The browser has to complete multiple tasks under the hood, even after the JavaScript has been executed, that are inescapable, such as syntax validation, compiling it to 1s and 0s for the machine to understand, and then ultimately completing the task. Taking steps to reduce the time it takes to complete each of these steps will reduce input delay.
Event Callbacks
Interaction to Next Paint measurements don’t end with input delay. Optimizing event callbacks to run quickly in response to user interaction will also improve INP web vitals. In general, assigning as little work as possible will shorten the event callback most efficiently. However, if your website’s interaction logic is too complex, you can try separating event callbacks to avoid the aggregate work becoming a long task that blocks the main thread.
Another yielding technique is to structure the code in the event callback to limit what gets run. Though this is a more advanced technique, running just the logic necessary to apply visual updates and deferring all else to a subsequent task keeps callbacks light and decreases rendering time.
Another thing that could cause rendering problems is when the styles of an element are both read and updated in the same task without any pauses between the two tasks. To avoid this issue, web developers should instead read the styles first and then queue the write operation using the window.requestAnimationFrame function, which helps avoid rendering problems.
Presentation Delay
The presentation delay is the time between the end of the event callback and the point when the browser paints the next frame. Decreasing presentation delay improves the Interaction to Next Paint value significantly.
Minimizing Document Object Model (DOM) size allows the page to render quickly. The easiest way to minimize DOM size is by making the initial size small. Reducing DOM size makes the website faster because there is less code for the browser to read, which also means that updates to the DOM can be processed faster.
Conclusion
The replacement of FID with INP indicates an important change in web development. With 5.18 billion internet users globally, it’s clear that website performance must become more and more efficient. Many of those users also have lower-than-average internet speed as well as lower-spec devices. That’s the reason Google released the Core Web Vitals (CWV) report in the first place- so websites could be optimized in order to reach every user, not just the ones with high-speed capability. With this jump to INP, interactivity and user experience are now prioritized, as optimization must now go beyond just the first input delay.
INP web vitals are assigned based on the worst latency period on a website, taking the response time of all click, tap, and keyboard interactions that occur throughout the lifespan of a user’s visit to a page into consideration. Interaction to Next Paint can be measured more realistically in the field, or for more analytical purposes in the lab. To optimize your website for INP, decrease input delay by reducing the long tasks, shorten event callbacks using yielding techniques and avoiding layout thrashing, and cut down presentation delay by minimizing the DOM size. Educating yourself about INP is to prepare your website for the big change coming in March 2024.
For help with optimizing your website, contact Coalition Technologies experts today!
