[object Object]

Interaction to Next Paint (INP) ist eine offizielle Google Core Web Vital-Metrik, die eingeführt wurde, um die allgemeine Reaktionsfähigkeit der Benutzeroberfläche von Webseiten zu bewerten.

Im Gegensatz zu First Input Delay (FID), das nur die anfängliche Interaktion beim Laden der Seite auswertete, beobachtet INP die Latenz aller Benutzerinteraktionen (Klicks, Tippen und Tastatureingaben), die während der gesamten Lebensdauer des Besuchs eines Benutzers auf einer Seite auftreten.

Antwort-zuerst-Zusammenfassung

Interaction to Next Paint (INP) ist eine Core Web Vital-Metrik, die die Zeit misst, die von der Interaktion eines Benutzers mit einer Seite (Klicken, Tippen oder Drücken einer Taste) bis zur Anzeige des aktualisierten visuellen Rahmens durch den Browser auf dem Bildschirm vergeht.Die INP-Latenz besteht aus drei Unterteilen: Eingabeverzögerung, Verarbeitungsdauer und Präsentationsverzögerung.Ein bestandener INP-Score beträgt 200 Millisekunden oder weniger beim 75. Perzentil der Besuche echter Benutzer.Im März 2024 ersetzte INP offiziell First Input Delay (FID) in den Suchranking-Algorithmen von Google.

INP-Score-Schwellenwerte und Bewertungsskala

Um ein reaktionsfähiges Benutzererlebnis zu bieten, müssen Webseiten die folgenden Core Web Vitals-Schwellenwerte für INP erfüllen, die anhand des 75. Perzentils der Feldbesuche realer Benutzer bewertet werden:

• Gut: $\le 200\text {ms} $ (Grün) – Schnelle, flüssige UI-Reaktion, die sich für Benutzer sofort anfühlt.
• Verbesserungsbedarf: $> 200\text {ms} $ und $\le 500\text {ms} $ (Gelb) – Merkliche Verzögerung beim Klicken oder Tippen, die sich auf die Benutzerinteraktion auswirkt.
• Schlecht: $> 500\text {ms} $ (Rot) – Schweres Einfrieren der Benutzeroberfläche und Blockierung des Hauptthreads, was zu Benutzerfrustration und hohen Absprungraten führt.

Die drei Komponenten der INP-Interaktionslatenz

Wenn ein Benutzer mit einem Element auf einer Webseite interagiert, besteht die von INP gemessene gesamte Interaktionslatenz aus drei aufeinanderfolgenden Phasen:

1. Eingabeverzögerung: Die Zeit, die zwischen dem Einleiten der physischen Interaktion durch den Benutzer (Klick, Tippen oder Tastendruck) und dem Beginn der Ausführung der zugehörigen Ereignishandler durch den Hauptthread des Browsers vergeht.Die Eingabeverzögerung wird hauptsächlich durch eine Überlastung des Hauptthreads durch lange Hintergrund-JavaScript-Aufgaben verursacht, die während des Ladens der Seite oder beim erneuten Rendern von Komponenten ausgeführt werden.
2. Verarbeitungsdauer: Die Zeit, die für die Ausführung des JavaScript-Codes in allen registrierten Ereignis-Listenern für diese Interaktion aufgewendet wurde (z. B. onclick , onkeydown oder Framework-Handler für reaktive Zustandsaktualisierungen).
3. Präsentationsverzögerung: Die Zeit, die nach Abschluss der Ereignishandler vergeht, bis der Browser die Berechnung der Neuberechnung des Stils, des Layouts, des Malens aktualisierter Pixel und der Anzeige des nächsten visuellen Frames auf der Anzeigehardware des Benutzers abgeschlossen hat.

Mathematisch wird die gesamte INP-Latenz für eine einzelne Interaktion wie folgt ausgedrückt:

$$\text{INP-Latenz} = \text{Eingabeverzögerung} + \text{Verarbeitungsdauer} + \text{Präsentationsverzögerung}$$

Warum Google im März 2024 FID durch INP ersetzt hat

First Input Delay (FID) misst nur die Eingabeverzögerungskomponente der allerersten Interaktion auf einer Seite.Während FID dabei half, Seiten zu identifizieren, bei denen die Blockierung des Haupt-Threads die anfängliche Interaktion verhinderte, litt es unter zwei großen technischen Einschränkungen:

• Einzelinteraktionsbereich: FID ignorierte alle nachfolgenden Benutzerinteraktionen nach dem Laden der Seite und konnte die Trägheit während der komplexen clientseitigen Navigation in Single-Page-Anwendungen (SPA) nicht erfassen.
• Unvollständige Latenzmessung: FID hat nur die Eingabeverzögerung gemessen und die Verarbeitungszeit und Präsentationsverzögerung vollständig ignoriert.Ein Event-Handler, dessen Ausführung 2.000 ms dauerte, erhielt eine bestandene FID-Bewertung, wenn die anfängliche Eingabeverzögerung unter 50 ms lag.

Im März 2024 ersetzte Google FID offiziell durch INP als offiziellen Core Web Vital-Rankingfaktor.INP wertet das 75. Perzentil aller Interaktionen während einer Sitzung aus und ermöglicht so eine weitaus umfassendere und realistischere Bewertung der realen Benutzererfahrung in modernen Webanwendungen.

Qualifizierende Benutzerinteraktionen im Vergleich zu nicht qualifizierenden Ereignissen

INP misst diskrete Benutzerinteraktionen, bei denen der Benutzer sofortiges visuelles Feedback erwartet.Für die diagnostische Profilerstellung ist es wichtig zu verstehen, welche Interaktionen für INP von Bedeutung sind:

Gemessene Interaktionen

• Mausklicks: Klicken auf Schaltflächen, Links, Formularsteuerelemente oder benutzerdefinierte interaktive Komponenten.
• Touchscreen-Tips: Antippen von Elementen auf Mobilgeräten oder Tablets.
• Tastaturdrücken: Drücken physischer oder virtueller Tastaturtasten (z. B. Enter, Space oder alphanumerische Tasten bei Texteingaben).

Nicht gemessene Ereignisse

• Scrollen und Schwenken: Das Scrollen einer Seite oder das Schwenken einer Kartenkomponente löst keine INP-Messung aus.
• Hovering: Das Bewegen des Mauszeigers über ein Element ohne Klicken ist von INP ausgeschlossen.
• Seitenladeanimationen: CSS-Animationen, die automatisch ohne Benutzereingabe ausgelöst werden, zählen nicht für INP.

Bewährte technische Strategien zur Optimierung hoher INP-Werte

Um die INP-Latenz unter den Schwellenwert von 200 ms zu reduzieren, sollten Entwicklungsteams die folgenden technischen Optimierungen implementieren:

1. Lange Haupt-Thread-Aufgaben aufteilen: Verwenden Sie requestIdleCallback(), setTimeout() oder scheduler.yield(), um Ausführungsaufgaben, die länger als 50 ms dauern, in kleinere Abschnitte aufzuteilen, sodass der Browser eingehende Benutzereingaben sofort zwischen den Aufgabenausführungsblöcken verarbeiten kann.
2. Framework-Statusaktualisierungen optimieren: Verschieben Sie in Vue 3- und Nuxt 4-Anwendungen unkritische Neu-Renderings der Benutzeroberfläche mithilfe asynchroner Komponentengrenzen oder verzögerter reaktiver Referenzaktualisierungen.
3. Layout-Thrashing minimieren: Vermeiden Sie das Lesen von DOM-Geometrieeigenschaften (z. B. offsetHeight oder getBoundingClientRect()) unmittelbar nach der Mutation von DOM-Elementen, da dies eine synchrone Neuberechnung des Layouts erzwingen würde.
4. Reduzieren Sie die Tiefe des DOM-Baums: Übergroße DOM-Bäume erhöhen die Stilberechnung und den Layoutaufwand während der Präsentationsverzögerung.Halten Sie die Gesamtzahl der DOM-Elemente unter 1.500 Knoten pro Seite.
5. Skripte von Drittanbietern optimieren: Umfangreiche Skripte von Drittanbietern (Analysen, Werbenetzwerke, Kunden-Chat-Widgets) kapern häufig den Hauptthread.Verzögern oder Web-Worker-Offload nicht notwendiger Skripts von Drittanbietern.

Kontinuierliche INP-Überwachung mit SimpleOps

SimpleOps verfolgt kontinuierlich die INP-Leistung, indem es neben synthetischen Lighthouse-Audits auch Felddatensatzmetriken des Chrome UX Report (CrUX) für echte Benutzer erfasst.SimpleOps benachrichtigt Ihr Team automatisch, wenn der 75. Perzentil-INP Ihrer Website 200 ms überschreitet, und stellt so sicher, dass Ihre Anwendung schnell, flüssig und für Suchmaschinen-Rankings optimiert bleibt.