Core Web Vitals INP issues detected on your sites

Summary: You may have received a notification in Google Search Console that certain sites are having Interaction to Next Paint problems. Google is doing this because INP is going to become one of the three Core Web Vital metrics in March 2024. In this article, you will read how to prepare to continue to succeed for the Core Web Vitals.

Core Web Vitals INP issues detected on your sites

To find out what the Interaction to Next Paint is read our blog Interaction to Next Paint.

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 in search console

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%).

Barry Pollard

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.

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.

Optimize Core Web Vitals and INP for better user experience

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.

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.

Long Animation Frames

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.

URL grouping search console

INP problems per template

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)

device memory and INP

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.

INP metric element

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:

Breakdown the INP

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!

Share blog post