Google, in its continuous effort to prioritize user experience, has introduced a key metric to measure this responsiveness: Interaction to Next Paint (INP). If you’ve seen a warning in your Google Search Console Core Web Vitals Reports about an “INP issue longer than 200ms (mobile),” it’s a clear signal that your site’s interactivity is falling short, potentially impacting your search rankings and user satisfaction.
This blog post will delve into what this INP issue is all about, and how you can troubleshoot to begin to fixing INP issue: longer than 200ms (mobile). Understanding the “what” and “why” of the INP issue is the first step for resolving this issue. The next, and most crucial, is learning “how” to fix it.
What Actually is INP Error
Interaction to Next Paint (INP) is a Core Web Vital metric that assesses the overall responsiveness of a web page. INP considers all user interactions throughout their visit lifecycle. It measures the time from when a user initiates an interaction (like a click a button or menu link, tap, or keypress) until the next frame is painted on the screen, providing visual feedback.
- A good INP is considered to be 200 milliseconds or less
- An INP between 200ms and 500ms needs improvement
- Anything above 500ms is considered as poor (most important to fix)
The “INP issue: longer than 200ms (mobile)” warning in Google Search Console specifically highlights that your mobile users are experiencing frustrating delays when they try to interact with your site.
Video Tutorial Showing How-to Fix INP issue: longer than 200ms (mobile)
Search Console Report Examples and Tools
Press on the images for full size view
Search console reports groups URLs and shows you where on your website you should check for INP issues. When analyzing example URLs and press on … dots for more options, you’ll be directed to PageSpeed Insights tool.
Although all the Core Web Vitals metrics are important for fixing INP issues, the most important metric is TBT (Total Blocking Time)
Simply run Google Chrome Web Developer Tools > Performance Report and REFRESH the page (make sure to enable Mobile Device Emulator). Start interacting with the page as its recording page load.
After that, you now have AI Assistant that shows INP by Phase.
How Do You Actually Fix INP issue: longer than 200ms for mobile devices
Now that you know where on HTML document interactions occur, and how long they take, you can do various troubleshooting techniques to fix Interaction to Next Paint issues.
Common Culprits Behind Poor Mobile INP
Several factors can contribute to a high INP, especially on mobile devices:
- Heavy JavaScript Execution: Large JavaScript files (especially front-end JavaScript libraries like React, jQuery etc.) can block the main thread of a web page load, delaying the Chrome browser’s ability to respond to user input. How-to fix it: optimize javascript (group files, remove unused functions).
- Complex CSS and Animations: Overly complex CSS selectors and resource-intensive animations can strain the browser’s rendering process. How-to fix it: optimize CSS rules, minimize CSS code, remove animations that aren’t really needed for providing great user-experience.
- Third-Party Scripts: Scripts from advertisements, analytics tools, and social media widgets can often be unoptimized and interfere with your site’s responsiveness. How-to fix it: place scripts in footer section, load scripts using defer or async attributes.
- Large DOM Size: A large and complex Document Object Model (DOM) can increase the time it takes for the browser to process rendering updates. How-to fix it: update to a better less complex website theme.
- Slow Server Response Times: Delays from your server in providing data can also contribute to a sluggish interactive experience. How-to fix it: search for better faster web hosting service, or use CDN (Content Delivery Networks).
Why is a High INP on Mobile a Critical Issue?
Mobile device users in particular expect swift and seamless interactions. They are often on the go, using less powerful devices and potentially slower network connections compared to desktop users. A high INP on mobile can manifest as:
- Laggy buttons: A user taps a button, and nothing happens for a noticeable period.
- Delayed form submissions: After filling out a form and hitting “submit,” there’s a frustrating pause before any confirmation appears.
- Janky menus and accordions: Tapping to expand a menu or view an accordion results in a stuttered or delayed animation.
Delays users experience on your website lead to a poor user experience, increased bounce rates, and can negatively impact your SEO performance, accordingly, Google now uses INP as a ranking signal.
A Look Back: What Was First Input Delay (FID) Google’s Core Web Vitals?
Before the introduction of INP, First Input Delay (FID) was a Google Core Web Vital that measured the time it took for a browser to respond to a user’s first interaction with a web page. This interaction could be a click on a link, a tap on a button, or a keypress in a form field.
In essence, FID quantified the initial impression of your site’s interactivity. A low FID score meant the website felt responsive from the get-go. The target for a good FID score was under 100 milliseconds.
However, FID had its limitations. It only measured the delay of the very first interaction, not subsequent ones. As you know, your website’s user’s entire journey on a page involves multiple interactions, and a good experience requires consistent responsiveness especially on mobile device visits. This is where fast INP becomes important.
