Max Potential First Input Delay (FID) - Warten auf Interaktion

Deinen Usern schnellstmöglich die Inhalte Deiner Webseiten anzuzeigen, ist nur die eine Seite der Pagespeed-Medaille. Wiederkehrende Nutzer wissen womöglich bereits, was sie wollen und möchten direkt mit Deiner Seite interagieren, beispielsweise um sich einzuloggen. Wie lange es braucht, bis diese Interaktion umgesetzt wird, zeigt Dir die Metrik des Max Potential First Input Delay (FID).

Inhaltsverzeichnis

  1. Was ist der Max Potential First Input Delay?
  2. Wie wird der Max Potential First Input Delay berechnet?
  3. Wie verkürze ich den Max Potential First Input Delay?
  4. Wo finde ich weitere Informationen?

Was ist der Max Potential First Input Delay?

Beim Max Potential FID handelt es sich um eine Leistungsmetrik, die in Millisekunden gemessen wird. Sie gibt an, wie lange Deine Webseite braucht, um während des Ladevorgangs auf Nutzereingaben zu reagieren.

Stell Dir zum Beispiel vor, dass ein wiederkehrender User während des Page Loads auf den bereits sichtbaren Login-Button Deiner Homepage klickt. Weil der Browser im sogenannten Main Thread noch damit beschäftigt ist, Ressourcen zu laden oder JavaScript-Dateien zu interpretieren, kommt es automatisch zu Verzögerungen, ehe er sich um die Interaktionsanfrage Deines Besuchers kümmern kann.

Der FID schätzt die maximale Zeit, die zwischen dem Klick des Nutzers auf den Login-Button (oder einer anderen Interaktion) und der Antwort des Browsers (hier durch Aufrufen des Login-Formulars) liegen kann.

Wie wird der Max Potential First Input Delay berechnet?

Weil der größte Flaschenhals einer Webseite in Sachen Performance der erste Ladevorgang ist, bezieht der Max Potential FID nur die ersten Sekunden des Page Loads mit ein, um Dir ein aussagekräftiges Ergebnis zu liefern. Hier arbeitet der Main Thread des Browsers am meisten, weshalb es zur größten Verzögerung kommen kann. Ist die Seite erst einmal fertig geladen, kommt es im Normalfall nämlich kaum noch zu Problemen in der Interaktion.

Die Berechnung des FID ist recht trivial: Wir schauen uns an, welche Aufgabe den Main Thread am meisten beschäftigt und die User-Interaktion somit am längsten blockiert. Das kann zum Beispiel eine viel zu große JavaScript-Datei sein, die das Rendering blockiert. Die Zeit, die dieser Task braucht, um fertiggestellt zu werden, ist die maximale mögliche Input-Verzögerung.

Wichtig zu wissen ist, dass es sich bei der Interaktion mit dem Besucher um eine sogenannte diskrete Interaktion handeln muss. Das bedeutet, dass Tastatureingaben, Klicks oder Toucheingaben auf Mobilgeräten zu Verzögerungen führen können, Zoomen oder Scrollen jedoch nicht.

Der Max Potential First Input Delay wirkt sich natürlich auf Deinen Speedrank Index (SPX) aus. Wenn Du wissen möchtest, wie der Leistungsanteil im Detail berechnet wird, kannst Du Dir das Lighthouse Performance Scoring anschauen. Speedrank nutzt mit Lighthouse von Google entwickelte Technologie als Basis Deiner Performance-Analyse.

Der Max Potential First Input Delay am Beispiel von Zeit.de

Die Homepage von Zeit.de benötigt laut FID knapp eine Sekunde, um auf Deine Eingabe zu reagieren.

Wie verkürze ich den Max Potential First Input Delay?

Der Max Potential FID hängt, wie viele der Performance-Metriken, stark vom Workload des Main Threads ab. Wenn der Browser beim Ladevorgang der Webseite viele Ressourcen laden und große JavaScript-Dateien interpretieren muss, erhöht dies den FID. Daher solltest Du Dich vor allem darum kümmern, Deine JavaScript-Ressourcen zu optimieren.

  1. Minimiere die Downloadgröße von JavaScript-Dateien, die zum Seitenaufruf geladen werden. Dies erreichst Du, indem Du den Code in den Dateien entweder minimierst oder diese komprimierst. Wie Du zum Beispiel die Downloadgröße von JavaScript reduzierst, erklären wir Dir in unserem Artikel zur JavaScript Bootup-Time.
  2. Wenn der Browser zu Beginn der Ladezeit das komplette JavaScript Deiner Website interpretieren muss, obwohl nicht alle Funktionen und Referenzen benötigt werden, verlangsamt dies den Pagespeed. Hier kannst Du mit Tree Shaking und Code Splitting Abhilfe schaffen.

    Beim Tree Shaking durchforstest Du Deine Codebase nach nicht mehr benötigten Programmzeilen oder Abhängigkeiten. Gerade bei älteren Applikationen wirst Du überrascht sein, wie viel "toter" Code sich mit der Zeit ansammelt.

    Beim Code Splitting teilst Du Deinen JavaScript-Code in mehrere kleine Häppchen auf. Je weniger JavaScript der Browser beim Aufruf durch den User verarbeiten muss, desto besser für den Pagespeed.

  3. Reduziere die Anzahl externer JavaScript-Dateien, die das Rendern blockieren könnten. Gerade wenn Du moderne CMS-Systeme wie Wordpress mit zusätzlichen Plugins nutzt, kommen oft Third-Party-Skripte zum Einsatz. Prüfe, ob Du diese Plugins wirklich benötigst oder Alternativlösungen mit weniger Code nutzen kannst.

Durch den Zusammenhang der einzelnen Performance-Metriken untereinander, kannst Du durch gezielte Verbesserungen Synergieeffekte erzielen, die auch den FID verkürzen. Du solltest Dir daher in der Kategorie "Leistung" anschauen, welche Metrik das höchste Potenzial für Verbesserungen bietet.

Der Max Potential First Input Delay am Beispiel von Bahn.de

Vor dem FID sollte sich Bahn.de die Time to Interactive vornehmen, die mit 12 Sekunden viel zu hoch ist.

Wo finde ich weitere Informationen?