First Input Delay (FID)

Philip Walton

Wir alle wissen, wie wichtig es ist, einen guten ersten Eindruck zu hinterlassen. Das ist wichtig, wenn Sie neue Leute kennenlernen, und auch, wenn Sie im Web Inhalte erstellen.

Im Web kann ein guter erster Eindruck ausschlaggebend dafür sein, ob ein Nutzer zu einem treuen Nutzer wird oder die Website verlässt und nie wiederkehrt. Die Frage ist: Was macht einen guten Eindruck aus und wie messen Sie, welchen Eindruck Sie bei Ihren Nutzern wahrscheinlich hinterlassen?

Im Web können erste Eindrücke viele verschiedene Formen annehmen – wir haben erste Eindrücke vom Design und der visuellen Attraktivität einer Website sowie erste Eindrücke von ihrer Geschwindigkeit und Reaktionsfähigkeit.

Es ist zwar schwierig, mit Web-APIs zu messen, wie gut Nutzer das Design einer Website finden, aber die Geschwindigkeit und Reaktionsfähigkeit zu messen, ist kein Problem.

Der erste Eindruck, den Nutzer von der Geschwindigkeit des Ladens Ihrer Website haben, kann mit dem Messwert First Contentful Paint (FCP) erfasst werden. Aber wie schnell Ihre Website Pixel auf den Bildschirm zeichnen kann, ist nur ein Teil der Geschichte. Ebenso wichtig ist, wie responsiv Ihre Website ist, wenn Nutzer versuchen, mit diesen Pixeln zu interagieren.

Mit dem Messwert „First Input Delay“ (FID) lässt sich der erste Eindruck der Nutzer von der Interaktivität und Reaktionsfähigkeit Ihrer Website messen.

Was ist eine FID?

Der FID gibt an, wie lange es ab dem Zeitpunkt, zu dem ein Nutzer das erste Mal mit einer Seite interagiert, dauert, bis der Browser mit der Verarbeitung von Ereignis-Handlern als Reaktion auf diese Interaktion beginnt. Eine Interaktion findet beispielsweise statt, wenn der Nutzer auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes JavaScript-Steuerelement verwendet.

Was ist ein guter FID-Wert?

Für eine gute Nutzerfreundlichkeit sollten Websites eine Latenz bei der ersten Eingabe von 100 Millisekunden oder weniger anstreben. Damit Sie dieses Ziel für die meisten Ihrer Nutzer erreichen, ist der 75. Perzentilwert der Seitenladezeiten, segmentiert nach Mobilgeräten und Computern, ein guter Messwert.

FID im Detail

Als Entwickler, die Code schreiben, der auf Ereignisse reagiert, gehen wir oft davon aus, dass unser Code sofort ausgeführt wird, sobald das Ereignis eintritt. Als Nutzer haben wir jedoch alle schon oft das Gegenteil erlebt: Wir haben eine Webseite auf unserem Smartphone geladen, versucht, mit ihr zu interagieren, und waren dann frustriert, als nichts passiert ist.

Im Allgemeinen tritt eine Eingabeverzögerung (auch als Eingabelatenz bezeichnet) auf, wenn der Hauptthread des Browsers mit einer anderen Aufgabe beschäftigt ist und daher (noch) nicht auf den Nutzer reagieren kann. Ein häufiger Grund dafür ist, dass der Browser gerade damit beschäftigt ist, eine große JavaScript-Datei zu parsen und auszuführen, die von Ihrer App geladen wird. Währenddessen können keine Ereignis-Listener ausgeführt werden, da das geladene JavaScript möglicherweise etwas anderes vorgibt.

Sehen Sie sich die folgende Zeitachse für das Laden einer typischen Webseite an:

Die obige Visualisierung zeigt eine Seite, auf der mehrere Netzwerkanfragen für Ressourcen (höchstwahrscheinlich CSS- und JS-Dateien) gesendet werden. Nachdem diese Ressourcen heruntergeladen wurden, werden sie im Hauptthread verarbeitet.

Dies führt zu Zeiträumen, in denen der Hauptthread vorübergehend ausgelastet ist. Dies wird durch die beigefarbenen Task-Blöcke angezeigt.

Lange First Input Delays treten in der Regel zwischen First Contentful Paint (FCP) und Time to Interactive (TTI) auf, weil die Seite zwar einige Inhalte gerendert hat, aber noch nicht zuverlässig interaktiv ist. Zur Veranschaulichung wurden der Zeitachse FCP und TTI hinzugefügt:

Möglicherweise ist Ihnen aufgefallen, dass zwischen FCP und TTI eine relativ lange Zeit vergeht (einschließlich drei langer Aufgaben). Wenn ein Nutzer während dieser Zeit versucht, mit der Seite zu interagieren (z. B. durch Klicken auf einen Link), tritt eine Verzögerung zwischen dem Empfang des Klicks und der Reaktion des Hauptthreads auf.

Überlegen Sie, was passieren würde, wenn ein Nutzer versucht, am Anfang der längsten Aufgabe mit der Seite zu interagieren:

Da die Eingabe erfolgt, während der Browser gerade eine Aufgabe ausführt, muss er warten, bis die Aufgabe abgeschlossen ist, bevor er auf die Eingabe reagieren kann. Die Wartezeit ist der FID-Wert für diesen Nutzer auf dieser Seite.

Was passiert, wenn eine Interaktion keinen Ereignis-Listener hat?

Der FID misst das Delta zwischen dem Empfang eines Eingabeereignisses und dem nächsten Inaktivitätszeitraum des Hauptthreads. Das bedeutet, dass die FID auch dann erfasst wird, wenn kein Ereignis-Listener registriert wurde. Der Grund dafür ist, dass für viele Nutzerinteraktionen kein Ereignislistener erforderlich ist, der Hauptthread aber inaktiv sein muss, damit sie ausgeführt werden können.

Beispielsweise müssen alle folgenden HTML-Elemente warten, bis laufende Aufgaben im Hauptthread abgeschlossen sind, bevor sie auf Nutzerinteraktionen reagieren können:

• Textfelder, Kästchen und Optionsfelder (<input>, <textarea>)
• Drop-down-Menüs auswählen (<select>)
• Verknüpfungen (<a>)

Warum wird nur die erste Eingabe berücksichtigt?

Eine Verzögerung bei jeder Eingabe kann zu einer schlechten Nutzererfahrung führen. Wir empfehlen jedoch aus mehreren Gründen, hauptsächlich die Verzögerung bei der ersten Eingabe zu messen:

• Die erste Eingabeverzögerung ist der erste Eindruck, den Nutzer von der Reaktionsfähigkeit Ihrer Website erhalten. Erster Eindruck ist entscheidend für die Gesamteinschätzung der Qualität und Zuverlässigkeit einer Website.
• Die größten Probleme mit Interaktivität im Web treten beim Laden der Seite auf. Wir sind daher der Meinung, dass sich die Verbesserung der ersten Nutzerinteraktion auf der Website am stärksten auf die allgemeine Interaktivität des Web auswirken wird.
• Die empfohlenen Lösungen zur Behebung langer Verzögerungen bei der ersten Eingabe (z. B. Code-Splitting, weniger JavaScript vorab laden) sind nicht unbedingt dieselben Lösungen, mit denen sich langsame Eingabeverzögerungen nach dem Seitenaufbau beheben lassen. Durch die Aufteilung dieser Messwerte können wir Webentwicklern spezifischere Leistungsrichtlinien zur Verfügung stellen.

Was zählt als erste Eingabe?

FID ist ein Messwert, mit dem die Reaktionsfähigkeit einer Seite während des Ladevorgangs gemessen wird. Daher liegt der Fokus nur auf Eingabeereignissen aus einzelnen Aktionen wie Klicks, Tippen und Tastendrücken.

Andere Interaktionen wie Scrollen und Zoomen sind kontinuierliche Aktionen und haben völlig andere Leistungseinschränkungen. Außerdem können Browser ihre Latenz oft verbergen, indem sie sie in einem separaten Thread ausführen.

Mit anderen Worten: Der FID konzentriert sich auf das R (Reaktionsfähigkeit) im RAIL-Leistungsmodell, während Scrollen und Zoomen eher mit A (Animation) zusammenhängen und ihre Leistungsqualitäten separat bewertet werden sollten.

Was passiert, wenn ein Nutzer nie mit Ihrer Website interagiert?

Nicht alle Nutzer interagieren bei jedem Besuch mit Ihrer Website. Außerdem sind nicht alle Interaktionen für den FID relevant (wie im vorherigen Abschnitt erwähnt). Außerdem finden die ersten Interaktionen einiger Nutzer zu ungünstigen Zeiten statt (wenn der Hauptthread über einen längeren Zeitraum belegt ist) und die ersten Interaktionen anderer Nutzer zu günstigen Zeiten (wenn der Hauptthread vollständig inaktiv ist).

Das bedeutet, dass einige Nutzer keine FID-Werte haben, einige Nutzer niedrige FID-Werte und einige Nutzer wahrscheinlich hohe FID-Werte haben.

Die Erfassung, Berichterstellung und Analyse des FID unterscheidet sich wahrscheinlich erheblich von anderen Messwerten, die Sie vielleicht gewohnt sind. Im nächsten Abschnitt wird erläutert, wie Sie das am besten tun.

Warum wird nur die Eingabeverzögerung berücksichtigt?

Wie bereits erwähnt, wird mit FID nur die „Verzögerung“ bei der Ereignisverarbeitung gemessen. Es wird weder die gesamte Dauer der Ereignisverarbeitung noch die Zeit gemessen, die der Browser benötigt, um die Benutzeroberfläche nach dem Ausführen von Ereignis-Handlern zu aktualisieren.

Auch wenn diese Zeit für den Nutzer wichtig ist und sich auf die Nutzerfreundlichkeit auswirkt, wird sie in diesem Messwert nicht berücksichtigt. Andernfalls könnten Entwickler dazu verleitet werden, Umgehungslösungen zu implementieren, die die Nutzerfreundlichkeit tatsächlich verschlechtern. Sie könnten beispielsweise die Logik des Ereignishandlers in einen asynchronen Rückruf (über setTimeout() oder requestAnimationFrame()) einbetten, um sie von der mit dem Ereignis verknüpften Aufgabe zu trennen. Das würde zu einer Verbesserung des Messwerts führen, aber zu einer langsameren Antwort, wie sie vom Nutzer wahrgenommen wird.

Der FID misst jedoch nur den „Verzögerungs“-Teil der Ereignislatenz. Entwickler, die mehr vom Ereignislebenszyklus erfassen möchten, können dies mit der Event Timing API tun. Weitere Informationen finden Sie im Leitfaden zu benutzerdefinierten Messwerten.

FID messen

Der FID ist ein Messwert, der nur in der Praxis gemessen werden kann, da ein echter Nutzer mit Ihrer Seite interagieren muss. Sie können den FID mit den folgenden Tools messen.

Tools für die Arbeit im Außendienst

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals-Bericht)
• web-vitals JavaScript-Bibliothek

FID in JavaScript messen

Sie können die Event Timing API verwenden, um den FID in JavaScript zu erfassen. Im folgenden Beispiel wird gezeigt, wie eine PerformanceObserver erstellt wird, die auf first-input-Einträge wartet und sie in der Konsole protokolliert:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

Im obigen Beispiel wird der Verzögerungswert des Eintrags first-input anhand des Deltas zwischen den Zeitstempeln startTime und processingStart des Eintrags gemessen. In den meisten Fällen ist dies der FID-Wert. Allerdings sind nicht alle first-input-Einträge für die Messung der FID gültig.

Im folgenden Abschnitt werden die Unterschiede zwischen den Angaben in der API und der Berechnung des Messwerts aufgeführt.

Unterschiede zwischen dem Messwert und der API

• Die API sendet first-input-Einträge für Seiten, die in einem Hintergrundtab geladen werden. Diese Seiten sollten bei der Berechnung der FID jedoch ignoriert werden.
• Die API sendet auch first-input-Einträge, wenn die Seite vor der ersten Eingabe im Hintergrund war. Diese Seiten sollten jedoch auch bei der Berechnung des FID ignoriert werden. Eingaben werden nur berücksichtigt, wenn die Seite die ganze Zeit im Vordergrund war.
• Die API meldet keine first-input-Einträge, wenn die Seite aus dem Back-Forward-Cache wiederhergestellt wird. Der FID sollte in diesen Fällen jedoch gemessen werden, da Nutzer sie als separate Seitenaufrufe wahrnehmen.
• Die API meldet keine Eingaben, die in Iframes erfolgen. Der Messwert hingegen tut dies, da sie Teil der Nutzerfreundlichkeit der Seite sind. Dies kann sich als Unterschied zwischen CrUX und RUM zeigen. Um den FID korrekt zu messen, sollten Sie diese berücksichtigen. Untergeordnete Frames können die API verwenden, um ihre first-input-Einträge zur Aggregation an den übergeordneten Frame zu melden.

FID-Daten analysieren und Berichte erstellen

Aufgrund der erwarteten Abweichungen bei den FID-Werten sollten Sie bei Berichten zur FID die Verteilung der Werte berücksichtigen und sich auf die höheren Perzentile konzentrieren.

Als Perzentil für alle Core Web Vitals-Grenzwerte wird der 75. Wert verwendet. Wir empfehlen jedoch dringend, sich insbesondere bei der FID die Werte für das 95. bis 99. Perzentil anzusehen, da diese den besonders schlechten ersten Eindruck der Nutzer von Ihrer Website widerspiegeln. Außerdem sehen Sie, in welchen Bereichen die größten Verbesserungen erforderlich sind.

Das gilt auch, wenn Sie Ihre Berichte nach Gerätekategorie oder -typ segmentieren. Wenn Sie beispielsweise separate Berichte für Computer und Mobilgeräte erstellen, sollte der für Sie wichtigste FID-Wert auf Computern der 95. bis 99. Perzentilwert für Computernutzer und auf Mobilgeräten der 95. bis 99. Perzentilwert für Mobilnutzer sein.

FID verbessern

In einem vollständigen Leitfaden zur Optimierung des FID erfahren Sie, wie Sie diesen Messwert verbessern können.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs gefunden, die zum Erfassen von Messwerten verwendet werden, und manchmal auch in den Definitionen der Messwerte selbst. Daher müssen manchmal Änderungen vorgenommen werden. Diese Änderungen können sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Rückschritte zeigen.

Alle Änderungen an der Implementierung oder Definition dieser Messwerte werden in diesem Changelog aufgeführt.

Wenn Sie Feedback zu diesen Messwerten haben, können Sie es in der Google-Gruppe „web-vitals-feedback“ geben.