Mit First Input Delay im UX-Bericht für Chrome experimentieren

Viscomi
Rick Viscomi

Der Bericht zur Nutzererfahrung in Chrome soll der Web-Community helfen, die Verteilung und Entwicklung der tatsächlichen Nutzerleistung besser zu verstehen. Bisher lag unser Schwerpunkt auf Paint- und Seitenlademesswerten wie First Contentful Paint (FCP) und Onload (OL), die uns geholfen haben, die visuelle Leistung von Websites für Nutzer zu verstehen. Ab dem Release vom Juni 2018 testen wir einen neuen nutzerorientierten Messwert, der sich auf die Interaktivität von Webseiten konzentriert: First Input Delay (FID). Mithilfe dieses neuen Messwerts können wir besser verstehen, wie schnell Websites auf Nutzereingaben reagieren.

FID ist seit Kurzem als Ursprungstest in Chrome verfügbar. Websites können also diese neue Webplattformfunktion testen. Ebenso wird FID im UX-Bericht für Chrome als experimenteller Messwert verfügbar sein. Das bedeutet, dass FID für die Dauer des Ursprungstests in einem separaten Namespace „experimental“ verfügbar ist.

So wird der FID-Wert gemessen

Was genau ist FID? Im Blogpost zu First Input Delay wird dies so definiert:

First Input Delay (FID) misst die Zeit von der ersten Interaktion eines Nutzers mit deiner Website (wenn er auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes, mit JavaScript gesteuertes Steuerelement verwendet) bis zu dem Zeitpunkt, zu dem der Browser tatsächlich auf diese Interaktion reagieren kann.

Animation, die zeigt, wie ein überlasteter Hauptthread die Antwort auf eine Nutzerinteraktion verzögert.

Es ist, als würden Sie die Zeit messen, die Sie vom Klingeln der Türklingel bis zum Annehmen der Tür vergehen. Wenn es sehr lange dauert, kann das viele Gründe haben. Zum Beispiel, wenn die Person weit von der Tür entfernt ist oder sie sich nicht schnell bewegen kann. Ebenso können Webseiten für andere Aufgaben überlastet sein oder das Gerät des Nutzers ist langsam.

FID im UX-Bericht für Chrome

Mit einem Monat an FID-Daten von Millionen von Ursprüngen gibt es bereits eine Fülle interessanter Erkenntnisse zu gewinnen. Sehen wir uns einige Abfragen an, die zeigen, wie Sie diese Informationen aus dem UX-Bericht für Chrome zu BigQuery extrahieren können.

Beginnen wir mit der Abfrage des Prozentsatzes der schnellen FID-Nutzung auf developers.google.com. Wir können eine schnelle Erfahrung definieren, wenn der FID-Wert unter 100 ms liegt. Gemäß den RAIL-Empfehlungen sollte eine Verzögerung von 100 ms oder höher für den Nutzer sofort erfolgen.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

Die Ergebnisse zeigen, dass 95% der FID-Erlebnisse an diesem Ursprung als sofort wahrgenommen werden. Das scheint wirklich gut zu sein, aber wie schneidet es im Vergleich zu allen Ursprüngen im Dataset ab?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

Die Ergebnisse dieser Abfrage zeigen, dass 84% der FID-Inhalte weniger als 100 ms dauern. Deshalb liegt developers.google.com über dem Durchschnitt.

Versuchen wir als Nächstes, diese Daten aufzuteilen, um zu sehen, ob es einen Unterschied zwischen dem Prozentsatz des schnellen FID-Werts auf Computern und dem Mobilgerät gibt. Eine Hypothese ist, dass Mobilgeräte langsamere FID-Werte haben, was möglicherweise auf eine im Vergleich zu Desktop-Computern langsamere Hardware zurückzuführen ist. Wenn die CPU weniger leistungsstark ist, wird sie möglicherweise länger genutzt und die FID-Nutzung wird verlangsamt.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
form_factor fast_fid
desktop 96.02%
Telefon 79.90%
Tablet 76.48%

Die Ergebnisse bestätigen unsere Hypothese. Computer haben eine höhere kumulative Dichte an schnellen FID-Erlebnissen als Smartphone- und Tablet-Formfaktoren. Wenn Sie verstehen möchten, warum es diese Unterschiede gibt, z. B. die CPU-Leistung, sind A/B-Tests erforderlich, die nicht im UX-Bericht für Chrome behandelt werden.

Sie wissen jetzt, wie Sie feststellen können, ob ein Ursprung schnelle FID-Funktionen hat. Sehen wir uns nun einige Ursprünge an, die eine sehr gute Leistung erzielen.

Beispiel 1: http://secretlycanadian.com

WebPageTest-Filmstreifen von Secretlycanadian.com

98% der FID-Inhalte von diesem Ursprung liegen unter 100 ms. Wie gehen sie vor? Bei der Analyse der Implementierung in WebPageTest stellen wir fest, dass die WordPress-Seite eine ziemlich große Menge an Bildern ist. Sie enthält aber 168 KB JavaScript, das in etwa 500 ms auf unserem Laborcomputer ausgeführt wird. Laut HTTP-Archiv ist dies nicht sehr viel JavaScript, wodurch diese Seite in das 28. Perzentil eingeordnet wird.

AWebPageTest-Wasserfall von Secretlycanadian.com

Der rosa Balken zwischen 2,7 und 3,0 Sekunden ist die Phase HTML parsen. In dieser Zeit ist die Seite nicht interaktiv und sieht unvollständig aus (siehe „3,0s“ im Filmstreifen oben). Danach werden alle langen Aufgaben, die verarbeitet werden müssen, aufgeteilt, damit der Hauptthread still bleibt. Die rosafarbenen Linien in Zeile 11 zeigen, wie die JavaScript-Arbeit in schnellen Bursts verteilt wird.

Beispiel 2: https://www.wtfast.com

WebPageTest-Filmstreifen von wtfast.com

Dieser Ursprung hat 96% Instant-FID-Erlebnisse. Es lädt 267 KB JavaScript-Code (38. Perzentil in HTTP Archive) und verarbeitet ihn 900 ms auf dem Laborcomputer. Der Filmstreifen zeigt an, dass das Rendern des Hintergrunds für die Seite etwa 5 Sekunden und das Darstellen des Inhalts noch etwa 2 Sekunden dauert.

WebPageTest-Wasserfall von wtfast.com

Das Interessanteste an den Ergebnissen ist, dass nichts Interaktivität sichtbar ist, während der Hauptthread zwischen 3 und 5 Sekunden überlastet ist. Es ist die langsame FCP-Verbindung dieser Seite, die den FID-Wert verbessert. Dies ist ein gutes Beispiel dafür, wie wichtig es ist, viele Messwerte zur Darstellung der Nutzererfahrung zu verwenden.

Jetzt erkunden

In der aktuellen Folge von The State of the Web erfahren Sie mehr über FID:

Wenn FID im UX-Bericht für Chrome verfügbar ist, können wir eine Baseline für Interaktivität etablieren. Anhand dieser Referenz können wir Änderungen in zukünftigen Versionen beobachten oder einzelne Ursprünge vergleichen. Wenn Sie FID in den Feldmessungen Ihrer eigenen Website erfassen möchten, registrieren Sie sich für den Ursprungstest. Rufen Sie dazu bit.ly/event-timing-ot auf und wählen Sie die Funktion „Ereignistiming“ aus. Erkunden Sie außerdem das Dataset, um interessante Einblicke in den Stand der Interaktivität im Web zu erhalten. Dieser Messwert befindet sich noch im Versuchsstadium. Bitte geben Sie uns Feedback und teilen Sie Ihre Analyse in der Diskussionsgruppe für Chrome-UX-Berichte oder über @ChromeUXReport auf Twitter.