Improving Performance in a Website with Millions of Users (INP)

I am a team member at Hangikredi (hangikredi.com), which has millions of users monthly. When you have a website wih high traffic, the focus is primarily on improving your lighthouse metrics on a daily basis since SEO and performance is your priority. Rather than “getting things done”, we care for “doing things in accordance with web vitals”. In this article, I am going to talk about what is Interaction to Next Paint (INP) and how to score better in your website. Also, I’m going to share a code refactor I have done that helped us to reduce our INP score almost 30% in one of our project. Let’s begin.

Google has updated its Core Web Vitals and replaced First Input Delay (FID) with (INP). First Input Delay is how quickly a website responds to user’s first interaction. Say you click a button when first opening a website and website gives a reaction to your interaction, clicking a button in this case. But it obviously ignores all the interaction after the first response. So not enough.

What is Interaction to Next Paint? #

INP measures how quickly your website responds to user interaction. The faster your website reacts the higher scores you get. It monitors every interaction including click, tap or keypress etc. It simply measures how long it takes for your website to trigger a visual change “next paint” after receiving the input. And the grim reality about INP measure is it is determined by worst interaction times of your users.

How to Monitor INP Scores? #

Monitoring INP requires the data that shows your real users’ interactions since your own development tests may not show the worst interaction scores your website gives. Therefore, you can use monitoring tools like Newrelic or DebugBear’s Inp tool.

How to Improve your INP Score? #

1. Avoid Long Running Tasks on Main Thread #

Javascript is single-threaded and if you are loading a huge script you are blocking the main-thread. In React, before React 18 you had to wait for entire scripts to be loaded. During this period the page was not interactive.

Check this code example.

In the above code all three components must be loaded before React hydrate (React adds interactivity to your html in this phase) and allow your users’ to start interacting with your page. With React 18, selective hydration has come into play. It allows you to prioritize what you interact with and you no longer have to wait for whole Javascript to load and start hydrating these three parts of the page. You can simply take hydration off the main thread and make it non-blockin by using Suspense boundary.

Check the code.

Using Suspense really helped us to avoid blocking main thread by seperating components’ calculations.

2. Optimising Javascript #

Optimising large and heavy scripts helps you improve your INP scores. Reduce your bundle size with splitting code. Improve your methods for better performance.

Check this code refactor I have done that helped us to reduce our INP scores almost by 30%.

In the above code;

1. The function was using a MutationObserver to monitor the DOM.
2. The function was manually adding event listeners to listen for clicks on <a> tags.
3. The function was trying to intercept and control the history.pushState method using a Proxy.
4. All of this was putting extra load on the browser and increasing our Javascript bundle.

So every click was an expensive calculation.

Check my refactor.

1. With this code I monitor page transitions using Next.js’s own hooks, like usePathname and useSearchParams.
2. As a result, I completely removed the need for MutationObserver and event listeners.
3. The code became simpler, and performance significantly improved.
4. It really reduced the browser’s workload.

2. Other Methods to Improve INP #

1. Use CSS instead of Javascript for animations because CSS uses a different thread to calculate which doesn’t block main thread.
2. Throttle or debounce user interactions if neccesary so that you can avoid calculating the same input frequently.
3. Lazy load images fonts or third party scripts. (Deferring third party scripts will help a lot. Trust me)

This is how we improved our INP scores in our websites. By coding with best practises, you will serve a better and seamless user experience to your users. Thanks for reading.