How-To Fix INP issue: longer than 200ms

Search Console Interaction to Next Paint

Note: Interaction to Next Paint (INP) is a pending Core Web Vital metric that will replace First Input Delay (FID) in March 2024. INP assesses responsiveness using data from the Event Timing API.

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
  • Group JavaScript and or CSS files to reduce HTTP Requests to Server
  • Optimize JavaScript and or CSS files to reduce file size
  • 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

steps for fixing INP performance issues

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

steps for fixing INP performance issues

Next you can also take a look at Network Tab and further analyze web page load performance.

steps for fixing INP performance issues

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?

Since most websites aren’t custom built, it may be cumbersome for some website owners who do not possess technical skills to fix INP errors. In such cases, search for trustworthy web developer who has JavaScript and HTML coding knowledge to assist you fixing Core Web Vitals issues.

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.

Learn More About HTML Render Process

For web developers, learn more about rendering process here, and also you may watch this video to learn how HTML page rendering works.

By RankYa

RankYa digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes achieve greater results online. Based in Melbourne Australia RankYa serves valued clients worldwide by providing personalized services.

We love sharing our proven experience through how to videos and complete courses related to business website marketing, conversion optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress WooCommerce Shopify. Thank you for visiting our blog.

2 comments

  1. Helpful information, thank you for sharing.

    I just found this issue in my GSC report and going to rectify this before march.

Questions? Leave a Comment!

Your email address will not be published. Required fields are marked *