Improving INP with React 18 and Suspense

Posted by

Lee Robinson

VP of Developer Experience

Interaction to Next Paint (INP) measures your site’s responsiveness to user interactions on the page. The faster your page responds to user input – the better. INP is an experimental metric to develop a better way of measuring responsiveness than First Input Delay (FID).

This post will help you understand how popular libraries like React can improve INP. You'll be prepared for updates to Core Web Vitals, which impact search rankings, as INP moves from experimental to stable.

Interaction to Next Paint

Delivering a great user experience is not just about the first initial load, but also about how responsive the page is to interaction. INP helps measure this responsiveness. A low INP means the given page was able to respond with visual feedback quickly for the majority of interactions. This is measured from the time of the first event to when the browser could show a visual update.

An INP below or at 200 milliseconds means that your page has good responsiveness.

Let’s explore some practical solutions to lower INP with React, like selective hydration with Suspense. These techniques can also improve other metrics such as First Input Delay (FID), Total Blocking Time (TBT), and Time to Interactive (TTI) – which may also improve your Lighthouse scores.

React 18 and Selective Hydration

React 18 was designed to help improve interactivity with features like selective hydration and startTransition. Concurrent React is able to prioritize what you interact with and is interruptible if higher priority interactions occur.

React and Next.js are able to generate HTML on the server and send it to the client. The initial rendered HTML is not interactive until the JavaScript for the page has been fetched and loaded. Hydration then makes your page interactive through JavaScript (e.g. attaching event handlers to a button).

Before React (17 and lower) is able to hydrate any of the components, JavaScript for the entire page needs to be fetched. During this period, the page is not interactive. For example:

// JavaScript for the entire page must be loaded
// before the page can become interactive
export default function HomePage() {
  return (
    <>
      <Header />
      <Body />
      <Footer />
    </>
  );
}

JavaScript for the entire page must be loaded before the page can become interactive.

With React 18 and Suspense, you can make hydration non-blocking.

You no longer have to wait for all the JavaScript to load to start hydrating parts of the page. This means components can become interactive faster by allowing the browser to do other work at the same time as hydration, making your page more responsive and resulting in lower FID and INP.

import { Suspense } from 'react';

// Using a loading component as the Suspense fallback
function Loading() { ... }

// Using `Suspense` makes hydration non-blocking
export default function HomePage() {
  return (
    <>
      <Header />
      <Suspense fallback={<Loading />}>
        <Body />
        <Footer />
      </Suspense>
    </>
  );
}

Using Suspense makes hydration non-blocking with React 18.

These changes help improve the interactivity of all React applications.

Case Study: Next.js Site

We were able to reduce the Total Blocking Time (TBT) of nextjs.org from 430ms to 80ms using selective hydration with Suspense while validating changes with Lighthouse (”lab” metrics).

// Simplified version of the changes made to
// the nextjs.org landing page to improve INP with `Suspense`
export default function Index() {
  return (
    <Page title="Next.js by Vercel - The React Framework">
      <SkipNavContent />
      <Banner badge="New" href="/blog/next-12-2">
        {"Next.js 12.2 →"}
      </Banner>
      <Hero />
      <Suspense fallback={<Loading />}>
        <Features />
        <Customers />
        <Learn />
        <Newsletter />
        <Footer />
      </Suspense>
    </Page>
  );
}

Simplified version of the changes made to the nextjs.org landing page to improve INP with Suspense.

Note: You can omit the Suspense fallback, but proceed with caution. If any components in the subtree suspend, you risk showing a broken, empty state.

Adding Suspense to group major areas of the page allows these components to be hydrated independently. Experiment with wrapping major blocks of your site with Suspense to achieve similar results.

After rolling out these changes to production, we saw Vitals ("field" metrics) improve to:

First Input Delay: 5ms (Good)
Interaction to Next Paint: 48ms (Good)

Interaction to Next Paint (INP) of nextjs.org from Vercel Analytics.

For Next.js developers, we're also working to add support for route transitions (using React 18's startTransition) with the new layouts and routing changes. This enables navigations to be interruptable if higher priority events occur, leading to further responsiveness.

You can start measuring INP today inside Vercel Analytics. Support for tracking INP has been added to both the web-vitals npm package, as well as in Next.js with reportWebVitals when self-hosting.

Try Vercel Analytics today and start measuring Interaction to Next Paint.

Posted by

Lee Robinson

VP of Developer Experience