INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. A low INP means the page was consistently able to respond quickly to all—or the vast majority—of user interactions.
Google Search Console INP Score
- Good <=200ms
- Needs Improvement <=500ms
- Poor >500ms
Tips for Fixing Interaction to Next Paint Issues for Mobile or Desktop
When optimizing any website, you should NOT differenciate between mobile or desktop version of interactions, but rather make certain that the web page loads within Core Web Vital Scores shown in Search Console reports regardless of device type. This will ensure smooth user interaction regardless of the device a website visitor uses (which you can never control).
Video Tutorial Showing How-To Fix INP issues
When No INP Issues Detected
Your site is ready for changes coming in March 2024.
When No INP Issues Shown in Search Console Reports
This means Google doesn’t have enough user data to show in Search Console reports. Does not mean the web site is not having INP issues. Test using PageSpeed Insights Tool.
How-To Fix INP issue: longer than 200ms – The Holistic Approach
There is no one single easy fix for Interaction to Next Paint errors, this means, you’ll need to look at the entire website page load architecture. Improving overall performance will improve all Core Web Vital scores. Accordingly provide better user experience.
- Consider the Website Theme Complexity (as in focus on simpler design)
- Consider reducing Apps or Plugin Usage
- Identify Interaction Points (can you reduce them?)
- Identify Long Tasks and Script Functions (can you simplify them?)
Begin Analyzing for
- Clicking with a mouse.
- Tapping on a device with a touchscreen.
- Pressing a key on either a physical or onscreen keyboard.
How-To Fix INP issue: longer than 200ms – Using Web Developer Toolbar
Press on F12 on your keyboard to bring up web developer toolbar.
Press on Performance Tab and RECORD
Interact with the web page elements to record insights
Next, you need to tinker around the reports and identify anything in red color (Long Tasks, recalcuting styles and or other factors such as script function calls which may be further optimized to improve INP scores).
Next you can also take a look at Network Tab and further analyze web page load performance.
What To Do With Your Findings
Once you identify performance issues, it is then matter of optimization of the code that is causing INP errors. I can not cover how to do code optimization here as that will require in-depth knowledge of JS CSS HTML DOM.
What If These How-To Insights are Too Complex?
Should You Fix All Core Web Vitals Issues?
Focus your efforst on Core Web Vitals Errors and Poor Performing URLs first, any URL that needs improvement can at times be ignored for some type of websites as it is difficult to achieve the required Core Web Vitals scores for some websites built on popular Content Management Systems such as Shopify, WiX, WordPress or others.