INP beheben: So verhindern Sie, dass sich React-Apps langsam anfühlen
Ihr Dashboard fühlt sich langsam an. Ihre API ist schnell. Lighthouse zeigt grüne Werte an. Und doch verzögert sich jeder Klick.
Das ist ein INP-Problem.
Interaction to Next Paint (INP) misst, wie lange eine Seite benötigt, um auf einen Benutzer zu reagieren. Es hat im März 2024 den First Input Delay (FID) ersetzt. FID betrachtete nur den ersten Klick; INP überwacht jede Interaktion.
Ein INP-Wert unter 200 ms fühlt sich schnell an. Über 500 ms fühlt es sich träge an.
Um INP zu beheben, unterteilen Sie es in drei Phasen:
- Input Delay – die Zeitspanne zwischen einem Klick und dem Start Ihres Codes. Er tritt auf, wenn der Main Thread beschäftigt ist.
- Processing Time – wie lange Ihre Funktionen und React-State-Updates laufen.
- Presentation Delay – die Zeitspanne zwischen dem Abschluss Ihres Codes und dem Zeitpunkt, an dem der Browser den Bildschirm zeichnet (Paint).
Input Delay beheben
Lange Aufgaben blockieren den Main Thread. Wenn eine Aufgabe länger als 50 ms läuft, verzögert sie Klicks. Rufen Sie scheduler.yield() auf, um lange Aufgaben in kleinere Stücke zu unterteilen, damit der Browser Klicks dazwischen verarbeiten kann.
Processing Time beheben
Verwenden Sie die Transition-APIs von React, um die UI reaktionsfähig zu halten.
startTransition– umschließen Sie nicht dringende Updates. React kann ein schwerfälliges Update pausieren, um einen neuen Klick zu verarbeiten.useDeferredValue– verzögern Sie Werte, die nicht sofort aktualisiert werden müssen.
Diese APIs beschleunigen den Code nicht; sie machen ihn unterbrechbar, was Ihren INP senkt.
Presentation Delay beheben
Zu viele DOM-Elemente verlangsamen den Paint-Vorgang.
- Wenden Sie
content-visibility: autoin CSS an, um das Rendern von Elementen außerhalb des Sichtfelds zu überspringen. - Verhindern Sie Layout Thrashing: Lesen Sie niemals einen Style und schreiben Sie dann einen Style im selben Loop. Fassen Sie Lese- und Schreibvorgänge stattdessen zusammen.
- Virtualisieren Sie lange Listen.
So messen Sie es
Lighthouse läuft in einer Laborumgebung und kann Ihre Buttons nicht wie ein echter Mensch anklicken. Installieren Sie die web-vitals-Bibliothek und erfassen Sie echte Daten von Ihren Nutzern.