React/Next.js Web Vitals: INP & LCP Optimierung unter 1 Sekunde

Seit Google INP (Interaction to Next Paint) als offizielle Core Web Vital Metrik eingeführt hat, liegt der Fokus auf der Interaktionsgeschwindigkeit von Webanwendungen nach Benutzereingaben.

In React/Next.js-Anwendungen führen lange JavaScript-Ausführungszeiten oft zu Hauptthread-Blockaden und schlechten INP-Werten.

Dieser Artikel zeigt konkrete Maßnahmen zur INP-Optimierung und Reduzierung der LCP-Zeit auf unter 1 Sekunde mittels React 19 APIs und Asset-Streaming.

Kernpunkte

• INP-Zielwert: Unter 100 ms für exzellente Nutzererfahrung ($\le 200\text{ ms}$ Good).
• Long Tasks aufbrechen: scheduler.yield() gibt die Steuerung regelmäßig an den Browser-Renderer zurück.
• React 19 useTransition: Nachrangige UI-Updates verzögern, um Benutzereingaben sofort zu verarbeiten.

1. Task-Aufteilung mit scheduler.yield()

export async function yieldToMain() {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    await (window as any).scheduler.yield();
  } else {
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}