Are you not passing Interaction to Next Paint and don't know why? Our real user monitoring solution can help you understand your users' interactivity issues, whether caused by your code, third parties (or both). INP is easier to fix with the right insights!
Start with field data, ideally a RUM solution, says Google's guidelines:
When reading Google's own documentation on about optimizing INP, you'll notice that they recommend starting with real-world user experience data, which they call field data:
"Ideally, your journey in optimizing INP will start with field data. At its best, field data from Real User Monitoring (RUM) will give you not only a page's INP value, but also contextual 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), and other valuable information.
If your website qualifies for inclusion in the Chrome User Experience Report (CrUX), you can quickly get field data for INP via CrUX in PageSpeed Insights (and other Core Web Vitals). At a minimum, you can get an origin-level picture of your website's INP, but in some cases, you can also get page-level data as well.
However, while CrUX is useful to tell you that there is a problem at a high level, it often doesn't provide enough detail to help fully understand what the problem is. A RUM solution can help you drill down into more detail as to the pages, users or user interactions which are experiencing slow interactions. Being able to attribute INP to individual interactions avoids guesswork and wasted effort."
Hey, that describes RUMvision perfectly, thanks Google! Because in one single solution, we'll make sure to help you get all the insights they describe and more! Let us explain you how that would work and how much time this will save you and your team.
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:
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 12th, 2024!
