What is INP? Google’s Upcoming Core Web Vitals Update Explained

Google is adding a new metric to its Core Web Vitals this 2024. Here’s what you need to know about Interaction to Next Paint.

Anissa Maligat
Anissa Maligat January 23, 2024

Just recently, Google rolled out Core Web Vitals, a suite of standardized metrics aimed at helping developers decode the user experience on web pages. Currently, website aficionados swear by three crucial metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). 

But brace yourself for a change in the digital winds! Google is shaking things up by replacing FID with the sleek Interaction to Next Paint (INP) metric come March 2024. Delve into the intricacies of this impending Core Web Vitals update to elevate your website’s INP value.

What Does INP Mean?

According to current Google Chrome usage data, users spend 90% of their time on web pages after they’ve loaded. Hence, it’s crucial to assess page responsiveness consistently, which INP measures.

The INP metric evaluates how responsive web pages are when they’re accessed by monitoring the latency of all clicks, taps, and keyboard presses made during page visits. A page’s INP value equals the longest interaction monitored without exceptions.

How Does INP Work?

A website’s INP score is calculated through these steps:

  1. Users interact with any of a web page’s elements. For example, you click the search bar on top of an E-commerce website and type a query.
  2. The browser “asks” the webserver to load new content.
  3. The server sends the requested content to the user’s browser.
  4. The browser loads the content on the page.
  5. The browser measures how long the requested content is rendered and reports it as the INP score.

What’s Considered a Good INP Value?

If your web pages get low INP scores, it means they’re extremely responsive to user interactions. Google considers INP values below or at 200 milliseconds the standard scores for good responsiveness.

Conversely, INP metrics above 200 milliseconds and below or at 500 milliseconds indicate you should improve your website’s responsiveness. But if your page’s INP score reaches over 500 milliseconds, it’s less responsive than usual.

When measuring INP, you can start by assessing the 75th percentile of page loads recorded in the field, segmented across mobile and desktop devices. The final value is your web page’s INP score.

Why is INP an Important Core Web Vitals Metric?

First, INP values determine whether your website delivers good UX. With high INP scores, site visitors wait until your page responds to their interactions. Nothing’s more annoying than an unresponsive website, especially if you need critical information fast.

The INP metric is also crucial to your SEO (search engine optimization) efforts. It’s included in Google’s page experience signals that influence your website’s search rankings. Essentially, good UX and other factors, like valuable content, help you move toward Google’s summit.

Finally, INP plays a pivotal role in your site’s bounce rate. Slow-loading or unresponsive pages push visitors to find and access other sites where they can get information swiftly. As a result, your bottom line decreases.

What’s the Difference Between the INP & FID Metrics?

Although the INP and FID metrics assess a website’s responsiveness to user interactions, they work differently. One takes all page interactions into account, while the other considers the first interaction made on the website.

Furthermore, FID assesses the first interaction’s input delay instead of how long event handlers (functions performed by applications or operating systems whenever events are executed) take to run or how long until the next frame is rendered. A low FID score means your website is responsive while it’s loading.

With INP, all interactions are sampled for an extensive evaluation of page responsiveness, making it more reliable than FID.

Can My Website Fail to Record an INP Score?

Your website can fail to record an INP score if it observes no user interactions or monitored gestures other than clicks, taps, or keyboard presses. Scrolling, hovering over elements, or similar gestures are excluded in INP value computations.

In other cases, your page could return no INP value if search crawlers, headless browsers, or bots access it.

How Do I Measure My Website’s INP Score?

You can measure your website’s INP score in the field and in the lab with multiple tools to help you get this value.

Field Data

Google recommends gathering field data first to optimize a page’s INP. If you use Real User Monitoring (RUM), it provides you with an INP score and information about the interactions influencing the value, when they occurred, how users interacted with your page, and more.

How to Get Field Data for Improving INP

Website speed testing tools are great options for assessing your website’s INP. Using these applications shows you the page’s current Core Web Vitals performance and how to improve specific metrics.

Screenshot from Google PageSpeed Insights

Many site owners and developers use Google PageSpeed Insights to evaluate INP and website performance. The tool audits websites, offers insights on how to optimize their performance and shows site speeds on mobile and desktop devices.

Website owners with access to the Chrome User Experience Report (CrUX) in PageSpeed Insights can collect INP and Core Web Vitals-related information from there. CrUX gives you origin-level data and, sometimes, page-level data for your website’s INP. However, it’s advisable to use RUM to identify slow pages, users, or user interactions.

Lab Data

Google also recommends conducting lab tests after collecting field data that indicates slow interactions. Otherwise, you can use several strategies when reproducing these interactions, including:

How Do I Improve My Website’s INP Score?

If your website gets a high INP value, the following tips should help you achieve an optimal score.

Identify & Decrease Input Delay

User interactions with your page begin with input delays. These events can be brief or long, depending on activities within the site. An active main thread, fetch handling, timer functions, or swift and overlapping interactions result in varying lengths of input delays.

That said, you’d want minimal input delays to allow interactions to run event callbacks immediately. Ensuring a web page’s responsiveness while loading requires knowing how to make it perform tasks quicker, leading to fast load times.

Optimize Event Callbacks

Besides decreasing input delays, it’s important to ensure that event callbacks after user interactions are completed swiftly.

Google advises developers to minimize their work on event callbacks to improve INP scores. Still, some websites run on complicated interaction logic, meaning their activity can be decreased as little as possible. Dividing the work into separate tasks is a good way to optimize event callbacks, as the main thread’s response to user interactions isn’t restricted. You can use the setTimeout code for this task, which makes a callback run in a new task.

Reduce Presentation Delay

User interactions also include a presentation delay that starts when event callbacks finish running and ends at how well the browser loads the next frame with the resulting visual changes.

Here are three tips to achieve minimal presentation delays.

Improve How Your Website Executes JavaScript

While JavaScript gives websites more interactive elements, it can significantly reduce site performance. A slow code restricts the main thread’s functionality and your page’s responsiveness.

Optimizing your JavaScript code helps your website act on user interactions. It can be as simple as reducing JavaScript file sizes or enabling GZip compression for smaller data. Alternatively, optimize your code with a framework like AngularJS or jQuery, or use a content delivery network (CDN) to send JavaScript files to site visitors.

Give Immediate Feedback to Users

Sometimes, a website can take too long to respond to user interactions. Immediate feedback informs site visitors that your page has received and is processing their request. These visual indicators satisfy user curiosity about their input and make them think that your website works faster.

Examples of immediate feedback include loading indicators, acknowledgment pop-ups, and form field validation. Loading indicators, like spinners or progress bars, are ideal for processing new content or accessing new pages. Meanwhile, acknowledgment pop-ups tell users they’ve completed an action, and form field validation can indicate whether specific details were entered correctly.

Improve Your Website’s INP for Optimal User Experience

A website with good UX drives desirable results for your business — increased traffic, higher search rankings, loyal customers, and more. The new INP metric in Google’s Core Web Vitals helps you achieve these outcomes by assessing page responsiveness. This way, you ensure your website handles user interactions smoothly.

For more actionable strategies and digital marketing updates, visit the Growth Rocket blog today.

More From Growth Rocket