Core Web Vitals: Interaction to Next Paint (INP)

16 Mar 2023
About 6 min read
Web performance Core Web Vitals INP

Have you ever clicked on a button or typed something on a website and waited for a long time before anything happened? If so, you have experienced a poor user experience due to low responsiveness. Responsiveness is how quickly a website responds to user input, such as clicks, taps, scrolls, and keystrokes. A responsive website should provide immediate feedback to the user and avoid delays or freezes.

interaction to next paint

One way to measure responsiveness is by using an experimental metric called Interaction to Next Paint (INP). INP observes the latency of all interactions that a user has made with a website, and reports a single value that represents the longest interaction observed. A low INP means that the website was consistently able to respond quickly to all or most of the user interactions.

INP is different from other metrics that measure responsiveness, such as First Input Delay (FID) or Total Blocking Time (TBT). FID measures the delay between the first interaction and the first browser response, while TBT measures the total amount of time that the main thread was blocked by long tasks. Both FID and TBT only capture a subset of interactions and do not account for subsequent interactions that may occur throughout the lifespan of a page visit. INP captures all interactions and provides a more holistic view of responsiveness.

So how can you improve your INP score? Here are some tips:

Let's see each of them in detail:

1. What is JavaScript execution time?

JavaScript execution time refers to the amount of time spent parsing, compiling, and executing JavaScript files on the browser. By default, JavaScript runs on the main thread, which means it blocks other tasks such as rendering and responding to user input. Therefore, reducing JavaScript execution time can free up the main thread and make your site more responsive.

How to measure JavaScript execution time?

One of the tools you can use to measure JavaScript execution time is Lighthouse, an open-source tool that audits web pages for performance, accessibility, best practices, and SEO. Lighthouse provides a metric called Total Blocking Time (TBT), which measures how much time the main thread was blocked by long-running JavaScript tasks during page load.

You can run Lighthouse from Chrome DevTools, from the command line, or as a Node module. You can also use GTmetrix, a web performance testing tool that incorporates Lighthouse into its analysis.

How to reduce JavaScript execution time?

There are several strategies you can apply to reduce JavaScript execution time, such as:

2. How to Optimize Images and Fonts for Your Website

Images and fonts are essential elements of any website design. They can enhance the visual appeal, convey the message, and create the mood of your site. However, they can also affect the performance and loading speed of your site if they are not optimized properly.

Optimizing images and fonts means reducing their file size without compromising their quality or readability. This can improve your site's user experience, SEO ranking, and conversion rate. Here are some tips on how to optimize images and fonts for your website.

Optimize Images

Optimize Fonts

3. Using performance budgets to improve INP

One of the key metrics that performance budgets focus on is Input Delay (INP), which measures how long it takes for the browser to respond to user interactions such as clicks, taps, or scrolls. A high INP means that the user has to wait longer for feedback from the website, which can lead to frustration and abandonment.

To use performance budgets for INP, you need to first define your target INP value based on your audience's needs and expectations. For example, Google recommends an INP of less than 100 milliseconds for most websites. Then, you need to measure your current INP using tools like Lighthouse or WebPageTest. Next, you need to identify and prioritize the factors that affect your INP, such as JavaScript execution time, network latency, or main thread blocking. Finally, you need to implement solutions to optimize your INP, such as code splitting, lazy loading, caching, or using web workers.

Using performance budgets for INP can help you deliver a better user experience and improve your website's conversion rates and retention rates. By setting clear and measurable goals for your website's performance, you can ensure that you are meeting your users' expectations and providing them with a fast and responsive website.


By following these tips, you can improve your website's responsiveness and provide a better user experience for your visitors. Remember that INP is an experimental metric that may change over time as it evolves with feedback from developers and users. You can use tools like PageSpeed Insights or Chrome DevTools to measure your INP score and identify opportunities for improvement.

Thanks for reading. Please let me know if you have any comments by pressing the comment button below.


← Home