Core Web Vitals: Interaction to Next Paint ersetzt First Input Delay
Am 12. März 2024 gibt es eine Änderung bei den Core Web Vitals: Interaction to Next Paint (INP) ersetzt dann First Input Delay (FID).
First Input Delay (FID)
First Input Delay (FID) misst die Zeit zwischen der ersten Interaktion des Users mit einer Website und dem Zeitpunkt ab dem der Hauptthread des Browsers mit der Verarbeitung dieses Ereignisses beginnt.
Interagiert ein User mit einer Website, wird das Ereignis (Senden eines Formulars, Kauf eines Produkts, Aufklappen eines Akkordeons) zu einer Warteschlange hinzugefügt, damit der Hauptthread des Browsers mit der Verarbeitung beginnt. Der Hauptthread ist jedoch oft noch anderweitig beschäftigt (HTML Parsing, Ausführung von JavaScript). Erst nachdem die anderen Ereignisse verarbeitet sind, beginnt der Browser mit der Ausführung der User-Interaktion. Diese Wartezeit entspricht dem FID-Wert.
Interaction to Next Paint (INP)
Sie alle kennen sicher das Phänomen: Sie klicken auf einen Button und es ändert sich zunächst nichts. Sie sind unsicher, ob die Website Ihre Aktion gerade verarbeitet. Ihre Nutzerzufriedenheit sinkt. Genau hier setzt der neue Core Web Vitals Wert Interaction to Next Paint (INP) an.
Interaction to Next Paint (INP) besteht aus drei Teilen: Der Verzögerung bei der Eingabe (Input Delay) bzw. First Input Delay, der Verarbeitungsverzögerung (Processing Delay) und dem Presentational Delay, also der Zeit, die es dauert bis sich das Layout verändert hat bzw. der User Reaktionen auf seine Eingaben sieht. Der neue Wert Interaction to Next Paint umfasst also 3 Elemente. während der bisher gültige First Input Delay Wert nur einen Faktor enthielt.
| Interaction to Next Paint | ||
| Input Delay | Processing Delay | Presentation Delay |
| Die laufenden Background Tasks verhindern, dass die Event Handler der Benutzereingabe starten. | Die Event Handler (JavaScript) werden ausgeführt. | Das neue Layout wird berechnet. |
Vereinfacht ausgedrückt: Die Zeit bis Sie sehen, dass Sie einen Artikel in den Warenkorb gelegt oder eine Anfrage abgeschickt haben, nennen Fachleute Interaction to Next Paint.
Zu den durch INP erfassten Interaktionen zählen:
- Ein Mausklick .
- Das Drücken einer Taste auf der Tastatur.
- Tippen auf einem Touchscreen.
Hover-Effekte oder Scrolling zählen nicht zu den durch INP erfassten Werten. INP misst also beispielsweise nicht, wenn die untergeordneten Menüpunkte beim Flyout-Menü nicht zügig genug erscheinen, sobald der User über einen übergeordneten Link hovert.
Beachten Sie: Interaction to Next Paint (INP) misst alle auf der Seite möglichen Aktionen und nimmt den höchsten Wert. Im Unterschied zu First Input Delay, wo nur die Verzögerung bei der ersten Interaktion gemessen wird.
Further, FID only measures the input delay portion of the first interaction, which is the amount of time the browser had to wait (due to main thread busyness) before even beginning to handle the interaction.
Rick Viscomi, DevRel Engineer at Google
Unterschiede zwischen FID und INP
| First Input Delay | Interaction to Next Paint |
| Zeitraum für die Verarbeitung der ersten Nutzerinteraktion. | Alle Reaktionszeiten des Browser auf Nutzereingaben. Der höchste (schlechteste) Wert ist maßgeblich. |
| FID = Input Delay der ersten Nutzeraktion | INP = Input Delay + Verarbeitungszeit von Ereignissen + Dauer der Visualisierung |
INP messen
Hier zeigt PageSpeed Insights die Aufgaben, die eine schnelle Reaktion auf Usereingaben verhindern. Reduzieren Sie Ihren JavsaScript Code bzw. teilen Sie längere Skripte in mehrere Einzelteile auf.
Übermäßige DOM-Größe vermeiden bedeutet, dass Sie auf zu kompliziertes bzw. verschachteltes HTML verzichten sollten. Ansonsten dauert es zu lange, bis der User Veränderungen nach seinen Klicks sieht.
PageSpeed Insights gibt Ihnen noch zahlreiche weitere Tipps, um Ihre Core Web Vitals bzw. Ihren INP-Wert zu verbessern.
Der INP Debugger zeigt Ihnen anhand von Screenshots direkt die problematischen Seitenelemente an. Gehen Sie Schritt für Schritt die einzelnen Elemente durch und verändern Sie die kritischen Komponenten. Hier sehen Sie auch, dass INP sämtliche Nutzereingaben betrachtet und der höchste Wert maßgeblich ist. Das übersichtliche Tool sortiert die Ereignisse dabei nach Reaktionszeiten.
Bei Werten unter 200 Millisekunden besteht kein Handlungsbedarf. Liegt Ihr Wert über 500 Millisekunden sollten Sie schnellstmöglich Verbesserungen durchführen.
| Werte für Interaction to Next Paint | ||
| bis 200 ms | 200 bis 500 ms | über 500 ms |
| gut | Verbesserungsbedarf | schlecht |
INP verbessern
Identifizieren Sie zunächst die störende Elemente. Meist liefern die entsprechenden Tools bereits konkrete Verbesserungsvorschläge. Jede Website hat andere Probleme, die den INP-Wert nach oben treiben. Dennoch gibt es einige Punkte, die immer wieder auftauchen.
- Entlasten Sie den Hauptthread Ihres Browsers, indem Sie Skripte asynchron laden. Die Blockierung von Nutzereingaben wird somit aufgehoben und mehrere Skripte laufen parallel. Die User sehen Layoutveränderungen nach Klicks dann ohne sichtbare Verzögerung.
- Löschen Sie nicht benötigte Third Party Scripts wie Social Sharing Buttons, Analyseskripts, Werbung, Produktbewertungen oder Live-Chats. Diese Codes stammen von Drittanbietern und werden direkt auf der eigenen Website eingebunden. Oftmals verlängern sie die Ladezeit und blockieren so das Ausführen von anderen Skripten.
- Vereinfachen Sie Ihren HTML Code bzw. verzichten Sie auf überflüssiges JavaScript. Viele WordPress-Themes sind überdimensioniert und enthalten viel unnötigen Code, der im Hintergrund verarbeitet werden muss. Wählen Sie ein einfaches Theme oder lassen Sie sich ein individuelles und simples Theme entwickeln.
- Komprimieren Sie Ihren Code und Ihre Grafiken. Ersetzen Sie, falls möglich, JavaScript durch CSS.
- Greifen Sie auf Preloading und Prefetching zurück. Diese Techniken reduzieren die Ladezeiten von benötigten Ressourcen wie Grafiken, Stylesheets oder Skripten. Mit preload werden dringend benötigte Dateien sofort geladen, bei prefetch erfolgt das Laden erst, wenn der User zur betreffende Stelle scrollt. Bedenken Sie, dass Firefox kein preload unterstützt und Safari kein prefetch.
- Teilen Sie die Ereignisse im Hauptthread in kleine Schritte ein. Nach jedem Schritt ist dann die Verarbeitung einer Usereingabe möglich. Der Browser muss nicht warten, bis alle Ereignisse verarbeitet sind. Die setTimeout JavaScript-Funktion bewirkt die Ausführung einer Aufgabe nach einer kleinen Verzögerung. Der Einbau der Funktion verhindert die längere Blockade des Hauptthreads für andere Ereignisse. Benutzereingaben werden schneller verarbeitet.
Fazit
Nutzen Sie die vorhandenen Tools zur Kontrolle Ihres INP-Wertes. Reduzieren und vereinfachen Sie Ihre Skripte und bauen Sie auf einfachen Code bzw. schnell ladbare Inhalte. Teilen Sie Ihren Code in kleinere Abschnitte auf. Bedenken Sie, dass durch längere Reaktionszeiten die für Google wichtige Nutzerzufriedenheit sinkt.
Anzeige
Über Marcel Sarman
IT-AbteilungMarcel Sarman betreut die ABAKUS Website und entwickelt sie weiter. Er ist unser Experte für HTML5, CSS3 und WordPress und schreibt Beiträge für unsere Seite.
Alle Artikel von: Marcel Sarman
