Was ist FID? First Input Delay (FID)

Wir alle wissen, wie wichtig ein guter erster Eindruck ist. Das gilt nicht nur, wenn man neue Leute kennenlernt, sondern auch, wenn man online Erfahrungen sammelt.

Online kann ein guter erster Eindruck darüber entscheiden, ob man ein treuer Nutzer wird oder nie wiederkommt. Die Frage ist: Was macht eine gute Erfahrung aus und wie misst man diesen Eindruck?

Der erste Eindruck im Internet kann ganz unterschiedlich ausfallen. Wir gewinnen ihn durch das Design und die visuelle Attraktivität einer Website, aber auch durch ihre Geschwindigkeit und Reaktionsfähigkeit.

Während es schwierig ist, über eine Web-API zu messen, wie sehr den Benutzern das Design einer Website gefällt, kann eine Web-API die Geschwindigkeit und Reaktionsfähigkeit einer Website problemlos messen!

Der erste Eindruck der Benutzer von der Ladegeschwindigkeit Ihrer Website kann bestimmt werden durchErstes Contentful Paint (FCP)Messen Sie es. Die Geschwindigkeit Ihrer Website, Pixel auf dem Bildschirm darzustellen, ist jedoch nur ein Teilaspekt. Genauso wichtig ist die Reaktionsfähigkeit Ihrer Website, wenn ein Benutzer versucht, mit diesen Pixeln zu interagieren.

Erste Eingabeverzögerung (FID)-Metriken helfen dabei, den ersten Eindruck Ihrer Benutzer hinsichtlich der Interaktivität und Reaktionsfähigkeit Ihrer Website zu messen.

Was ist FID?

FID misst die Zeit von der ersten Interaktion eines Benutzers mit einer Seite (z. B. wenn er auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes, von JavaScript gesteuertes Steuerelement verwendet), bis der Browser auf die Interaktion reagiert und tatsächlich mit der Verarbeitung von Ereignishandlern beginnen kann.

Was ist ein guter FID-Score?

Um eine gute Benutzererfahrung zu bieten, sollten Websites versuchen, die erste Eingabeverzögerung auf100 msUm sicherzustellen, dass Sie das empfohlene Ziel für die meisten Ihrer Benutzer erreichen, ist ein guter Messschwellenwert75. Perzentilund dieser Schwellenwert gilt sowohl für mobile als auch für Desktop-Geräte

FID-Details

Als Entwickler, die Code als Reaktion auf Ereignisse schreiben, gehen wir oft davon aus, dass unser Code sofort ausgeführt wird, wenn das Ereignis eintritt. Als Benutzer kennen wir jedoch alle schon die gegenteilige Situation: Wir laden eine Webseite auf unserem Smartphone, versuchen, mit der Seite zu interagieren und sind dann frustriert, weil die Seite überhaupt nicht reagiert.

Im Allgemeinen entsteht eine Eingabeverzögerung (auch Input Lag genannt), weil der Hauptthread des Browsers mit anderen Aufgaben beschäftigt ist und daher (noch) nicht auf den Benutzer reagieren kann. Ein häufiger Grund hierfür ist, dass der Browser gerade eine große JavaScript-Datei analysiert und ausführt, die von Ihrer Anwendung geladen wurde. Während dieses Vorgangs kann der Browser keine Ereignislistener ausführen, da das geladene JavaScript ihn möglicherweise mit anderen Aufgaben beschäftigt.

Betrachten Sie diese typische Ladezeitleiste für eine Webseite:

Die obige Visualisierung zeigt eine Seite, die mehrere Netzwerkanforderungen stellt, um Ressourcen (hauptsächlich CSS- und JS-Dateien) abzurufen, die dann nach dem Herunterladen im Hauptthread verarbeitet werden.

Dies führt dazu, dass der Hauptthread regelmäßig beschäftigt ist (in der Abbildung beige dargestellt).AufgabeStück).

Lange Verzögerungen bei der ersten Eingabe treten normalerweise auf, wennErstes Contentful Paint (FCP)UndZeit bis zur Interaktivität (TTI)Denn während dieser Zeit hat die Seite zwar einige Inhalte gerendert, die Interaktivität ist jedoch noch nicht zuverlässig. Um dies zu veranschaulichen, haben wir FCP und TTI zur Zeitleiste hinzugefügt:

Möglicherweise ist Ihnen aufgefallen, dass es einen ziemlich langen Zeitraum gibt (einschließlich dreiLange Aufgaben), wenn der Benutzer während dieser Zeit versucht, mit der Seite zu interagieren (z. B. auf einen Link zu klicken), tritt eine Verzögerung zwischen dem Zeitpunkt, an dem der Browser den Klick empfängt, und dem Zeitpunkt auf, an dem der Hauptthread reagieren kann.

Sehen Sie, was passiert, wenn der Benutzer gleich zu Beginn der längsten Aufgabe versucht, mit der Seite zu interagieren:

Da die Eingabe erfolgt, während der Browser mitten in einer Aufgabe ist, muss der Browser warten, bis die Aufgabe abgeschlossen ist, bevor er auf die Eingabe reagieren kann. Die Wartezeit des Browsers entspricht dem FID-Wert, den der Benutzer auf der Seite erlebt.

In diesem Beispiel interagierte der Nutzer mit der Seite, als der Hauptthread seine geschäftigste Phase erreichte. Hätte der Nutzer die Seite etwas früher (während einer Leerlaufphase) aufgerufen, hätte der Browser sofort reagiert. Dieser Unterschied in der Eingabelatenz unterstreicht, wie wichtig es ist, die Verteilung der FID-Werte bei der Metrikberichterstattung zu berücksichtigen. Weitere Informationen hierzu finden Sie im folgenden Abschnitt zur Analyse und Berichterstattung von FID-Daten.

Was ist, wenn die Interaktion keinen Ereignis-Listener hat?

FID misst die Differenz zwischen dem Zeitpunkt des Eingangs eines Eingangsereignisses und dem nächsten Leerlauf des Hauptthreads. Das bedeutet, dass FID auch dann gemessen wird, wenn keine Ereignislistener registriert sind. Dies liegt daran, dass viele Benutzerinteraktionen keine Ereignislistener zur Ausführung benötigen, abermussDer Hauptthread muss sich in einer Leerlaufphase befinden.

Beispielsweise müssen alle der folgenden HTML-Elemente warten, bis laufende Aufgaben im Hauptthread abgeschlossen sind, bevor sie auf Benutzerinteraktionen reagieren:

Textfelder, Kontrollkästchen und Optionsfelder (Eingabe, Textbereich)
Dropdown-Auswahlliste (Auswählen)
Link(a)

Warum wird nur die erste Eingabe berücksichtigt?

Obwohl jede Eingabeverzögerung zu einer schlechten Benutzererfahrung führen kann, empfehlen wir vor allem aus den folgenden Gründen die Messung der ersten Eingabeverzögerung:

Die erste Eingabeverzögerung ist der erste Eindruck, den der Benutzer von der Reaktionsfähigkeit Ihrer Site bekommt, und der erste Eindruck ist entscheidend für unseren Gesamteindruck von der Qualität und Zuverlässigkeit einer Site.
Die größten Interaktivitätsprobleme im Web treten heute beim Laden von Seiten auf. Daher sind wir überzeugt, dass die Verbesserung der ersten Benutzerinteraktion mit einer Website den größten Einfluss auf die allgemeine Interaktivität des Webs hat.
Die Lösungen, die wir Websites bei hoher Eingangsverzögerung (Code-Splitting, Reduzierung des vorinstallierten JavaScript-Codes usw.) empfehlen, sind nicht unbedingt dieselben wie die Lösungen bei langsamer Eingangsverzögerung nach dem Laden der Seite. Durch die Trennung dieser Metriken können wir Webentwicklern präzisere Leistungsempfehlungen geben.

Was gilt als Ersteingabe?

FID ist eine Metrik, die die Reaktionsfähigkeit während des Seitenladevorgangs misst. Daher konzentriert sich FID nur auf Eingabeereignisse, die einzelnen Aktionen wie Klicks, Tippen und Tastendrücken entsprechen.

Andere Interaktionen wie Scrollen und Zoomen sind sequentielle Vorgänge mit völlig anderen Leistungseinschränkungen (und Browser können die Latenz oft verbergen, indem sie diese Vorgänge in einem separaten Thread ausführen).

Mit anderen Worten: FID konzentriert sich aufRAIL-LeistungsmodellBei der Leistungsbewertung beziehen sich Scrollen und Zoomen eher auf A (Animation), daher sollte die Leistungsqualität dieser Vorgänge separat bewertet werden.

Was passiert, wenn der Benutzer nie mit Ihrer Website interagiert?

Nicht alle Nutzer interagieren bei jedem Besuch mit Ihrer Website. Und nicht alle Interaktionen korrelieren mit FID (wie im vorherigen Abschnitt erläutert). Darüber hinaus fallen die ersten Interaktionen einiger Nutzer in ungünstige Zeiträume (wenn der Hauptthread lange beschäftigt ist), während die ersten Interaktionen anderer Nutzer in günstige Zeiträume fallen (wenn der Hauptthread völlig inaktiv ist).

Dies bedeutet, dass einige Benutzer keinen FID-Wert haben, einige einen niedrigen FID-Wert und einige möglicherweise einen hohen FID-Wert.

Die Art und Weise, wie Sie FID verfolgen, melden und analysieren, kann sich stark von den anderen Metriken unterscheiden, die Sie gewohnt sind. Im nächsten Abschnitt werden Best Practices beschrieben.

Warum nur die Eingabeverzögerung berücksichtigen?

Wie bereits erwähnt, misst FID lediglich die Latenzzeit innerhalb der Ereignisverarbeitung. FID misst weder die Zeit, die für die Ereignisverarbeitung selbst benötigt wird, noch die Zeit, die der Browser benötigt, um die Benutzeroberfläche nach der Ausführung des Ereignishandlers zu aktualisieren.

Obwohl diese Zeiten für Benutzer sehr wichtig sind,WirklichDies beeinträchtigt das Benutzererlebnis. Diese Zeiten werden jedoch nicht in den Indikator einbezogen, da solche Vorgehensweisen Entwickler dazu verleiten könnten, Workarounds zu implementieren und so das Benutzererlebnis zu verschlechtern. Entwickler können die Ereignishandlerlogik in einem asynchronen Callback (über setTimeout() oder requestAnimationFrame()) kapseln, um die Logik von der mit dem Ereignis verbundenen Aufgabe zu trennen. Das Endergebnis kann den Indikatorwert verbessern, führt jedoch dazu, dass der Benutzer eine langsamere Reaktionsgeschwindigkeit wahrnimmt.

Obwohl FID nur den Latenzanteil der Ereignislatenz misst, können Entwickler, die einen größeren Teil des Ereignislebenszyklus verfolgen möchten,Event-Timing-APIWeitere Einzelheiten finden Sie unterBenutzerdefinierte Indikatorenentsprechende Anleitung.

So messen Sie den FID

FID ist eintatsächlichFID ist eine Metrik, die die Interaktion echter Nutzer mit Ihrer Seite erfordert. Sie können die folgenden Tools zur Messung von FID verwenden.

Messwerkzeuge

Messen von FID in JavaScript

Um FID in JavaScript zu messen, können Sie verwendenEvent-Timing-APIDas folgende Beispiel zeigt die Erstellung einesLeistungsbeobachterKomm und hör zuErsteingabeEinträge und in der Konsole angemeldet:

neu Leistungsbeobachter((Eintragsliste) => { für (Konstante Eintrag von Eintragsliste.Einträge abrufen()) { Konstante Verzögerung = Eintrag.Verarbeitungsstart - Eintrag.Startzeit; Konsole.Protokoll(„FID-Kandidat:“, Verzögerung, Eintrag); } }).beobachten({Typ: 'erste Eingabe', gepuffert: WAHR});

Im obigen Beispiel wird die Latenz des ersten Eingabeeintrags anhand der Differenz zwischen den Zeitstempeln „startTime“ und „processingStart“ des Eintrags gemessen. In den meisten Fällen entspricht diese Differenz dem FID-Wert. Allerdings können nicht alle ersten Eingabeeinträge zur Messung der FID verwendet werden.

In den folgenden Abschnitten werden die Unterschiede zwischen den von der API gemeldeten Daten und der Berechnung der Metriken aufgeführt.

Unterschiede zwischen Indikatoren und APIs

Die API versendet First-Input-Einträge für Seiten, die in Hintergrundregisterkarten geladen werden. Diese Seiten sollten bei der Berechnung des FID jedoch ignoriert werden.
Wenn die Seite in den Hintergrund verschoben wird, bevor die erste Eingabe erfolgt, versendet die API auch Einträge der ersten Eingabe, diese Seiten sollten jedoch bei der Berechnung des FID trotzdem ignoriert werden (Eingaben werden nur berücksichtigt, wenn die Seite immer im Vordergrund ist).
Wenn die Seite passiertRoundtrip-CacheBeim Fortsetzen meldet die API nicht den ersten Eingabeeintrag, aber in diesen Fällen sollte FID gemessen werden, da es sich für den Benutzer um mehrere unterschiedliche Seitenbesuche handelt.
Die API meldet keine Eingaben in Iframes, Sie sollten diese jedoch berücksichtigen, um die FID korrekt zu messen. Untergeordnete Frames können die API verwenden, um die ersten Eingabeeinträge dieser Eingaben zur Aggregation an den übergeordneten Frame zu melden.

Anstatt sich all diese Nuancen merken zu müssen, können EntwicklerWeb-Vitals-JavaScript-BibliothekUm FID zu messen, behandelt die Bibliothek diese Unterschiede selbst (sofern möglich):

Import {getFID} aus „Web-Vitalwerte“; // Sofort messen und aufzeichnen, wenn FID verfügbar ist. getFID(Konsole.Protokoll);

Ein vollständiges Beispiel zur Messung von FID in JavaScript finden Sie im Quellcode von getFID.

FID-Daten analysieren und melden

Aufgrund der zu erwartenden Schwankung der FID-Werte ist es wichtig, dass Sie bei der FID-Meldung die Werteverteilung betrachten und sich auf die höheren Perzentile konzentrieren.

Obwohl alle Schwellenwerte für die wichtigsten WebmetrikenBevorzugtes Perzentilist das 75. Perzentil, aber speziell für FID empfehlen wir dennoch dringend, Ihren Schwellenwert auf das 95.-99. Perzentil festzulegen, da diese Perzentile besonders schlechten ersten Erfahrungen der Benutzer auf Ihrer Site entsprechen und Ihnen somit zeigen, wo Sie die größten Verbesserungen benötigen.

Dies sollte auch dann erfolgen, wenn Sie Ihre Berichte nach Gerätekategorie oder -typ segmentieren. Wenn Sie beispielsweise Desktop- und Mobilgeräte getrennt berichten, ist der Desktop-FID-Wert, auf den Sie sich am meisten konzentrieren sollten, das 95. bis 99. Perzentil der Desktop-Nutzer, und der mobile FID-Wert, auf den Sie sich am meisten konzentrieren sollten, das 95. bis 99. Perzentil der Mobilgeräte-Nutzer.

So verbessern Sie FID

Um zu erfahren, wie Sie die FID für eine bestimmte Site verbessern können, können Sie ein Lighthouse-Leistungsaudit durchführen und sich die spezifischen Optionen ansehen, die das Audit empfiehlt.Chance.

Obwohl FID ein praktischer Indikator ist (und Lighthouse ein Laborindikator-Tool ist), ähneln die Richtlinien zur Verbesserung von FID denen zur VerbesserungGesamtsperrzeit (TBT)Dieser Laborindikator hat die gleiche Leitrichtung.

Weitere Informationen zur Verbesserung der FID finden Sie unterFID optimierenWeitere Hinweise zu anderen individuellen Leistungstechniken, die LCP verbessern können, finden Sie unter:

1/5 - (1 Stimme)