How redBus improved their website's Interaction to Next Paint (INP) and increased sales by 7%

The web and its capabilities are evolving at a fast pace. You can now build rich and full-featured experiences on the web that can achieve much of what native applications can in terms of capabilities.

JavaScript is a primary driver for interactivity across the web, but if it's not used with care, interactions can feel sluggish, and lead users to perceive your website to be non-responsive or altogether broken. Thankfully, the , all interactions made with a page can be said to be reliably fast.

When redBus set out to optimize their website's INP, they had three goals in mind:

1. Provide a better user experience for users by focusing on interaction latency regardless of network speed and device capabilities.


2. Optimize their website to keep interactions as fast as possible.


3. Ensure that responses from their API were as light as possible to ensure fast data transfer to the front end.

The journey data for this metric at the 95th percentile told a different story.

How redBus measured INP built by Google to track not just INP, but all important user experience metrics for all pages across their website. In addition to the web-vitals JavaScript library, redBus used may be quite different from how redBus approached the problem. We highly recommend that you read about before you begin .)

Use cases , the scroll event listener itself schedules a lot of work that must run on the main thread. This work was causing contention on the main thread that increased interaction latency, leading to poor INP on the search page.

To improve the search page's INP, redBus made several optimizations:

• The in order to reduce the amount of times the event callback would fire in a given period. By lowering the frequency in which scroll event callback ran, the main thread was able to respond more quickly to user interactions on the search page.


• The resulting rendering work was prioritized by using a .)
  
  
  

  While these changes significantly improved the INP of the search page, there was still the problem where the .)
  
  
  

  To optimize this interaction, redBus managed the state of input components locally and synced it with the event was fired. This change reduced the number of rerenders and eliminated unwanted rerendering of the user interface by calling the reducer less frequently.