First Input Delay (FID) - Core Web-Vitals (Teil 3)

Der erste Eindruck zählt

Was ist der First Input Delay?

Was ist ein guter FID Wert?

Um eine gute User Experience sicherzustellen, sollte der First Input Delay geringer als 100ms sein. Dieser Zielwert sollte bei mindestens 75% der Websites (geräteübergreifend) erreicht werden.

Als Entwickler gehen wir häufig davon aus, das Event-Handler sofort ausgeführt werden, sobald das Ereignis eintritt. Die Realität sieht aber häufig anders aus und der Benutzer muss auf ein Event-Handling warten. Meistens kommt es zu dieser Verzögerung (input latency) wenn der Hauptthread des Browsers noch mit einer anderen Aufgabe beschäftigt ist. Eine Aufgabe könnte zum Beispiel das Parsen und Ausführen einer großen JavaScript-Datei sein. Währenddessen kann kein Event-Handler ausgeführt werden, da es sein könnte, dass in dieser Datei sich die Ausführungslogik ändert.

Merke:
FID misst nur die Verzögerung bei der Ereignisverarbeitung. Es wird weder die Eventverarbeitungszeit noch die Zeit die der Browser benötigt, die Ausgabe zu aktualisieren gemessen. Diese Zeit wirkt sich zwar auch stark auf die Benutzer Erfahrung aus, doch könnte man diese leicht beeinflussen, in dem man die Verarbeitung asynchron erledigt. Das würde den Wert zwar verbessern, sich aber negativ auf die User Experience auswirken.

Was passiert wenn eine Interaktion kein Event-Listener hat?

Bei der Metrik FID wird das Delta zwischen Empfang eines Input Events und dem nächsten Leerlauf des Hauptthreads gemessen. Damit wird der FID auch in den Fällen gemessen, in denen kein Event-Listener registriert wurde. Der Grund hierfür ist, dass viele Benutzerinteraktionen kein Event-Listener, aber einen Leerlauf des Hauptthreads, benötigen um ausgeführt zu werden.

So müssen beispielsweise folgende HTML-Elemente warten bis die laufende Aufgaben im Hauptthread abgeschlossen wurden, bevor diese auf Interaktionen des Benutzers reagieren können:

• <input>
• <textarea>
• <select>
• <a>

Warum wird nur der First Input berücksichtigt?

Neben dem FID verschlechtern natürlich auch alle anderen Verzögerungen die User Experience. Warum wird dann nur der FID gemessen?

• Der First Input Delay wiederspiegelt den ersten Eindruck des Benutzers mit der Reaktionsfähigkeit der Website. Dieser erste Eindruck ist entscheident für den Gesamteindruck des Benutzers für die aufgerufene Website.
• Erfahrungsgemäß bestehen die größten Probleme mit der Reaktionsfähigkeit einer Website beim Seitenaufbau.
• Die empfohlenen Optimierungsmaßnahmen für die Verbesserung eines hohen FID sind andere als die zur Optimierung von Verzögerungen die nach dem Laden einer Seite erforderlich sind.

Welche Interaktionen zählen zum First Input und welche nicht?

Zählen:

• Klicks
• Tippen
• Tastendrücken

Zählen nicht:

• Scrollen
• Zoomen

Wie können Sie den FID optimieren?

• Impact von third-party Code reduzieren
• JavaScript Ausführungszeit reduzieren
• Aufgaben im Hauptthread minimieren
• Möglichst wenig und kleine Requests

In einem weiteren Beitrag dieser Serie werden wir uns detailliert mit der Optimierung des FID beschäftigen.

Beitragsserie "Core Web Vitals"

• Teil 1: Google Page Experience Update und Core Web-Vitals
• Teil 2: Largest Contentful Paint (LCP)
• Teil 3: First Input Delay (FID) (dieser Beitrag)
• Teil 4: Cumulative Layout Shift (CLS)
• Teil 5: Messen der Core Web Vitals