Optimizing website interactions: key strategies to improve INP and user experience

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) , is a Core Web Vitals metric that measures web page response times. It replaces the previous First Input Delay (FID) in March 2024.Understanding FID and INP, FID measures responsiveness only when the site is first loaded, while INP focuses on the response time of the site to user actions throughout the visit.

INP is a metric that measures how quickly a web page responds to user actions, such as when you click a button. It works like this:

1. user operation: You do an action on a web page, such as clicking a button.
2. Send Request: Your browser sends a request to the website's server to load new content.
3. Access to content: The server processes the request and sends the new content back to your browser.
4. Display content: Your browser receives the content and displays it on the page.
5. measuring time: The browser calculates how much time it takes from the time you click to the time the content is fully displayed and reports this time as an INP score.

Why is the INP important?

• Improve user experience: A low INP score means that the web page is responsive and the user doesn't have to wait to see the results, which makes the user experience smoother.
• Helps with search engine optimization (SEO): INP is one of the factors that Google uses to evaluate the experience of a website and affects how it ranks in the search results. A good INP score can help your website rank higher in search results.
• Reduce bounce rate: If a web page is responsive, users are more likely to stay on the page and view more content rather than leave because they are waiting.

INP vs. other core network metrics

INP is different from other metrics such as Cumulative Layout Shift (CLS) and Maximum Content Draw (LCP).CLS measures how often and how much web content moves, while LCP looks at how quickly the largest content element on a page finishes loading.

How to measure INP?

INP values are expressed in milliseconds (ms). The ideal INP value should be less than 200 milliseconds, which reflects a very responsive website. If the INP value is between 200 milliseconds and 500 milliseconds, performance could be improved; above 500 milliseconds, the response is considered slow and needs to be optimized.

What affects the INP value?

The INP value, i.e. the speed at which a website responds to user actions, may be affected by several factors:

• Size and complexity of the page: Larger or more complex pages may take longer to respond to user actions.
• Number of JavaScript and CSS files loaded: The more files that are loaded, the longer it may take for the site to respond to user actions.

How do I measure the INP value of my website?

utilizationGoogle PageSpeed InsightsTool to measure INP and other website performance metrics. This tool examines your website and offers suggestions for improvement to help you optimize it according to best practices. It will also show you how fast your website loads on mobile devices and desktop computers.

What PageSpeed Insights' results say

PageSpeed Insights provides two types of results:

• Actual user data: Data from real Chrome users, displayed at the top of the report, to help you understand how your site performs in the real world.
• Laboratory data: This portion of the data is based on testing under controlled conditions, providing detailed technical insights and optimization recommendations.

The reports below show the same metrics, but they come from a controlled lab environment running on Google Lighthouse. This data can be used to test new features before they are released.

If the site's INP data is unavailable, you can check the Total Blocking Time (TBT). This metric helps us understand how much time the page is unresponsive to user actions while the site is loading.

In the Diagnostic Results section, you'll also find suggestions for improving your site's core web metrics, which can help you improve your site's user experience and performance.

How to optimize INP

1、Optimize JavaScript

JavaScript is a key part of many websites and is responsible for adding interactive features. However, if JavaScript code is not executed efficiently, it can slow down the responsiveness of a website because it runs on the browser's main thread, which is also responsible for rendering the web page.

How to optimize JavaScript for faster website responsiveness?

1. Shrinking JavaScript files: By reducing the file size, JavaScript can be made to load and run faster.
2. Enable GZip compression: This is a popular method for reducing the size of website files and speeding up data transfer.
3. Using JavaScript frameworks: Frameworks such as AngularJS or jQuery can help you organize and manage JavaScript code more efficiently and improve execution.
4. Use of Content Delivery Networks (CDNs): CDNs can serve JavaScript files from servers close to the user, which can greatly reduce load times.

2、Use Web Worker

Suppose your website contains a lot of image, video and data processing tasks, which are computationally intensive. With Web Worker, you can move these heavy tasks to a background thread so that the web page doesn't lag or freeze and the user experience is smoother.

How to set up Web Worker?

To use Web Worker, you need to prepare two JavaScript files:

1. main.js: This file is used to start the Web Worker and manage communication with it.
2. worker.js(Web Worker Script): This file contains the code that will be executed in the background.

followmain.jsExamples of:

// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js'); // Send a message to the worker.
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!'); // Listen for messages from the worker.
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    myWorker.onmessage = function(e) { console.log('Message received from worker', e.data); }; // Listen for messages from the worker.
  }; } else { console.log('Message received from worker', e.data); }
} else {
  console.log('Your browser does not support Web Workers.'); }; }
}
// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js'); // Send a message to the worker.
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!'); // Listen for messages from the worker.
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    myWorker.onmessage = function(e) { console.log('Message received from worker', e.data); }; // Listen for messages from the worker.
  }; } else { console.log('Message received from worker', e.data); }
} else {
  console.log('Your browser does not support Web Workers.'); }; }
}
// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js'); // Send a message to the worker.
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!'); // Listen for messages from the worker.
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    myWorker.onmessage = function(e) { console.log('Message received from worker', e.data); }; // Listen for messages from the worker.
  }; } else { console.log('Message received from worker', e.data); }
} else {
  console.log('Your browser does not support Web Workers.'); }; }
}

The other one isworker.js, which contains tasks for network workers. Below is an example:

// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data); // Perform heavy computation or data processing here.
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!'); }
}
// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data); // Perform heavy computation or data processing here.
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!'); }
}
// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data); // Perform heavy computation or data processing here.
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!'); }
}

To include these scripts in your website, check the documentation for your particular technology or platform and follow the standard process.

For WordPress users, use thewp_enqueue_scriptFunctions includes the Web Worker script in the theme's Functions.php file.

3. Decomposition of long tasks

When a user browses an e-commerce site filled with lots of product data and images, a site with overly large and unoptimized JavaScript tasks can take up a lot of resources and slow down the site. This can result in slow loading pages that don't even respond in a timely manner to a user's click or scroll.

To avoid this, we can break these large tasks into many smaller ones so that the browser can be more flexible and not get blocked by a single large task.

How do you break down long tasks?

1. Setting the timeout: Use JavaScript'ssetTimeoutfunction, you can defer the task to a future point in time so that it doesn't continuously occupy the main thread.
2. Request Idle Callback: UserequestIdleCallback API, which allows your tasks to run when the browser is idle without interfering with the main functionality of the web page.

4. Prioritize input responsiveness

Ensuring that web pages can respond quickly to user actions is key to providing a good user experience. Here are some techniques that can help a website respond faster to user input:

1. Defer non-critical JavaScript: Some JavaScript code doesn't need to be executed immediately when the page loads, and can be deferred to handle the user interaction first.
2. weir valve: Control the frequency of function calls. For example, in a scroll event, the function can only be executed once every few hundred milliseconds to avoid slowing down the page response if it is executed too often.
3. shake out: When events (e.g., window resizing) are triggered frequently, using de-jittering techniques can delay the execution of a function until the event has stopped for some time.
4. Using passive event listeners: For events such as scrolls and clicks, event listeners marked as passive can tell the browser to continue with other tasks without having to wait for the event handler function to complete, thus improving the scrolling performance and responsiveness of the page.

5. Provide immediate feedback

Why is instant feedback important?

When a website processes a user request without any feedback, users may feel uncertain or even repeatedly submit forms or click buttons. Providing immediate feedback not only enhances the user experience, but also gives users a sense that the site is responsive.

Some common ways to give instant feedback include:

1. Load Indicator: Display a rotating loading icon or progress bar when data is loading or a page jumps to tell the user that the process is in progress.
2. Confirmation pop-up: When the user performs a specific operation, such as adding an item to the shopping cart, a message box pops up to confirm that the operation has been successful.
3. Form Validation Feedback: Instant validation when users enter data, such as checking whether an e-mail address conforms to the format, and displaying an alert message immediately when the format is incorrect, so that users do not realize the error until after they submit it.

Business benefits of INP

existEconomic Timesof a study found that increasing INP significantly reduces a website's bounce rate - by 50%. this means users are more likely to stay on the site and view more content. A low bounce rate is usually associated with higher user engagement and satisfaction, which is beneficial for any business website.

Summary:

INP is an important performance metric that measures the responsiveness of a website to user actions. A well-optimized INP not only enhances user experience, but also improves search engine rankings and reduces bounce rate.

To optimize the INP, we discuss several strategies, including optimizing JavaScript execution, using Web Workers for background tasks, and breaking up long tasks to avoid main thread blocking. In addition, we emphasized the importance of immediate feedback, which can be used to give users the perception that the site is active and responsive through loading indicators, confirmation pop-ups, and form validation feedback.