Improving INP with React 18 and Suspense

What this post added

This post details how React 18's selective hydration with Suspense can significantly improve INP by making hydration non-blocking, allowing components to become interactive faster. A case study on nextjs.org showed a reduction in TBT from 430ms to 80ms and improved INP to 48ms. Other optimization techniques include using CSS for animations, throttling/debouncing events, reducing DOM size, optimizing SVG rendering, using web workers, and lazy loading assets.