First Input Delay (FID)

Philip Walton

Unterstützte Browser

  • 76
  • 79
  • 89
  • x

Quelle

<ph type="x-smartling-placeholder">

Wir alle wissen, wie wichtig ein guter erster Eindruck ist. Es ist wichtig, neue Leute kennenlernen. Das ist auch wichtig, wenn Sie User Experiences im Web.

Im Web kann ein guter erster Eindruck den Unterschied zwischen oder zu treuen Nutzern werden. Die Frage ist: was einen guten Eindruck ausmacht und wie Sie diese Art von was Sie wahrscheinlich mit Ihren Nutzern machen?

Im Web kann der erste Eindruck viele verschiedene Formen annehmen. ersten Eindruck vom Design und der visuellen Attraktivität einer Website von seiner Geschwindigkeit und Reaktionsfähigkeit.

Auch wenn es schwierig ist, mit Web-APIs zu messen, wie sehr Nutzern das Design einer Website gefällt, ihre Geschwindigkeit und Reaktionsfähigkeit nicht zu messen!

Der erste Eindruck davon, wie schnell Ihre Website geladen werden kann, First Contentful Paint (FCP): Wie schnell kann Ihre Website Pixel darstellen? auf dem Bildschirm ist nur ein Teil der Geschichte. Ebenso wichtig ist, wie schnell wenn Nutzer versuchen, mit diesen Pixeln zu interagieren.

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

Was ist FID?

FID misst die Zeit ab der ersten Interaktion eines Nutzers mit einer Seite (d. h., wann auf einen Link klicken, auf eine Schaltfläche tippen oder ein benutzerdefiniertes JavaScript-Steuerelement verwenden) auf den Zeitpunkt, zu dem der Browser tatsächlich mit der Verarbeitung von Event-Handlern beginnen kann als Reaktion auf diese Interaktion.

Was ist ein guter FID-Wert?

Für eine gute Nutzererfahrung sollten Websites eine erste Eingabe anstreben Verzögerung von 100 Millisekunden oder weniger. Um sicherzustellen, dass Sie dieses Ziel der meisten Ihrer Nutzer lässt sich gut mit dem 75. Perzentil Seitenladevorgängen, segmentiert nach Mobil- und Desktop-Geräten.

<ph type="x-smartling-placeholder">
</ph> Gute FID-Werte sind maximal 2,5 Sekunden, schlechte Werte über 4,0 Sekunden und alles dazwischen muss verbessert werden

FID im Detail

Als Entwickler, die Code schreiben, der auf Ereignisse reagiert, gehen wir oft davon aus, wird sofort ausgeführt, sobald das Ereignis eintritt. Aber als Nutzende haben wir alle das Gegenteil erlebt: Wir haben eine Webseite versuchte, mit unserem Smartphone zu interagieren, und waren dann frustriert, passiert ist.

Im Allgemeinen tritt die Eingabeverzögerung (auch als Eingabelatenz bezeichnet) auf, weil die Der Hauptthread ist mit einer anderen Aufgabe beschäftigt, daher kann er dem Nutzer (noch) nicht antworten. Dies kann unter anderem daran liegen, dass der Browser gerade mit dem Parsen und Ausführen eine große JavaScript-Datei, die von Ihrer App geladen wird. Währenddessen kann sie nicht alle Event-Listener, da das geladene JavaScript die Anweisung dazu geben könnte, irgendetwas anderes.

Betrachten Sie die folgende Zeitleiste für einen typischen Webseitenaufbau:

Beispiel für einen Seitenaufbau-Trace

Die obige Visualisierung zeigt eine Seite, die mehrere Netzwerkanfragen sendet. nach Ressourcen suchen (wahrscheinlich CSS- und JS-Dateien) und nach diesen Ressourcen heruntergeladen wurden und werden im Hauptthread verarbeitet.

Dies führt zu Zeiträumen, in denen der Hauptthread vorübergehend beschäftigt ist, die durch die beigefarbenen Aufgabe Blöcken.

Lange Verzögerungen bei der ersten Eingabe treten in der Regel zwischen First Contentful Paint auf (FCP) und Time to Interactive (TTI), da die Seite einen Teil des Inhalts gerendert, aber noch nicht zuverlässig interaktiv ist. Zur Veranschaulichung wie das passieren kann, wurden FCP und TTI zum Zeitplan hinzugefügt:

Beispiel für einen Seitenaufbau-Trace mit FCP und TTI

Vielleicht haben Sie bemerkt, dass es einen relativ langen Zeitraum (einschließlich drei lange Aufgaben) zwischen FCP und TTI, wenn ein Nutzer versucht, mit der Seite interagieren (z. B. durch Klicken auf einen Link), wird ein Verzögerung zwischen dem Empfang des Klicks und dem Zeitpunkt, an dem der Hauptthread antworten.

Überlegen Sie, was passieren würde, wenn Nutzende versuchen würden, mit der Seite in der Nähe des Anfang der längsten Aufgabe:

Beispiel für einen Seitenaufbau-Trace mit FCP, TTI und FID

Da die Eingabe erfolgt, während sich der Browser mitten in der Ausführung einer Aufgabe befindet, Es muss warten, bis die Aufgabe abgeschlossen ist, bevor sie auf die Eingabe reagieren kann. Die Zeit, die es warten muss, ist der FID-Wert für diesen Nutzer auf dieser Seite.

Was ist, wenn eine Interaktion keinen Event-Listener hat?

FID misst die Abweichung zwischen dem Empfang eines Eingabeereignisses und dem Zeitpunkt, zu dem das Hauptereignis Thread ist das nächste Mal inaktiv. Das bedeutet, dass FID auch dann gemessen wird, wenn ein Ereignis Listener wurde nicht registriert. Der Grund ist, dass viele Nutzerinteraktionen Sie benötigen keinen Event-Listener, aber erwarten, dass der Hauptthread inaktiv ist. ausgeführt werden soll.

Beispielsweise müssen alle folgenden HTML-Elemente laufende Aufgaben im Hauptthread, die abgeschlossen werden müssen, bevor Sie dem Nutzer antworten Interaktionen:

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

Warum nur die erste Eingabe berücksichtigen?

Verzögerungen bei einer Eingabe können zu einer schlechten Nutzererfahrung führen. In erster Linie empfehlen wir aus verschiedenen Gründen, die erste Eingabeverzögerung zu messen:

  • Die First Input Delay ist der erste Eindruck des Nutzers von der die Reaktionsschnelligkeit und der erste Eindruck sind entscheidend für die die Qualität und Zuverlässigkeit einer Website.
  • Die größten Interaktivitätsprobleme, die wir heute im Web haben, laden. Daher glauben wir, dass wir uns zunächst auf die Verbesserung der ersten Interaktion den größten Einfluss auf die Verbesserung des gesamten die Interaktivität des Webs.
  • Empfohlene Lösungen zum Beheben hoher Verzögerungen bei der ersten Eingabe auf Websites wie Codeaufteilung, weniger JavaScript im Voraus usw. Lösungen zur Behebung langsamer Eingabeverzögerungen nach dem Seitenaufbau. Durch die Trennung und diese Messwerte untersuchen, können wir die Leistung Richtlinien für Webentwickler.

Was zählt als erste Eingabe?

FID ist ein Messwert, mit dem die Reaktionsfähigkeit einer Seite beim Laden gemessen wird. Daher ist es konzentriert sich nur auf Eingabeereignisse aus diskreten Aktionen wie Klicks, Tippen und Tasten drücken.

Andere Interaktionen wie Scrollen und Zoomen sind fortlaufende Aktionen und Leistungsbeschränkungen stehen. Browser können häufig ihre Latenz verbergen, indem Sie sie in einem separaten Thread ausführen).

Anders gesagt konzentriert sich FID auf das R (Responsivität) in der RAIL-Funktion. Leistung Modell, während Scrollen und Zoomen stehen in Zusammenhang mit A (Animation) und ihrer Leistung Qualitäten sollten separat bewertet werden.

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

Nicht alle Nutzer interagieren bei jedem Besuch mit Ihrer Website. Und nicht alle Interaktionen sind für FID relevant (wie im vorherigen Abschnitt erwähnt). In Außerdem sind die ersten Interaktionen einiger Nutzer zu ungünstigen Zeiten, Thread ist über einen längeren Zeitraum beschäftigt) und der erste Interaktionen zu guten Zeiten (wenn der Hauptthread vollständig inaktiv ist).

Das bedeutet, dass einige Nutzer keine FID-Werte haben, andere einen niedrigen FID-Wert. und einige Nutzer haben wahrscheinlich hohe FID-Werte.

Die Art und Weise, wie Sie FID erfassen, analysieren und Berichte dazu erstellen, wird wahrscheinlich ganz anders aussehen. von anderen Metriken unterscheidet, die Sie vielleicht gewohnt sind. Im nächsten Abschnitt erfahren Sie, wie Sie dies.

Warum wird nur die Eingabeverzögerung berücksichtigt?

Wie bereits erwähnt, misst FID nur die „Verzögerung“ bei der Ereignisverarbeitung. Er tut Folgendes: nicht die gesamte Verarbeitungsdauer von Ereignissen oder die Dauer den Browser, um die Benutzeroberfläche nach der Ausführung von Event-Handlern zu aktualisieren.

Auch wenn diese Zeit für den Nutzer wichtig ist und die Nutzererfahrung beeinflusst, ist er nicht in diesem Messwert enthalten, da dies als Anreiz für Entwickler um Behelfslösungen hinzuzufügen, die die User Experience verbessern, d. h. ihre Event-Handler-Logik in einen asynchronen Callback (über setTimeout() oder requestAnimationFrame()), um sie vom Typ mit dem Ereignis verknüpfte Aufgabe. Das Ergebnis wäre eine Verbesserung des Messwerts, der Wert, allerdings eine langsamere Antwort, wie sie vom Nutzer wahrgenommen wird.

FID misst jedoch nur die „Verzögerung“ an der Ereignislatenz erkennen, Wenn Sie einen größeren Teil des Ereignislebenszyklus erfassen möchten, können Sie die Option Ereignis-Timing verwenden. API hinzu. Weitere Informationen finden Sie im Leitfaden zu benutzerdefinierten finden Sie weitere Informationen.

FID messen

FID ist ein Messwert, der nur in der Feld, da hierfür ein echter damit Nutzer mit Ihrer Seite interagieren können. Sie können FID mit den folgenden Tools messen.

Feld-Tools

FID in JavaScript messen

Um FID in JavaScript zu messen, können Sie das Ereignis-Timing API hinzu. Das folgende Beispiel zeigt, wie Sie erstelle ein PerformanceObserver der auf first-input und protokolliert sie in der Konsole:

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 Verspätungswert des first-input-Eintrags wie folgt gemessen: der Delta zwischen startTime und processingStart des Eintrags Zeitstempel. In den meisten Fällen ist dies der FID-Wert. aber nicht alle first-input-Einträge sind zum Messen der FID gültig.

Im folgenden Abschnitt werden die Unterschiede zwischen den API-Berichten und der Art der wird der Messwert berechnet.

Unterschiede zwischen dem Messwert und der API

  • Die API sendet first-input Einträge für geladene Seiten auf einem Tab im Hintergrund. Diese Seiten sollten jedoch bei der Berechnung des FID-Werts ignoriert werden.
  • Die API sendet außerdem first-input-Einträge, wenn die Seite im Hintergrund ausgeführt wurde. vor der ersten Eingabe erfolgen. Diese Seiten sollten jedoch ebenfalls ignoriert werden. bei der Berechnung von FID. Eingaben werden nur berücksichtigt, wenn sich die Seite im Vordergrund immer im Vordergrund).
  • Die API meldet keine first-input-Einträge, wenn die Seite aus wiederhergestellt wird den Back-Forward-Cache, aber FID sollte in diesen Fällen gemessen werden, da die Nutzer sie als separate Seite Besuche.
  • Die API meldet keine Eingaben in iFrames, der Messwert jedoch da sie Teil der User Experience der Seite sind. Dies kann als Unterschied zwischen CrUX und RUM angezeigt werden. Sie sollten sie berücksichtigen, um FID richtig messen zu können. Subframes können die API verwenden um die first-input-Einträge zur Aggregation an den übergeordneten Frame zu melden.

Anstatt sich all diese kleinen Unterschiede zu merken, können Entwickler web-vitals-JavaScript-Bibliothek in Messen Sie FID, wodurch diese Unterschiede für Sie behandelt werden (falls möglich, beachten Sie, dass das iFrame-Problem nicht behandelt wird):

import {onFID} from 'web-vitals';

// Measure and log FID as soon as it's available.
onFID(console.log);

Weitere Informationen finden Sie im Quellcode für onFID() finden Sie ein vollständiges Beispiel für die Messung von FID in JavaScript.

FID-Daten analysieren und Berichte dazu erstellen

Aufgrund der erwarteten Abweichungen bei den FID-Werten ist es wichtig, FID betrachten Sie die Verteilung der Werte und konzentrieren sich auf die höheren Perzentile.

Obwohl Auswahl an Perzentil für alle Der Core Web Vitals-Grenzwert erreicht den 75. Grenzwert. Insbesondere für FID empfehlen wir, das 95. bis 99. Perzentil zu betrachten, da diese dem besonders schlechte ersten Erfahrungen der Nutzer mit Ihrer Website. Und es wird um die Bereiche zu sehen, die am stärksten verbessert werden müssen.

Dies gilt selbst dann, wenn Sie Ihre Berichte nach Gerätekategorie oder -typ segmentieren. Für Wenn Sie beispielsweise separate Berichte für Computer und Mobilgeräte erstellen, wird der FID-Wert, am meisten Wert auf Desktop-Computer legen, sollte das 95. bis 99. Perzentil der Desktop-Nutzer sein. Der FID-Wert, der Ihnen auf Mobilgeräten am wichtigsten ist, sollte der 95. bis 99. sein. der mobilen Nutzer.

FID verbessern

Es steht ein vollständiger Leitfaden zur Optimierung von FID mit Techniken zur Verbesserung dieses Messwerts zur Verfügung.

Änderungsprotokoll

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

Alle Änderungen an der Implementierung oder der Definition dieser Messwerte werden in diesem Änderungsprotokoll veröffentlicht, um Ihnen die Verwaltung zu erleichtern.

In der Google-Gruppe „web-vitals-feedback“ können Sie uns Feedback zu diesen Messwerten geben.