|

Core Web Vitals Guide 🧑‍⚕️ - FID 📲 (First Input Delay)

Dieser Beitrag ist Teil der Serie Core Web Vitals Guide.

Core Web Vitals Guide 🧑‍⚕️ - die wichtigsten Metriken im Web
Die Core Web Vitals: Einheitliche KPIs unabhängig vom Tool. Diese Werte sind zukünftig die Werte, nach denen man Performance bewerten wird; und damit die Werte, die wir mit Kund:innen kommunizieren werden.
FID (Interactivity) visualisiert
Bildquelle: web.dev/FID

FID, oder auch "First Input Delay" gibt an, wie viel Zeit zwischen der erstmaligen Interaktion (zb. Klick auf Link) mit der Seite und der davon hervorgerufenen Browser-Reaktion vergeht.

Ein Beispiel:
Eine Seite ist gerade noch im Aufbau, als der gewünschte Button schon angezeigt wird. Darauf hin klickt ein:e Websitenutzer:in auf diesen und nichts passiert, da die Seite nur zum Teil geladen hatte und der Button noch nicht reagiert.

Das Problem: Input Delay (oder auch Input Latency).

Einstufung der Ergebnisse

Einstufung Reaktionsdauer/Verzögerung
🟢 gut < 100 ms
🟡 verbesserungswürdig 100 bis 300 ms
🔴 schlecht, Handlungsbedarf > 300 ms

Was wird beurteilt

FID erfasst direkte User-Eingaben wie Klicks, Tabs und Tastenanschläge.
FID kann also auch Fälle abfangen, bei denen kein Event Listener registriert wurde.

Das entspricht dem R (responsiveness) des RAIL Perfomance Models.

Nicht berücksichtigt werden:

  • Scrolling
  • Zooming
  • Und andauernde Handlungen (erneues Klicken etc.)

Das entspricht dem A (animation) des RAIL Perfomance Models.

Optimierungsmöglichkeiten

Die Probleme entstehen meinstens zwischen First Contentful Paint und Time To Interactive (TTI).

Und hier können wir auch mit einer Lösung ansetzen.

Um FID zu optimeieren, hilft es auch die Total Blocking Time (TBT) auszuwerten;
Auch wenn diese andere Metriken verwendet, sind die Tipps für TBT Optimierung hilfreich für FID Verbesserungen.

Long Tasks aufteilen

  • Long Tasks sind Phasen in denen JS ausgeführt wird, was oft dazu führt, dass eine Interaktion mit der Seite nicht möglich ist.

  • Laut Google dann, wenn der Main Thread mehr als 50 Millisekunden blockiert wird.

Interaktionen bevorzugen

  • Elemente, mit denen interagiert werden soll, priorisiert zu laden.

Service Worker einsetzen

  • Web Worker ermögliche, dass aufwendige JS Files in seperaten Thread ausgeführt werden und nicht den Main Thread blockieren.

JS Runtime reduzieren

  • Skripts evaluieren, priorisieren und die, die nocht essenziell sind, nachladen.
  • Effekt von Third Party Software reduzieren.

Weitere Tipps

Google selbst listet noch weitere Tipps zur Optimerung von FID auf: siehe web.dev/optimize-FID

Weitere Infos / Quellen

siehe web.dev/FID