Google has replaced First Input Delay (FID) with a new Core Web Vitals metric called Interaction to Next Paint (INP). This change aims to better measure a website’s responsiveness and overall user experience.
This article explains what INP is, why it has replaced FID, how to check your site’s INP score, and various techniques to improve INP and improve website responsiveness.
What is Next Paint (INP) interaction?
Google uses INP to evaluate the overall responsiveness of your site. If you click on a drop-down menu and there is a delay with it opening, this latency shows poor response and is related to INP.
If there are problems with INP, the user experience suffers because the user may continue to click through the menu on your site, waiting for a response.
INP is the time it takes from the user’s initial interaction to when the next frame of the site is painted.
Why did INP replace FID?
Google previously announced that INP would replace FID because the latter was a metric that had its limitations, which SEOs were aware of. INP is the “new iteration” of FID, as it will measure a site’s responsiveness in a more comprehensive way.
Your Google Search Console report will no longer show the FID. Site owners should, as they have for a long time, focus on improving the user experience.
Your Core Web Vitals is only a small part of a site’s SEO, but it’s one of the areas you should spend time optimizing because it can make a huge difference (for example, conversions).
A well-performing site that loads and responds quickly will outperform a similar site where the user experience is poor.
How to check your site’s INP
You can check a site’s INP in two ways:
Google Search Console PageSpeed Insights
Go to Search Console > Experience > Core Web Vitals. If you want to run PageSpeed Insights on your own, go to PageSpeed Insights. Enter the URL or domain you want to check and press the Scan button.
Navigate to the Desktop tab and you will see the site’s INP listed. The INP is 50ms, so it’s still green and doesn’t need optimization.
You can judge whether the INP needs optimization on your site based on its score:
> 200ms is “Good”. 200ms to 500ms “Needs improvement”. < 500ms is "Poor".
PageSpeed Insights will allow you to view reports that you can filter to find recommendations for improving your site’s INP. If you’ve focused on FID in the past, you’ll find that many of the improvements you’ve made will also help your site’s INP.
Follow the report’s recommendations to try to improve your site’s INP.
You can also implement some basic INP optimizations that all sites should incorporate to focus more on responsiveness and ensure that the user experience remains high.
Get the daily search newsletter marketers trust.
INP Optimization: How to get started
Focus on what is missing from your site in the report and fix known issues before taking a “one size fits all” approach. If your site’s JavaScript isn’t a problem right now, focus on what’s affecting your users.
Fix JavaScript-related issues
JavaScript is how many sites go from static to interactive. If your site uses JavaScript heavily, you should start optimizing it. You may want to work with your development team because fixing scripts can get complex.
Some basic tasks that will certainly help are:
Use a content delivery network (CDN) to improve file load times and reduce your INP by a few milliseconds. Also minify all your JavaScript and CSS files. Smaller files load faster and will help speed up INP.
long tasks
Tasks that take more than 50ms to process are considered long tasks. Your browser has a “main task”, which can only process a single task at a time. If your JavaScript takes more than 50ms to process, all other tasks are put on hold until the process has run.
What can you do?
Break those long tasks into much smaller runs so they take less time to run and process.
Web.dev has one great guide on this long topic, but the idea is simple:
Split calls to multiple methods across multiple functions. JavaScript treats all functions as a single task, so if you have 10 subfunctions in a main function, the main function will quickly become a long task. Defer code execution, which will require the help of a developer if you don’t already know how to do this. Create a dedicated API developer, which is described in the guide linked above.
If you use setTimeout and requestIdleCallback, you can also split long tasks into shorter ones.
Entrance preparation
You want your site to be ready for user input and responsive as quickly as possible. One way to do this is to defer the code like in the last section or use passive event listeners.
Reducing what is causing INP problems
INP problems are difficult to identify, but there are tools you can use to help diagnose problems. I’m still experimenting with new tools to identify problems with INP, but the following work well:
Real User Monitoring (RUM)
RUM is something you should use to your advantage, especially if you have e-commerce sites. Slow interactions seem to be much higher in the e-commerce sphere than on content sites.
Tools that can help with RUM are:
Chrome DevTools
If you’re a Chrome user, DevTools (press F12 on PC) can help. You want to go to Performance and start recording. From here, navigate to an interactive element on the site and your performance will be recorded.
The tool can help you better understand what’s causing your site to lag and determine how to fix it.
Monitor your site’s Search Console or PageSpeed Insights regularly to stay on top of your INP.
Because extensive JavaScript optimization is required, if the site you’re working on uses extensive JavaScript, work with a developer to optimize it.
The views expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.
