What is INP ?

How do search engines measure INP scores?

INP vs FID: Why did INP replace FID ?

Core Web Vitals - structure

First input delay

Poor responsive Good Responsive website example

SEO Implications

Let’s get to the Basics

Interaction details

Source: Web.dev

As far as INP goes, only the following interaction types are observed:

Standards

INP value range

Google standardized that a good INP value should be 200 milliseconds or less.

What constitutes INP scores ?

How to find INP issues?

INP issues

Tools for Identifying INP Score

You can use a number of tools to assist you in improving Interaction to Next Paint, for example:

Techniques to identify INP bottlenecks

Let’s make use of the above mentioned tools to find INP issues.

Web vitals

Source: Chrome web store

Web vitals extension

Now you will be able to see the interactions breakdown in your console.

Console logging

The next step would be to identify the event listeners for a particular element on the page.

getEventListeners($0)

INP event listener

Performance panel

cpulimit - INP

Recording on performance panel

Tooltip to identify performance

INP timer fired

INP content.js

How to improve interaction to next paint with proven INP Optimization techniques

Performance panel INP

Audit 3P scripts eliminate unwanted ones, and defer others. Prioritize loading first party scripts

From experience, it has been observed that loading 3P scripts synchronously leads to blocking the main thread during page loads and unresponsive elements on the page subsequently leading to poor INP scores. There can be instances where your code is optimized but still you are not able to resolve INP issues. In such cases, it can be traced to 3P scripts that if not handled correctly block main thread on slow 3G android mobile phones that have low CPU capabilities and can’t load/execute scripts as fast as desktops (strange, but we live in a mobile first world, and most media publishing sites have larger mobile users).

Break up Tasks

For synchronous event handlers, prioritize UI handling logic first and later backend or state update tasks. This can be achieved by creating a small helper function that pushes the execution of remaining tasks at the end of the main thread. The helper function uses a setTimeout with a delay of 0 seconds which resolves to a promise.


			function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

// Use it in you code everywhere to break up synchronous tasks.

// Loop over the tasks:
while (tasks.length > 0) {

  // Shift the first task off the tasks array:
  const task = tasks.shift();

  // Run the task:
  task();

  // Yield to the main thread:
  await yieldToMain();
}

Use FastDOM to avoid layout re-flows

FastDOM is a JavaScript library designed to optimize the performance of DOM manipulation and layout operations. It provides a way to batch and schedule DOM read and write operations to minimize browser reflows and repaints, ultimately improving the responsiveness and perceived speed of web applications. FastDOM schedules DOM operations asynchronously using requestAnimationFrame. FastDOM collects multiple DOM manipulation tasks and queues them for execution within a single animation frame. This batching process allows FastDOM to consolidate multiple DOM reads and writes into a single batch, reducing overhead and improving performance. This synchronization helps avoid forced synchronous layouts and ensures a smooth user experience.

Debouncing/display small CSS loading animations

For SPAs with search bars, that makes API calls to display search results, implement small loading animations with CSS (search loading animations CSS, there is a W3schools article) to provide visual feedback to the user.

Breaks JS scripts

Each <script> element initiates a task to evaluate the associated script, involving parsing, compilation, and execution. Using a bundler to consolidate scripts into a single file results in a more efficient task dispatching model. Instead of numerous tasks for each script, a single task is dispatched to evaluate the bundled script, streamlining the process. You can break up script evaluation work by avoiding loading large chunks of JavaScript, and load more individual, smaller scripts using additional <script> elements. A limit of 100 kilobytes per individual script is a good target.

Loading scripts with dynamic imports

Harnessing Web Workers

We had amazing INP gains when we started to leverage web workers to offload tasks from the main thread, enabling parallel execution and a more responsive user experience. By delegating certain tasks to separate threads, the main thread remains agile and responsive to user interactions.

A simple example of a Web worker is

main.js


			const worker = new Worker('./worker.js');

worker.postMessage([40, 2]);

worker.addEventListener('message', event => {
  console.log(event.data);
});

worker.js


			addEventListener('message', event => {
  const [a, b] = event.data;

  // Do stuff with the message
  postMessage(a + b);
});

There are many libraries that make working with Web Workers easy like comlink. If you are thinking about how to improve interaction to the next paint in WordPress, we’ve got you covered, check out wp-partytown.

Lazy load below the fold elements

Lazy loading below-the-fold elements is a technique used to defer the loading of images, iframes, or other resources that are not immediately visible when a user first loads a web page. This helps improve initial page load performance by reducing the amount of data transferred and speeding up rendering. Use the Intersection Observer API to monitor when the below-the-fold elements come into view. Intersection Observer allows you to efficiently track the visibility of elements relative to the viewport.

Reduce DOM size

Minimize the nesting depth of DOM elements. Deeply nested structures can increase rendering and layout times. Flatten your DOM hierarchy whenever possible. Regularly audit your DOM structure and remove any elements or scripts that are no longer necessary. Unused elements contribute to DOM bloat and increase processing time. Minimize the use of inline styles and scripts. Instead, use external stylesheets and scripts to cache resources and reduce the size of the initial HTML payload.

Using CSS solutions

Replacing JS based interactive events with simpler HTML and CSS alternatives. A prominent use case can be of using a collapsable hamburger menu which is primarily done using the click event in JS. It can easily be replicated using a checkbox input and CSS attribute to trigger the menu action. A simple reference provided as example of Pure CSS Hamburger Menu. This solution utilizes the checked pseudo class of input element to trigger the collapse action.

Avoiding methods that cause layout thrashing

There are a bunch of methods like clientHeight andoffsetWidth that cause browsers to recalculate the layout and style it synchronously causing the main thread to be blocked. A list of such methods are mentioned in a resource about what forces layout/reflow and should be avoided. 

Conclusion

Google’s continuous updates to its page experience metrics underscore the importance of adapting to new standards like Interaction to Next Paint (INP). As a crucial measure of web page responsiveness, understanding INP and actively optimizing for it and other Core Web Vitals is essential for SEO success. Make use of the tools and strategies at your disposal to refine your website’s performance thoughtfully.

However, it’s crucial to avoid over-optimizing for INP at the expense of overall user experience. Excessive focus on any single metric could potentially disrupt the balance of your site, leading to a degraded user experience. Always aim for a holistic approach that enhances your website’s functionality and appeal while keeping pace with SEO developments.

What is INP ?

INP vs FID: Why did INP replace FID ?

Poor responsive Good Responsive website example 

SEO Implications

Let’s get to the Basics

What constitutes INP scores ?

How to find INP issues?

Tools for Identifying INP Score

Techniques to identify INP bottlenecks

How to improve interaction to next paint with proven INP Optimization techniques

Audit 3P scripts eliminate unwanted ones, and defer others. Prioritize loading first party scripts

Break up Tasks

Use FastDOM to avoid layout re-flows

Debouncing/display small CSS loading animations

Breaks JS scripts

Loading scripts with dynamic imports

Harnessing Web Workers

Lazy load below the fold elements

Reduce DOM size

Using CSS solutions

Avoiding methods that cause layout thrashing

Conclusion

On this page

Performance Optimization

Credits

Takshil

Takshil Kunadia

Author

Takshil Kunadia

Author

VIEW PROFILE

Lovekesh

Lovekesh Kumar

Author

Lovekesh Kumar

Author

VIEW PROFILE

Pradeep

Pradeep Sonawane

Author

Pradeep Sonawane

Author

Pradeep Sonawane, Director of Engineering at rtCamp, leads teams building scalable, high-performance enterprise web solutions for global brands.

VIEW PROFILE

Related articles

Comments

Leave a Reply Cancel reply

Name*

Email*

Comment*

Submit

Δ