How Preply improved INP on a Next.js application (without React Server Components and App Router)

1. web-vitals

   1 144 7,929 6.8 JavaScript

   Essential metrics for a healthy site.

   

   The official web-vitals library is from the Google Chrome team. We collect all the Web Vitals data at every session and create a global dashboard in DataDog to show the Web Vitals data.

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. react-scan

   2 18 17,865 9.8 TypeScript

   Scan for React performance issues and eliminate slow renders in your app

   

   The standard browser dev tools for profiling. React Developer Tools and React Scan to catch unnecessary re-renders.

4. react-virtuoso

   3 10 5,650 8.7 TypeScript

   The most powerful virtual list component for React

   

   It doesn’t sound like a huge list. Still, the 300 React components and their sub-children take significant time to be added to the DOM on a slow smartphone (please note: we are speaking about the React->DOM reconciliation that adds all the new elements to the DOM, not the render step itself). We used React Virtuoso since it was already used in our front-end projects, but virtualization libraries are all quite similar.

5. await-interaction-response

   4 1 32 5.4 TypeScript

   

   In the great Demystifying INP: New tools and actionable insights article, Vercel (Next.js’ creators) shared the await-interaction-response package. This is the source code:

Suggest a related project