INP (Interaction to Next Paint), Core Web Vital 2026:causes, measurement, React/Next.js fixes

TL;DR

INP (Interaction to Next Paint) measures delay from a user interaction (click, tap, key) to the next UI paint-not only “time until the first handler runs”. Since 2024 INP replaced FID in Core Web Vitals; in 2026 Google still grades pages with good ≤ 200 ms, needs improvement 200–500 ms, poor > 500 ms (75th percentile). Typical killers in React/Next.js: heavy main-thread JS, synchronous setState cascades, large lists without virtualization, third-party on click, slow Server Actions without optimistic UI. Measure CrUX + RUM; fix with Performance profiling. App on DevStudioIT Cloud; event telemetry in Postgres (Branchly). This is not a general LCP/CLS guide-INP only.

Who this is for

• Next.js teams with yellow/red INP in Search Console / PageSpeed
• React frontends after App Router / RSC migration
• Products with rich forms, filters, mobile menus
• Tech leads setting a “after click” budget on money pages

Keywords (SEO)

INP Interaction to Next Paint 2026, Core Web Vital INP React, improve INP Next.js, slow click main thread, web-vitals INP measurement, React interaction optimization

What INP actually measures

INP covers the whole interaction:

1. Input delay, waiting for a free main thread
2. Processing duration, your event handler + React commit
3. Presentation delay, style + paint to the next frame

The reported value is usually a worst (or high-percentile) interaction in the session-not the average of all clicks. One slow “Submit” ruins INP even if the menu is fast.

Where React/Next.js INP usually dies

1. Too much synchronous work in the handler

// Bad: heavy filtering + setState in the same tick as the click
function onFilter(value: string) {
  const next = hugeCatalog.filter(/* CPU-heavy */);
  setItems(next);
  setFacetCounts(computeFacets(next));
  analytics.track('filter', { value }); // sync XHR?
}

Better: startTransition for non-urgent updates, defer analytics to requestIdleCallback / a queue, chunk work (scheduler).

2. Re-rendering the whole tree

A header toggle re-renders 200 product cards. Fixes: state closer to the leaf, children composition, avoid “god” Contexts, keep interactivity in small Client Components under RSC.

3. Hydration and “click before ready”

Users click before hydration finishes-queued events + heavy hydrate = bad INP. Prefer Server Components, smaller client bundles, loading.tsx / selective hydration.

4. Third-party on the interaction path

Chat widgets, heatmaps, A/B SDKs loading inside a CTA handler. Defer / idle-load; do not block the first interaction on a money page.

5. Forms and Server Actions without feedback

A long round-trip with no optimistic UI feels frozen; INP includes time until a loading indicator paints. Show pending state immediately (useFormStatus / useTransition).

Measurement: lab vs field

import { onINP } from 'web-vitals';

onINP((metric) => {
  // send to your endpoint → Branchly
  navigator.sendBeacon('/api/rum', JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    pathname: location.pathname,
  }));
});

Storing RUM in Branchly lets you correlate INP with a specific CTA (form vs menu), not only “whole domain red”.

Profiling: find the culprit

1. DevTools → Performance → record the bad click
2. Look for long Tasks (red) between input and paint
3. Expand the stack: React commit, your handler, third-party
4. React Profiler: which components commit on that click
5. Coverage / bundle: does the handler import a heavy module (full lodash, moment, chart)?

On DevStudioIT Cloud staging, test with CPU 4–6× throttle-desktop “instant” hides mobile INP.

Concrete fixes (code checklist)

'use client';
import { useTransition, useState } from 'react';

export function FacetButton({ id, label }: { id: string; label: string }) {
  const [active, setActive] = useState(false);
  const [isPending, startTransition] = useTransition();

  return (
    <button
      data-pending={isPending}
      onClick={() => {
        setActive((v) => !v); // urgent UI feedback
        startTransition(() => {
          applyFacet(id); // heavy list filtering
        });
      }}
    >
      {label}
    </button>
  );
}

Immediate attribute/class paint = better INP; heavy work stays in a transition.

INP and SEO, what actually happens

Google uses field data (CrUX) for CWV as one of many ranking signals. Poor INP on key URLs (home, offer, contact) hurts UX and conversion even when rankings hold. Fix URLs with traffic and leads, not every blog post with 12 sessions/month.

FAQ

Is INP mobile-only?

CrUX splits mobile/desktop. Mobile is usually worse-fix it first. Desktop can still be bad on heavy dashboards.

Does loading.tsx fix INP?

It helps navigation UX (Suspense) but does not replace handler optimization on the same page. INP = interactions, not only route transitions.

Will React Compiler / memo fix everything?

It reduces wasted re-renders but will not remove 200 ms of sync JSON.parse in onClick. Shorten handler work first.

FID vs INP, still watch FID?

For CWV 2026 the focus is INP. FID is historical; tools may still show FID-do not optimize for FID alone.

Want lower INP in production?

• Contact us, interaction profiling, Client Component refactors, and RUM for Next.js
• Lighthouse 100 in Next.js, broader performance when LCP also hurts
• Performance budgets for teams, thresholds and ownership