INP (Interaction to Next Paint), Core Web Vital 2026:Ursachen, Messung, Fixes in React/Next.js

TL;DR

INP (Interaction to Next Paint) misst die Verzögerung von einer Nutzerinteraktion (Klick, Tap, Taste) bis zum nächsten UI-Paint, nicht nur „Zeit bis zum ersten Handler“. Seit 2024 ersetzt INP FID in den Core Web Vitals; 2026 gilt weiter gut ≤ 200 ms, Verbesserung nötig 200–500 ms, schlecht > 500 ms (75. Perzentil). Typische Killer in React/Next.js: schwerer Main-Thread-JS, synchrone setState-Kaskaden, große Listen ohne Virtualisierung, Third-Party beim Klick, langsame Server Actions ohne Optimistic UI. Messen mit CrUX + RUM; beheben mit Performance-Profiling. App auf DevStudioIT Cloud; Event-Telemetrie in Postgres (Branchly). Das ist kein allgemeiner LCP/CLS-Guide, nur INP.

Für wen das ist

• Next.js-Teams mit gelbem/rotem INP in Search Console / PageSpeed
• React-Frontends nach App-Router-/RSC-Migration
• Produkte mit reichen Formularen, Filtern, Mobile-Menüs
• Tech Leads mit Budget „nach dem Klick“ auf Money Pages

Keywords (SEO)

INP Interaction to Next Paint 2026, Core Web Vital INP React, INP verbessern Next.js, langsamer Klick Main Thread, web-vitals INP Messung, React Interaktionsoptimierung

Was INP genau misst

INP umfasst die gesamte Interaktion:

1. Input delay, Warten auf freien Main Thread
2. Processing duration, Ihr Event-Handler + React-Commit
3. Presentation delay, Style + Paint bis zum nächsten Frame

Der Reportwert ist meist eine schlechte (oder hohe Perzentil-) Interaktion in der Session, nicht der Durchschnitt aller Klicks. Ein langsames „Senden“ ruinieren INP, auch wenn das Menü schnell ist.

Wo React/Next.js-INP oft stirbt

1. Zu viel synchrone Arbeit im Handler

// Schlecht: schweres Filtern + setState im selben Tick wie der Klick
function onFilter(value: string) {
  const next = hugeCatalog.filter(/* CPU-heavy */);
  setItems(next);
  setFacetCounts(computeFacets(next));
  analytics.track('filter', { value }); // sync XHR?
}

Besser: startTransition für nicht dringende Updates, Analytics auf requestIdleCallback / Queue, Arbeit chunked (scheduler).

2. Re-Render des ganzen Baums

Header-Toggle rendert 200 Produktkarten neu. Fixes: State näher am Leaf, Children-Composition, keine „Gott“-Contexts, Interaktivität in kleinen Client Components unter RSC.

3. Hydration und „Klick vor ready“

Nutzer klicken vor Ende der Hydration, Event-Queue + schwere Hydrate = schlechtes INP. Server Components bevorzugen, Client-Bundle verkleinern, loading.tsx / selective hydration.

4. Third-Party auf dem Interaktionspfad

Chat-Widget, Heatmap, A/B-SDK im CTA-Handler. Defer / Idle-Load; erste Interaktion auf Money Pages nicht blockieren.

5. Formulare und Server Actions ohne Feedback

Langer Round-Trip ohne Optimistic UI wirkt eingefroren; INP enthält Zeit bis zum Loading-Paint. Pending-State sofort zeigen (useFormStatus / useTransition).

Messung: Lab vs. Field

import { onINP } from 'web-vitals';

onINP((metric) => {
  // an Ihren Endpoint → Branchly
  navigator.sendBeacon('/api/rum', JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    pathname: location.pathname,
  }));
});

RUM in Branchly korreliert INP mit konkretem CTA (Formular vs. Menü), nicht nur „ganze Domain rot“.

Profiling: den Schuldigen finden

1. DevTools → Performance → problematischen Klick aufzeichnen
2. Lange Tasks (rot) zwischen Input und Paint suchen
3. Stack erweitern: React commit, Ihr Handler, Third-Party
4. React Profiler: welche Komponenten committen bei diesem Klick
5. Coverage / Bundle: importiert der Handler ein schweres Modul?

Auf Staging bei DevStudioIT Cloud mit CPU 4–6× Throttle testen, Desktop „instant“ versteckt Mobile-INP.

Konkrete Fixes (Code-Checkliste)

'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); // dringendes UI-Feedback
        startTransition(() => {
          applyFacet(id); // schweres Listenfiltern
        });
      }}
    >
      {label}
    </button>
  );
}

Sofortiger Attribut-/Klassen-Paint = besseres INP; schwere Arbeit in der Transition.

INP und SEO, was wirklich passiert

Google nutzt Felddaten (CrUX) für CWV als einen von vielen Ranking-Signalen. Schlechtes INP auf Schlüssel-URLs (Home, Angebot, Kontakt) schadet UX und Conversion auch bei stabilen Rankings. Fixen Sie URLs mit Traffic und Leads, nicht jeden Blogpost mit 12 Sessions/Monat.

FAQ

Ist INP nur Mobile?

CrUX trennt Mobile/Desktop. Mobile meist schlechter, zuerst fixen. Desktop kann bei schweren Dashboards ebenfalls schlecht sein.

Hilft loading.tsx bei INP?

Hilft Navigations-UX (Suspense), ersetzt aber nicht Handler-Optimierung auf derselben Seite. INP = Interaktionen, nicht nur Route-Transitions.

Behebt React Compiler / Memo alles?

Reduziert unnötige Re-Renders, entfernt aber nicht 200 ms sync JSON.parse in onClick. Zuerst Handler-Arbeit kürzen.

FID vs. INP, FID noch beachten?

Für CWV 2026 Fokus auf INP. FID ist historisch; Tools zeigen FID ggf. noch, nicht allein auf FID optimieren.

Wollen Sie INP in Produktion senken?

• Kontaktieren Sie uns, Interaktions-Profiling, Client-Component-Refactors und RUM für Next.js
• Lighthouse 100 in Next.js, breitere Performance, wenn auch LCP weh tut
• Performance-Budgets im Team, Schwellen und Ownership