Core Web Vitals: Interaction to Next Paint (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.

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:

• Reduce JavaScript execution time. JavaScript is often the main culprit for causing long tasks that block the main thread and delay browser rendering. You can reduce JavaScript execution time by splitting your code into smaller chunks, using code splitting techniques, removing unused code, deferring non-critical scripts, and using web workers or service workers to offload some work from the main thread.
• Optimize images and fonts. Images and fonts are often large resources that take time to download and render. You can optimize images by choosing appropriate formats, compressing them, resizing them, using responsive images techniques, lazy loading them, and using image CDNs. You can optimize fonts by choosing web-safe fonts, using font-display property, subsetting fonts, preloading fonts, and using font CDNs.
• Use performance budgets. Performance budgets are limits on certain metrics that you set for your website. For example, you can set a budget for how much JavaScript or image size you allow on your pages. Performance budgets help you monitor your website's performance and prevent it from degrading over time due to adding new features or content. You can use tools like Lighthouse or WebPageTest to set up performance budgets and track them over time.

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:

• Implementing code-splitting: Code-splitting is the technique of splitting your JavaScript bundle into smaller chunks that are loaded on demand. This way, you can avoid loading unnecessary code for parts of your site that are not visible or used by the user. You can use tools like webpack or Rollup to implement code-splitting for your site.
• Removing unused code: Unused code is any code that is not executed or referenced by your site. It can come from previous versions of your site, third-party libraries, or unused features. Unused code adds extra bytes to your JavaScript files and increases parsing and compiling time. You can use tools like Coverage in Chrome DevTools or PurgeCSS to identify and remove unused code from your site.
• Caching your code with the PRPL pattern: The PRPL pattern is a set of principles for optimizing web app delivery: Push critical resources for initial URL route; Render initial route; Pre-cache remaining routes; Lazy-load remaining routes on demand. By following this pattern, you can cache your critical code using service workers or HTTP/2 server push and load it faster on subsequent visits. You can use tools like Workbox or Firebase Hosting to implement caching with service workers for your site.
• Minifying and compressing JavaScript code: Minifying means removing unnecessary characters such as whitespace, comments, or semicolons from your code without changing its functionality. Compressing means encoding your code using algorithms such as gzip or brotli that reduce its size by finding patterns and replacing them with shorter symbols. Minifying and compressing your code reduces network cost and download time for your users. You can use tools like UglifyJS or Terser to minify your code and tools like compression-webpack-plugin or brotli-webpack-plugin to compress it with webpack.

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 #

• Choosing the right file format: The most common image formats on the web are JPEG, PNG, GIF, WebP and SVG . Each format has its own advantages and disadvantages depending on the type and quality of the image. For example, JPEG is good for photos with many colors and gradients, but PNG is better for images with text or transparency. WebP is a newer format developed by Google that offers better compression and quality than JPEG and PNG. SVG is a vector-based format that can scale without losing quality.
• Using progressive JPEG and next-gen file formats: Progressive JPEG is a variation of JPEG that loads an image gradually from low to high quality instead of from top to bottom. This gives a better user experience as they can see some content faster. Next-gen file formats are newer formats that offer better compression and quality than traditional formats. Examples of next-gen formats are WebP, AVIF and JPEG XL.
• Resizing and cropping images: Resizing images means changing their dimensions to fit the display size of different devices. Cropping images means removing unnecessary parts of an image to focus on the main subject. Both resizing and cropping can reduce the file size and improve the loading speed of images.ponsive images: Responsive images are images that adapt to different screen sizes and resolutions by using different sources or attributes. This can help you deliver the optimal image for each device and save bandwidth. You can use HTML5's srcset attribute or picture element to implement responsive images.

Optimize Fonts #

• Choose web-safe fonts: Web-safe fonts are fonts that are widely available on most devices and browsers. They can ensure consistent rendering and avoid font substitution or downloading issues. Some examples of web-safe fonts are Arial, Times New Roman, Verdana, Georgia, etc.
• Use custom fonts sparingly: Custom fonts are fonts that are not web-safe but can add personality and uniqueness to your site. However, they can also slow down your site if they are not optimized properly. You should use custom fonts sparingly and only for headings or accents. You should also choose lightweight custom fonts that have fewer glyphs and variants.
• Use web font services: Web font services are platforms that host custom fonts on their servers and deliver them to your site via CDN (content delivery network). They can help you optimize custom fonts by providing features such as subsetting (removing unused glyphs), compression (reducing file size), caching (storing files locally), fallbacks (providing alternative fonts), etc. Some examples of web font services are Google Fonts, Adobe Fonts, Font Awesome Icons etc.

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.

Summary #

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