Core Web Vitals: Wie man den First Input Delay (FID) optimiert
Strategie
29.9.2022
Der FID ist die Zeit zwischen der Interaktion eines Nutzers mit Elementen auf einer Seite (Klicken oder Tippen auf Buttons und Links) und der Zeit, die der Browser für die Verarbeitung der Ereignisse benötigt, bevor er auf diese Aktionen reagieren kann (normalerweise mit JavaScript). Je schneller diese Reaktionszeiten sind, desto reaktionsschneller und schneller ist dein Nutzererlebnis.
Bitte beachte, dass der FID NICHT die Zeit misst, die es dauert, bis diese Interaktionen abgeschlossen sind. Wenn ein Nutzer z. B. auf einen Button klickt und sich ein neues Fenster öffnet, hat die Zeit, die dieses Fenster braucht, keinen positiven oder negativen Einfluss auf die FID-Kennzahl.
Eine negativer FID tritt normalerweise auf, wenn deine Website im Hintergrund noch Daten verarbeitet. Das können zusätzliche Assets oder Skripte sein, die die erwartete Aufgabe blockieren. Die Website sieht vielleicht so aus, als wäre sie vollständig geladen und die User können scheinbar mit ihr interagieren. Da jedoch einige Elemente " träge" oder "verzögert" geladen werden, kann es zu Verzögerungen bei der Interaktion kommen. Das ist ein schlechtes Nutzererlebnis und kann dazu führen, dass deine Website langsam oder träge ist.
Was ist der Hauptverursacher eines negativen FID?
Javascript hat in der Regel den größten negativen Einfluss auf den FID. Mit JavaScript lassen sich erstaunliche Websites entwickeln, aber ein übermäßiger oder ineffizienter Einsatz kann dazu führen, dass die JavaScript-Dateien sehr groß sind und in manchen Fällen eine Weile brauchen, bis sie geladen sind. Dadurch vergrößert sich die Verzögerung zwischen der ersten Interaktion des Nutzers und der erwarteten Ausgabe.
Wie können wir den FID optimieren?
Um den First Input Delay (FID) zu verbessern und zu optimieren, müssen wir zunächst die Art und Weise verbessern, wie wir das JavaScript der Website handhaben. Dazu gehört, wie wir die Skripte der Website kompilieren, parsen und ausführen.
Wenn Websites schon eine Weile in Betrieb sind, können wir den aktuellen Code überarbeiten, neu schreiben oder optimieren, um eine modernere Lösung zu finden. Wir können Skripte von Drittanbietern reduzieren oder zurückstellen, die möglicherweise Vorrang vor den funktionalen Werten deiner Website haben. Wenn es nicht unbedingt notwendig ist, sollten die meisten JavaScript-Dateien jetzt asynchron oder zeitversetzt geladen werden, um die Gesamtleistung der Website zu verbessern.
Mit Techniken wie dem Code-Splitting können wir unser JavaScript so aufteilen, dass der Browser den Code nur für die erforderliche Benutzerreaktion benötigt. Wenn du Code-Bundler wie Webpack oder ParcelJS verwendest, kannst du deren dynamische Importe nutzen, um die benötigten Funktionen nur dann zu laden, wenn sie benötigt werden. Du kannst JavaScript sogar ganz vermeiden. Obwohl JavaScript sehr gut gestaltete und funktionale Erlebnisse für die Nutzerinnen und Nutzer schaffen kann, lassen sich viele der grundlegenden JavaScript-Aufgaben mit ein wenig Geschick auch mit Standard-HTML und CSS erledigen.
Fazit
Ein kurzer Hinweis: Googles First Input Delay (FID) kann nicht gemessen werden, wenn keine Website-Interaktionsdaten vorliegen. Google braucht echte Nutzerdaten, um die Verzögerung zu bestimmen, daher kann sich der FID-Wert deiner Website im Laufe der Zeit ändern. Die FID-Werte, die wir erhalten, können jedoch in der Regel verbessert werden, indem wir uns das JavaScript der Website ansehen und einige, wenn nicht alle, der oben beschriebenen Techniken anwenden.
