![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/public\")
<\/a><\/figure>\n\n\n\n
What Is Interaction to Next Paint (INP)?<\/h2>\n
Interaction to Next Paint (INP) is a Core Web Vitals metric that measures web page response time. It determines how quickly a web page updates after a user interacts with it, such as by clicking on a link or pressing a button.<\/p>\n <\/div>\n\n\n\n<\/p>
How Interaction to Next Paint (INP) Works<\/h3>
As a responsiveness metric, INP focuses on user interaction delay. It measures how quickly a web page element will respond after you perform a certain action on it.<\/p>
Here’s how INP works:<\/p>
- \n
- A user interacts with a web page, such as clicking on a button.<\/li>\n\n\n\n
- The browser sends a request to the web server for the new content.<\/li>\n\n\n\n
- The web server sends the new content to the browser.<\/li>\n\n\n\n
- The browser renders the new content on the page.<\/li>\n\n\n\n
- The browser measures the time it takes to render the new content and reports it as the INP score.<\/li>\n<\/ol>
A low INP value means the page is highly responsive toward user interaction.<\/p>
As a part of Core Web Vitals<\/a>, INP is important for the following reasons:<\/p>
- \n
- Improved user experience. <\/strong>A high INP value means users have to wait a long time for the web page to react to their interactions, which can be frustrating.<\/li>\n\n\n\n
- Search engine optimization (SEO)<\/strong><\/a>.<\/strong> INP and other Core Web Vitals are part of Google’s page experience signals<\/a>, determining a website’s rank on its results pages. This makes the INP SEO metric especially important.<\/li>\n\n\n\n
- Lower bounce rate. <\/strong>Slow loading time can make users abandon the page, hurting your business’s bottom line.<\/li>\n<\/ul>
![\"Hostinger](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Interaction to Next Pain (INP) as a Core Web Vital<\/h3>
INP replaced the First Input Delay (FID)<\/a> metric in March, 2025. INP vs FID are similar, but they work differently.<\/p>
FID<\/a> measures page load responsiveness only when the website is first opened. On the other hand, Google’s INP metric accounts for all user interaction delays throughout an entire visit after the page has loaded.<\/p>
According to Google’s data, most of a user’s time spent on a website is after it loads. As such, INP can measure page interactivity much more effectively than FID.<\/p>
INP also differs from other Core Web Vitals like Cumulative Layout Shift (CLS)<\/a> and Large Contentful Paint (LCP)<\/a>. CLS evaluates how much a site can shift unexpectedly, whereas LCP determines how fast a web page displays its largest elements.<\/p>
How to Measure Interaction to Next Paint (INP)<\/h2>
Before initiating Interaction to Next Paint measurement, let’s see what INP values mean.<\/p>
INP is measured in milliseconds (ms). A Good<\/strong> benchmark is below 200 ms, and anything between that and 500 ms is seen as Needs Improvement<\/strong>. 500 ms or higher is considered Poor<\/strong>.<\/p>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/how-to-measure-INP.png\/public\")
<\/a><\/figure><\/div>Various factors can affect an INP value, such as the size and complexity of a web page, as well as the number of JavaScript and CSS files loaded.<\/p>
You can measure a website’s INP value using website speed testing<\/a> tools. This type of application can provide insights into how your Core Web Vitals metrics are performing and how to optimize for them.<\/p>
Google PageSpeed Insights<\/a> <\/strong>is a popular option for measuring INP and website performance. It will audit a site and provide details on what best practices to implement. You can also see your site speed when loaded on mobile and desktop devices.<\/p>
PageSpeed Insights displays two types of results. The top section shows a site’s Core Web Vitals metrics from the Chrome UX report<\/a>, a collection of real-world performance data from Chrome users.<\/p>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/pagespeed-insights-real-field-data.png\/public\")
<\/a><\/figure><\/div>The report below displays the same metrics, but they’re from a controlled lab environment running on Google Lighthouse. This data can be useful for testing new features before publishing them live.<\/p>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/pagespeed-insights-lab-data.png\/public\")
<\/a><\/figure><\/div>If the site’s INP data is unavailable, check its Total Blocking Time (TBT). This metric measures a different type of responsiveness. It focuses on how long a page is blocked from responding to interaction during the page load.<\/p>
Toward the bottom, there are suggestions on how to improve the Core Web Vitals metrics, like so:<\/p>
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/pagespeed-insights-opportunities-diagnostics.png\/public\")
<\/a><\/figure><\/div>Hostinger clients can use the built-in PageSpeed Insights integration<\/a> on hPanel. Open your hosting account dashboard → Performance<\/strong> → Page Speed<\/strong> to access it.<\/p>
![\"Hostinger's](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/hostinger-pagespeed-insights-hpanel.png\/public\")
<\/a><\/figure><\/div>How to Optimize for Interaction to Next Paint (INP)<\/h2>
Let’s discuss how to perform INP optimization on your website.<\/p>
Important!<\/strong> Most of these methods require some technical knowledge of JavaScript. Before making changes on your website, ensure to back it up<\/a> in case of errors.<\/p><\/div>\n\n\n\n<\/p>
1. Optimize JavaScript Execution<\/h3>
JavaScript is<\/a> a major component of many web pages. It adds various interactive elements but can also slow down site performance.<\/p>
When executed, JavaScript runs on the main thread – the one responsible for rendering a web page. If the code is inefficient, it can block the thread and prevent the page from responding to user interaction.<\/p>
The key to speeding up responsiveness is to optimize your JavaScript, which you can do by:<\/p>
- \n
- Minifying JavaScript files<\/strong><\/a>.<\/strong> It will reduce the JavaScript size, making them load faster.<\/li>\n\n\n\n
- Enabling GZip compression<\/strong><\/a>. <\/strong>Another popular method to make site files and data smaller.<\/li>\n\n\n\n
- Using a JavaScript framework.<\/strong> This tool can help organize your JavaScript code to make it more efficient. AngularJS and jQuery<\/a> are some well-known examples.<\/li>\n\n\n\n
- Using a CDN<\/strong><\/a>.<\/strong> Short for content delivery network, this feature will deliver your JavaScript files from servers close to your target audience, improving loading times. To use Hostinger’s in-house CDN, users should buy a Business hosting plan<\/a> or higher.<\/li>\n<\/ul>
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/hpanel-cdn-page.png\/public\")
<\/a><\/figure><\/div>2. Use Web Workers<\/h3>
Web workers are a service that lets JavaScript run independently off the main thread. They’re useful for executing complex operations in the background.<\/p>
Say you have a WordPress website full of images, videos, and data. Web workers can offload these heavy JavaScript computations to a background thread to prevent freezing your interface.<\/p>
To use web workers, you will need to create two JavaScript files. One is the main.js<\/strong> to initiate the web worker script tasks:<\/p>
\/\/ main.js\nif (window.Worker) {\n \/\/ Create a new worker instance\n const myWorker = new Worker('worker-script.js');\n \/\/ Send a message to the worker\n myWorker.postMessage('Hello Worker!');\n \/\/ Listen for messages from the worker\n myWorker.onmessage = function(e) {\n console.log('Message received from worker', e.data);\n };\n} else {\n console.log('Your browser does not support Web Workers.');\n}<\/pre>Another is worker.js<\/strong>, which contains the web worker’s tasks. Here’s a simplified example:<\/p>
\/\/ worker.js\nonmessage = function(e) {\n console.log('Message received from main script', e.data);\n \/\/ Perform heavy computation or data processing here\n \/\/ Then send a message back to the main script\n postMessage('Hello Main Script!');\n}<\/pre>To include these scripts in your website, check your specific technology or platform’s documentation and follow the standard process.<\/p>
For WordPress users, use the wp_enqueue_script<\/a><\/strong> function to include web worker scripts within your theme’s functions.php file<\/a>.<\/p>
3. Break Up Long Tasks<\/h3>
Breaking up long JavaScript tasks is another way to prevent main thread blocking.<\/p>
Let’s use an example of online shoppers browsing through an eCommerce site. Without breaking up long tasks, the main thread needs to fetch, process, and render large amounts of product data and images simultaneously – consuming a lot of time and resources.<\/p>
While this process is happening, the main thread is occupied. This makes the website load slowly and unable to respond to the next user interaction.<\/p>
Breaking up long tasks allows the web browser to handle smaller chunks at a time. As a result, the main thread is free to perform more essential tasks.<\/p>
You can use two types of code to separate long tasks:<\/p>
- \n
- setTimeout<\/strong><\/a>.<\/strong> A built-in JavaScript function that schedules a specified task to run after a certain delay in milliseconds. It can defer the execution to a later time, preventing the main thread from being blocked for an extended period.<\/li>\n\n\n\n
- requestIdleCallback<\/strong><\/a>. <\/strong>This API provides a more efficient approach as it ensures that the functions are executed during periods of idle time. It also offers a deadline parameter, letting you control how much time the task can take without affecting important processes.<\/li>\n<\/ul>
4. Prioritize Input Readiness<\/h3>
Input readiness refers to when a web page is ready to respond to user interaction. When it’s not, it usually means the browser’s main thread is busy performing other tasks.<\/p>
Here’s how to prioritize input readiness to improve INP:<\/p>
- \n
- Deferring non-critical JavaScript<\/strong><\/a>. <\/strong>Some JavaScript is not essential for the initial page load and can be executed after the main content. This allows the main thread to prioritize user interactions and improve overall page responsiveness.<\/li>\n\n\n\n
- Throttling.<\/strong> This technique controls a function execution’s frequency. For instance, when users scroll down, that event can trigger the same code hundreds of times per second. Throttling allows it to only execute once every certain millisecond or so, no matter how many times the event is actually fired.<\/li>\n\n\n\n
- Debouncing. <\/strong>This prevents a function from running again until some time has passed. For example, when users resize their browser window, this event may trigger the same process repeatedly. Debouncing can delay its execution until the user stops resizing for a specified time.<\/li>\n\n\n\n
- Passive event listeners. <\/strong>Event listeners are programming constructs that spot specific events, like scrolls and taps. Making them passive will tell the browser not to wait for a certain function to finish executing and continue with other tasks in the meantime.<\/li>\n<\/ul>
5. Provide Immediate Feedback<\/h3>
Some interactions can result in noticeable response delays, like submitting a form with multiple data inputs.<\/p>
That’s where immediate feedback comes in. This tactic gives users a visual indication the website has received and is processing their request.<\/p>
With immediate feedback, users won’t wonder whether the website has registered their input. It can give the impression of faster performance, even if it doesn’t reduce the actual processing time.<\/p>
Check out some examples of immediate feedback cues:<\/p>
- \n
- Loading indicators.<\/strong> Show a spinner or a progress bar when a process is underway, especially when displaying data or moving to a new page.<\/li>\n\n\n\n
- Acknowledgment pop-ups.<\/strong> For actions like adding an item to a cart, it’s good to display a message that confirms the action was successful.<\/li>\n\n\n\n
- Form field validation.<\/strong> For example, if a user has input an incorrectly formatted email address, show an error message immediately rather than waiting until they submit the form.<\/li>\n<\/ul>
![\"Example](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/hostinger-domain-checker-loading-indicator.png\/public\")
<\/a><\/figure><\/div>What Interaction to Next Paint (INP) Means for Site Owners<\/h2>
INP and website ranking will have a strong correlation. Failing to optimize it can lead to poor website speed, user experience, and in turn, organic traffic performance.<\/p>
In fact, Economic Times<\/a> has proven that improving INP has significant business benefits. They’ve reduced their bounce rate by 50%<\/strong>, meaning visitors are likelier to stay and explore their content.<\/p>
Identifying what makes your website’s responsiveness slow is key to optimizing for INP. Conduct production tests<\/a>, examine how your website handles user input, and consult with a web developer if needed.<\/p>
\nDiscover More Resources to Optimize For INP and User Experience<\/h4>\n
Website Optimization: Top 10 Strategies to Improve Speed + Tools<\/a>
\nEverything You Need to Know About Website Performance<\/a>
\nHow to Create an SEO-Friendly Website<\/a>
\nHow to Make a Website Mobile-Friendly<\/a>
\nWeb Design Best Practices to Attract More Website Visitors<\/a><\/p>\n <\/div>\n\n\n\n<\/p>Conclusion<\/h2>
Short for Interaction to Next Paint, INP is a Core Web Vitals metric that replaced FID. It measures the time it takes for a website to respond to user interaction. The lower the score, the faster your site’s responsiveness is.<\/p>
The difference between INP and FID is that the first measures all user interaction delays in an entire session. The second metric focuses on the same element only when the website is first opened.<\/p>
Use PageSpeed Insights to measure your website’s INP. If the data is unavailable, you can also refer to your site’s TBT metric.<\/p>
Optimizing for INP involves several methods – from making your JavaScript execution more efficient and using web workers to prioritizing input readiness. Regardless of the process, back up your website to anticipate any errors when making changes.<\/p>
<\/a><\/figure>Interaction to Next Paint (INP) FAQ<\/h2>
Check out answers to frequently asked questions about the INP Google ranking factor.<\/p>
Is INP a Core Web Vitals Metric?<\/h3>
Yes, INP is a Core Web Vitals metric that replaced FID for measuring responsiveness in March 2025.<\/p> <\/div>
What is a Good INP Score?<\/h3>
A good INP score is below 200 ms. A value between 200 and 500 ms is considered as Needs improvement,<\/strong> and anywhere above 500 ms is Poor<\/strong>.<\/p> <\/div>
What Is the Difference Between INP and First Input Delay?<\/h3>
FID measures a web page’s time to respond to the first user input, while INP assesses the response time to any interaction by the website visitor – not just the first one. This makes INP a more comprehensive responsiveness metric.<\/p> <\/div>
How to Identify INP Problems on Your Website?<\/h3>
Use PageSpeed Insights to get your website’s INP score and suggestions for improving its performance.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"
Interaction to Next Paint (INP) is one of the performance metrics Google has introduced to measure web pages’ responsiveness. If you want to improve your site’s search engine rankings, understanding what is INP and how to optimize for it is crucial. Otherwise, your pages may rank lower in search results. This article will look into […]<\/p>\n
- Acknowledgment pop-ups.<\/strong> For actions like adding an item to a cart, it’s good to display a message that confirms the action was successful.<\/li>\n\n\n\n
- Throttling.<\/strong> This technique controls a function execution’s frequency. For instance, when users scroll down, that event can trigger the same code hundreds of times per second. Throttling allows it to only execute once every certain millisecond or so, no matter how many times the event is actually fired.<\/li>\n\n\n\n
- requestIdleCallback<\/strong><\/a>. <\/strong>This API provides a more efficient approach as it ensures that the functions are executed during periods of idle time. It also offers a deadline parameter, letting you control how much time the task can take without affecting important processes.<\/li>\n<\/ul>
- Enabling GZip compression<\/strong><\/a>. <\/strong>Another popular method to make site files and data smaller.<\/li>\n\n\n\n
- Search engine optimization (SEO)<\/strong><\/a>.<\/strong> INP and other Core Web Vitals are part of Google’s page experience signals<\/a>, determining a website’s rank on its results pages. This makes the INP SEO metric especially important.<\/li>\n\n\n\n
- Improved user experience. <\/strong>A high INP value means users have to wait a long time for the web page to react to their interactions, which can be frustrating.<\/li>\n\n\n\n