To find out what the Interaction to Next Paint is read our blog Interaction to Next Paint.
INP in search console
In mid-July, Google started sending notifications in Search Console about the INP in a big way. Thus, they report when there are problems and with which sites/properties. Of course, they mention the need for this because it will replace First Input Delay (FID) on March 12, 2024.
The interesting thing is that Google first mentions that you are doing it for the UX and only then for search and rankings, which should also be exactly the approach for optimizing the Core Web Vitals.
INP Core Web Vitals
Now we know by now that the INP is going to be a Core Web Vital and could have seen it coming. Why then? Because the former FID metric is too easy to achieve.
- 99.9% of websites in the CrUX report achieve the FID on desktop
- But 93.2% also achieve this metric on mobile.
Looking at the same figures for the new Core Web Vital they do look different, 77.7% of origins have decent INP scores.
It should be noted that this overall number is being pulled up by high desktop rates (96.6%) compared to mobile pass rates (64.2%).
Simply put; it's time for renewal so that optimizing website speed remains a priority. And especially with the growth of JavaScript on the Web via frameworks and third parties, it is wise to keep the focus on metrics that are primarily about interaction with the web page.
What is the difference between FID and INP?
Understanding Interaction to Next Paint (INP) and First Input Delay (FID) can improve your website's performance. These two critical metrics assess your page's load responsiveness differently but together. FID, a popular load responsiveness metric, measures page interaction only. It measures the input delay during that first interaction, not event handler execution or frame presentation. FID's goal is to make a good first impression by minimizing input delay during the load phase.
INP in Search Console, however, is more comprehensive. INP analyzes all page interactions, unlike FID. INP is more reliable than FID because it evaluates total responsiveness.
FID and INP are important for page performance assessment, but they provide different insights. FID evaluates the initial interaction, while INP evaluates all interactions, ensuring a complete page responsiveness evaluation. INP and FID are essential for webmasters looking to improve site performance and user experience. Master these metrics to get a responsive, optimized website.
If you want to learn more, we made a webinar about it
Why does Google make our lives harder?
Whenever Google rolls out a new metric or other adjustments it makes, there also comes backlash, and many people feel that it is being made more difficult for them. Yes, it is harder. But... you're ultimately doing it for yourself and a better user experience which in turn can lead to better business metrics. Google wants results in their search engine to be high quality, in terms of content, but also for Core Web Vitals.
Fix INP issues
How do I fix the Interaction to Next Paint? To optimize or improve the INP you should measure your INP score first.
To stay within the values of the INP, it must be under 200ms. Between 200ms and 500ms it needs improvements and above 500ms the user has a very bad experience. The INP is a metric that is a bit more complex to solve. But to start optimizing the INP, you can take a look at the following.
- Minimize the DOM size
- Be aware of performance costs when rendering HTML using JavaScript;
- Avoid layout thrashing;
- Limit the work that is done on the main thread;
- Avoid long-running tasks on the main thread.
Want to really deepdive into fixing INP, read our Experts Guide! It covers everything you ever wanted to know, from renowned webperformance experts.
Optimizing INP with RUMvision
When you start optimizing the Interaction to Next Paint, it is helpful to know which template(s) and for which visitors these problems occur. Ideally, you even know the exact element that delivers a delay. For example, the button for accepting cookies. With field (RUM) data, this becomes a lot easier because you know what your visitors are experiencing.
Within Google Search Console, you can see within which URL groups (and essentially which template) the INP values are high and require work. However, this data lacks some nuances that we would like to explain to you and make it a lot easier and faster for you to optimize this future Core Web Vital.
Long Animation Frames
The Chrome team proposes updating the Long Tasks API to better understand slow user interface (UI) updates with the Long Animation Frames API (LoAF, pronounced Lo-Af). This can help identify slow animation frames that may affect the responsive Interaction to Next Paint (INP) Core Web Vital metric or other UI jank that affects smoothness.
As RUMvision, we are participating in this origin trial, so users can gain insight into their LoAF data. This makes it a lot easier to solve problems related to the INP.
INP per template
The starting point of optimizing the INP can be to gain insights into which templates are problematic. This can be done both with a real user monitoring tool and Search Console.
Now that you know this you can at least go in the right direction for optimization, but to make it even easier a tools like RUMvision comes into play. Also, Search Console doesn't allow you to dive much deeper for analyzing the data, which RUMvision does.
INP by device memory
Every visitor enters your Web site with different circumstances, these can impact your Core Web Vitals and your other page speed metrics. When we talk about the INP, we look primarily at a user's device memory. This is divided into six groups (data is from a webshop with international traffic):
- 256 MiB (0% of traffic)
- 512 MiB (less than 1% of traffic, fortunately)
- 1024 MiB (1% to 3% of traffic)
- 2048 MiB (10% to 20% of traffic)
- 4098 MiB (50% to 60% of traffic)
- 8192 MiB (25% to 35% of traffic)
Knowing under what circumstances your visitors come in can make certain choices better. For example, if you have a lot of visitors in the 8192 MiB bucket, you’re more likely to get away with a new feature (which may require much JavaScript) than if you mostly have visitors with 4096 MiB of device memory. When you’re purely focused on success for the Core Web Vitals, it’s helpful to know which visitors have the largest share. For example, the group with a high-end device draws the INP value more easily.
INP per element
Yes, it can be even easier. For example, we can identify which precise element causes a high INP value for your real users. We use filters and dimensions. We can also see the text of the element. In particular, the optimization of the INP is much easier and faster. For example, you can see in DevTools which elements may cause problems, but in reality, this can really be different. This is why Google also recommends using RUM data alongside lab data.
With these insights for the INP, you are sure you are in the right direction to optimize your Core Web Vitals. So Search Console is actually a very good first indicator of whether there are problems, from there RUMvision comes in handy.
INP breakdown
The next step for optimization is to identify in which part of the process the problem occurs, so the INP consists of 3 different stages, namely:
- Input delay
- Processing time
- Presentation delay
When you know which of these parts takes up the most time, you can determine which optimization is going to have the most effect on your INP and thus the Core Web Vitals. An INP phase breakdown with real user data looks as follows:
Want to learn why you should optimize INP by using Field data?
Google's webdveloper team gave a great webinar with the tips on how to improve your Interaction to Next Paint by using Field data (which is real users). You can do this yourself, with the methods they described, or simply use RUMvision, which also runs on the Web Vitals library, but without any complicated setup on your end. Please also note the RUMvision logo at the 16th minute.
Conclusion
If you want to optimize the INP, it is wise to read up on this new Core Web Vital first, especially since it is very new and may be the first time you need to optimize this way. When you know what kind of traffic is coming into your website and what element is causing INP issues you already have a 3-0 lead. So with RUMvision you can get started easier and faster and have your Core Web Vitals in order by March 2024!
