Optimizing INP Index in NextJS
Introduction In the previous article, I introduced Core Web Vitals as well as how to optimize for the LCP index and in this article, we will continue with the next index, which is INP. This index measures responsiveness when users interact, as fetching too much data then rendering a large list (like hundreds of thousands of items) will block the Main-thread. The solutions I will mention in this article to optimize INP include: Virtualization: there are many packages supporting Data-heavy Lists, you can choose to apply them effectively, just render what is in the viewport. Handling thousands of DOM nodes simultaneously and continuously is the main factor directly affecting the INP index. Web Workers: If you need to process heavy logic (calculating, formatting a large amount of data) before displaying, push that logic part to a Web Worker to free up the Main-thread. Debouncing & Transitions: Use a combination of debounce and hooks like useTransition or useDeferredValue to mark state ...