Interaction to Next Paint (INP) – What it is & how to optimise it 

A slow or unresponsive website can frustrate visitors and drive them away. 

But responsiveness isn’t just about how quickly a page loads, it’s also about how smoothly users can interact with it. 

Google initially measured this with First Input Delay (FID), but in March 2024 introduced a new metric called Interaction to Next Paint (INP) to provide a more refined assessment of user interaction. 

What is it, why does it matter, and how can you optimise your website for the best INP scores? 

What Is INP? 

Like first input delay, INP measures how quickly a website responds to a user interaction, such as a click, tap, or key press. 

The main difference is that whilst FID measures only the first input, INP measures each interaction as the user browses the site. 

The overall INP value is made up of three different components that add up to the overall score:  

• Input Delay: The time between when a user interacts with a page, and when the browser begins processing that interaction. 

• Processing Time: The time taken for the browser to execute the code that handles a user’s interaction. 

• Presentation Delay: The time it takes for the browser to render and display the finished interaction on the user’s screen 

To provide a solid user experience, the benchmark INP time to aim for is 200ms or less for at least 75% of interactive experiences on your pages.   

According to Google’s INP documentation, the performance benchmarks are as follows: 

• 200ms or less → “Good” 

• Between 200ms and 500ms → “Needs Improvement” 

• Over 500ms → “Poor” 

Why Is INP Important? 

INP is important because it directly reflects the experiences users are having on your website. 

Chrome usage data shows that 90% of a user’s time on a page is spent after it loads, meaning that subsequent interactions are just as important as that first load. 

Slow response times can lead to frustration, rage clicks, and departures, resulting in lost enquiries, sales or revenue.  Additionally, a poor INP score can negatively impact your search rankings. INP is a core web vital and therefore plays a part in the Google ranking process.  

While there are many factors that influence search rankings, if your competitors have significantly better INP times than yours, then you could be at a disadvantage. 

How to Measure INP 

Google recommends that the best way to gather INP metrics is to measure real world users, or what’s referred to as “in the field” data. 

If your website qualifies for inclusion in the Chrome User Experience Report (CrUX), you can access real field data showing you the INP times that users are receiving when they visit a page. 

Alongside the CrUX you can also measure using “lab” data provided by Google PageSpeed Insights.   

This tool not only provides INP metrics but also offers insights into what might be causing slow response times and suggestions for improving performance. 

Google Search Console users can also find information on their INP scores within the Experience > Core Web Vitals menu. 

In there you can see any URLs which are flagged as having a time higher than the “good” score of 200ms. 

How to Improve INP 

The first step toward improving INP is to identify what is causing the delays. 

You can begin by running a Google Pagespeed Insights report and checking the “Diagnostics” and “Opportunities” sections for:  

• Long main-thread tasks  

• High Total Blocking Time (TBT)  

• High JavaScript execution time  

• Heavy third-party scripts  

These indicators are often contributors to poor INP performance. 

For identifying more complex INP issues, use your in browser developer tools, following these steps. 

• Go to your webpage, right click, and press “Inspect” (shortcut CTRL + Shift + I for Windows/Linux or Cmd + Option + I for Mac) 

• Navigate to the “Performance” tab. 

• Click the Record button. 

• Interact with your page as a real user would (click buttons, scroll, navigate). 

• Stop the recording after a few seconds. 

This will allow you to see all of the interactions that have taken place on the page. Look for red bars within the activity summary, as these highlight any tasks which have taken a long time to process. 

From here you can investigate any specific slow actions further. 

INP issues are often closely tied to JavaScript execution and how efficiently a page updates in response to user actions, so general “good hygiene” with regards to page building applies here. 

If your page is providing poor INP scores, here are some of the most reliable fixes that you can try. 

Minify and Compress Code 

Minifying unused or bloated code is crucial for improving INP because it reduces the amount of code the browser needs to parse, compile, and execute when handling user interactions. Smaller JavaScript bundles lead to faster execution times, which directly impacts how quickly your page can respond to user input. There are a range of tools and plugins available which can do most of this for you, including the 20i Website Acceleration Suite, included with 20i hosting, which can minify HTML, CSS, Javascript and more with just one click. 

Break Up Long Tasks 

Long tasks (JavaScript execution that takes more than 50ms) are particularly problematic for INP because they block the main thread, preventing the browser from responding to user interactions. For data processing operations, process items in batches and use requestIdleCallback() or setTimeout() to yield to the main thread, giving it a chance to handle any pending user interactions before continuing with your processing work. 

Defer or Lazy Load Elements 

Deferring non-essential elements ensures that critical interactions can be handled more quickly because there’s less competition for the main thread. Use the “defer” attribute for scripts that aren’t needed for initial interactions, and the “async” attribute for scripts that can run independently of page rendering. 

Audit Third Party Scripts, Add Ons and Plugins 

Third-party programs can significantly impact INP by competing for main thread resources, slowing down interfactions. Evaluate whether each script, add on, or plugin that you use provides enough value to justify its performance cost, and look for alternative solutions that offer similar functionality with better performance. Here are the plugins you don’t need with 20i hosting. 

Choose High Performance Hosting 

A lot of your page loading time relies on the server your files are stored on, and the speed at which those files can be delivered.  

For INP specifically, having a responsive server ensures that any server-side operations triggered by user interactions are complete quickly. Choose a reliable hosting provider with fast server response times and high levels of uptime to ensure a fast, reliable service. 

Cache Content on a CDN 

Content Delivery Networks (CDNs) can dramatically improve INP by placing your content on nodes closer to the user, and reducing the time it takes to fetch resources needed after an interaction. 

All 20i hosting includes access to edge caching on our free CDN, with nodes across 6 continents. 

Conclusion 

As with all core web vitals, maintaining a strong INP score requires a commitment to best practices, focusing on efficiency, minimising unnecessary processes, and optimising content for a smooth user experience. 

The shift from FID to INP represents Google’s growing focus on the complete user experience, not just initial page load. This means developers and site owners need to think about wider performance optimisation, rather than just how fast a page loads. 

By doing this, you not only improve your scores, but also provide a fast and seamless experience for your users.