So verbessern Sie die First Input Delay (FID) auf Ihrer WordPress-Site

Wir haben kürzlich eine neue Serie zu den Core Web Vitals-Metriken von Google mit einem Beitrag zum Thema „Largest Contentful Paint“ gestartet. Hier wollen wir mit dem nächsten Kandidaten fortfahren: First Input Delay oder kurz FID und wie man es in WordPress verbessern kann.

Im Folgenden werden wir uns eingehend damit befassen, was FID ist und wie Sie Ihre WordPress-Website dafür optimieren. Sie lernen, die First Input Delay zu verstehen und zu messen, welchen Wert Sie anstreben sollten und wie Sie ihn bei Bedarf verbessern können.

Beachten Sie, dass in diesem Beitrag davon ausgegangen wird, dass Sie bereits mit den Google Core Web Vitals und deren Auswirkungen auf die Benutzererfahrung und Suchmaschinenoptimierung vertraut sind. Wenn Sie sich diesbezüglich nicht sicher sind, lesen Sie den ersten Artikel dieser Reihe oder unseren eigenständigen Beitrag zu Core Web Vitals .

Was ist die erste Eingabeverzögerung? Eine Definition

Wie bereits erwähnt ist FID also eine von drei Metriken zur Messung der Benutzererfahrung einer Website, die Google als Kernwerte zur Beurteilung der Benutzerfreundlichkeit einer Website betrachtet. Es ist auch Teil ihres Suchalgorithmus. Wenn Sie also hier schlecht abschneiden, wird Ihr Suchranking darunter leiden.

Doch was genau ist First Input Delay?

Kurz gesagt quantifiziert FID die Verzögerung zwischen der Zeit, in der ein Benutzer mit einer Webseite interagiert (z. B. durch Klicken auf eine Schaltfläche), und der Zeit, in der der Browser auf diese Interaktion reagieren kann. Dies spiegelt die Reaktionsfähigkeit einer Webseite wider.

Während Largest Contentful Paint berechnet, wie lange es dauert, bis eine Webseite für einen Besucher nützlich wird, misst FID, wie gut sie nützlich bleibt, indem die vom Besucher gewünschte Aktion ausgeführt wird – sogar während des Ladens. Wenn Ihre Website reaktionsschneller ist, sorgt dies natürlich für ein besseres Benutzererlebnis.

Sie wissen dies wahrscheinlich aus Ihrer eigenen Internetnutzung. Waren Sie schon einmal auf einer Website, die viel zu lange brauchte, um auf Ihre Eingaben zu reagieren? Das hat dir nicht gefallen, oder? Nun, Ihre Website-Besucher auch nicht.

Wie wird der FID berechnet?

FID wird in Millisekunden (ms) gemessen. Zur Berechnung verfolgt der Browser den Moment, in dem eine Benutzerinteraktion auf einer Seite stattfindet, und die Zeit, die der Hauptthread des Browsers benötigt, um diese Interaktion zu verarbeiten. Der FID-Score stellt die Verzögerung zwischen den beiden Ereignissen dar. Folglich weist ein niedriger FID-Score darauf hin, dass die Seite hochgradig interaktiv ist und schnell auf Benutzereingaben reagiert.

An dieser Stelle müssen Sie sich wahrscheinlich fragen: Was ist der „Hauptthread“? Und was gilt als Interaktion?

Hier ist die Antwort.

Der Hauptthread ist im Grunde die Arbeitspipeline des Browsers. Alle Prozesse, die zum Rendern und Betreiben einer Website notwendig sind, laufen darüber ab. Ist er ständig beschäftigt, dauert es länger, bis er auf neue Eingaben reagieren kann.

Was als Interaktion gilt, kann das Klicken auf einen Link, das Tippen auf eine Schaltfläche, die Verwendung eines Dropdown-Menüs, eines Textfelds, von Kontrollkästchen oder Optionsfeldern sowie das Drücken einer Taste auf Ihrer Tastatur sein (z. B Esc , um ein Popup zu schließen).

Was verursacht FID?

Die Verzögerung bei der ersten Eingabe ist oft am höchsten zwischen First Contentful Paint (wenn das erste Seitenelement im Browserfenster erscheint) und Time to Interactive (wenn die Seite zum ersten Mal nutzbar wird und auf Benutzereingaben reagiert).

Grundsätzlich entsteht eine Eingabeverzögerung, wenn der Browser mit etwas anderem beschäftigt ist, während der Benutzer versucht, etwas zu tun. In diesem Fall kann es nicht rechtzeitig auf die Eingabe reagieren, was zu Wartezeiten für den Website-Besucher führt.

Aus technischer Sicht sind hierfür häufig folgende Ursachen verantwortlich:

• Große JavaScript-Dateien, die der Browser analysieren und ausführen muss
• Renderblockierende Ressourcen, auf die gewartet werden muss
• Umfangreiche Berechnungen, DOM-Manipulation oder ressourcenintensive Prozesse
• Langsame Netzwerkverbindungen oder hohe Latenz, die zu Verzögerungen beim Abrufen von Website-Dateien und anderen Ressourcen führen können
• Aktivitäten, die den Hauptthread blockieren, wie z. B. umfangreiche Animationen, CSS-Übergänge mit langer Laufzeit oder die Verarbeitung großer Bilder

Eine letzte Sache, die es bei der First Input Delay zu beachten gilt, ist, dass sie im März 2024 durch eine andere Metrik namens Interaction to Next Paint (INP) ersetzt wird. Derzeit arbeiten wir jedoch mit FID, daher ist das immer noch wichtig man macht sich damit vertraut.

So messen Sie die erste Eingabeverzögerung

Sie können den FID Ihrer Website mit nahezu denselben Tools testen wie die anderen Core Web Vitals:

• PageSpeed ​​Insights – Geben Sie einfach Ihre Seiten-URL ein und erhalten Sie einen Bericht mit Ihrem FID-Wert.
• Chrome-Benutzererfahrungsbericht – Google sammelt und kompiliert über seinen Browser echte Benutzererfahrungsdaten von vielen Websites. Sie können über verschiedene Tools, einschließlich der hier genannten, auf diese Daten zugreifen.
• Search Console – Der Web Vitals-Bericht in der Google Search Console informiert Sie über Seiten mit schlechten FID-Werten.
• web-vitals JavaScript-Bibliothek – Wenn Sie eher technisch versiert sind, können Sie diese JavaScript-Bibliothek in Ihre Website integrieren und von dort Informationen über Core Web Vitals abrufen.

Die meisten dieser Tools zeigen in ihren Ergebnissen lediglich den FID-Wert an, sodass Sie wissen, womit Sie es zu tun haben.

Es ist wichtig zu beachten, dass Sie für diese Metrik eine echte Benutzerinteraktion benötigen. Es ist nichts, was man in einer Laborumgebung simulieren kann. Daher sind Ihre besten Quellen hierfür echte Benutzerdaten wie aus dem CrUX-Bericht.

Wenn Sie Ihre Site vorab in einer Laborumgebung testen möchten, ist die Gesamtblockierungszeit die beste Proxy-Metrik. Das finden Sie zum Beispiel auch bei PageSpeed ​​Insights.

Konzentrieren Sie sich außerdem auf die wirklich schlimmsten Fälle von FID auf Ihrer Website. Dadurch erfahren Sie am besten, was falsch ist.

Was ist eine gute erste Eingabeverzögerung?

Bleibt nur noch die Frage: Auf welche Zahl soll man zielen? Ein guter FID-Wert liegt typischerweise unter 100 Millisekunden. Werte zwischen 100 und 300 Millisekunden gelten als verbesserungswürdig. Alles über 300 Millisekunden weist auf eine schlechte Benutzererfahrung hin.

Lassen Sie uns also mit diesen Benchmarks im Hinterkopf lernen, wie Sie die Verzögerung der ersten Eingabe auf Ihrer Website verbessern können.

So verbessern Sie die Verzögerung bei der ersten Eingabe auf Ihrer WordPress-Website

Bei der Verbesserung von FID geht es vor allem darum, die Leistung der Webseite zu optimieren und etwaige Blockierungsaufgaben zu reduzieren, die die Reaktion des Browsers auf Benutzereingaben verzögern könnten. Der häufigste Grund für Letzteres ist die übermäßige oder falsche Verwendung von JavaScript. Aus diesem Grund konzentrieren sich viele der folgenden Maßnahmen darauf. Es gibt jedoch auch andere Dinge, die Sie tun können.

Allgemeine Maßnahmen zur Leistungsverbesserung

Viele der Techniken, die wir bereits zur Verbesserung von Largest Contentful Paint behandelt haben, gelten auch, wenn Sie Ihr FID verbessern möchten, darunter:

• Optimieren Sie Ihre Website-Umgebung – Je schneller Ihre Website im Allgemeinen ist, desto schneller können Ressourcen bereitgestellt werden, wodurch die Zeit bis zur Interaktivität verkürzt wird. Investieren Sie daher in hochwertiges Hosting, Themes und Plugins. Reduzieren Sie außerdem die Anzahl der Plugins auf Ihrer Website und halten Sie sie auf dem neuesten Stand. Implementieren Sie außerdem Caching und Komprimierung.
• Implementieren Sie ein CDN – Content-Delivery-Netzwerke ermöglichen es Ihnen, die Entfernung zwischen dem Server und dem Benutzer zu verkürzen, was auch zu einer schnelleren Dateibereitstellung führt.
• Eliminieren Sie Ressourcen, die das Rendern blockieren – Alle Teile einer Website, die den Ladevorgang verzögern, wirken sich negativ auf alle Teile des Benutzererlebnisses und der Core Web Vitals aus. Wenn Sie sie von Ihrer Website entfernen, können Sie dieses Problem beheben. Weitere Details zum Rendering-blockierenden JavaScript finden Sie weiter unten.

Weitere Tipps finden Sie in unserem Artikel zum Beschleunigen von WordPress, zum Reduzieren von Serveranfragen und zum Geschwindigkeitstest Ihrer Website.

Reduzieren, verschieben, asynchronisieren und minimieren Sie Ihr JavaScript

Wie bereits erwähnt, ist JavaScript normalerweise der Hauptfaktor für schlechte FID-Ergebnisse. So können Sie das Markup auf Ihrer Website optimieren, damit es kein Problem darstellt.

Reduzieren Sie den Gesamtaufschlag

Das Beste, was Sie tun können, ist natürlich, den gesamten JavaScript-Anteil auf der Seite zu reduzieren. Überprüfen Sie die Registerkarte „Abdeckung“ in den Entwicklertools Ihres Browsers, um ungenutztes JavaScript auf einer Webseite zu finden.

Prüfen Sie, ob dies für Ihre Website als Ganzes erforderlich ist oder ob Sie das nicht verwendete JavaScript vollständig entfernen können.

In WordPress ist übermäßiges JavaScript oft das Ergebnis von zu vielen Plugins oder Themes, die mit viel Schnickschnack ausgestattet sind und eine Verzögerung bei der ersten Eingabe verursachen. Wenn Sie es also loswerden möchten, prüfen Sie, ob es eine Möglichkeit gibt, einige davon zu entfernen oder auf eine schlankere Version umzusteigen.

Asynchrone und zurückgestellte Skripte

Danach besteht der nächste Schritt darin, die JavaScript-Auslieferung an den Browser zu optimieren. Das Hauptproblem hierbei besteht darin, dass der Browser, sofern nicht anders angegeben, auf ein JavaScript-Skript in Ihrem Website-Markup stößt und die HTML-Wiedergabe stoppt, bis das Skript heruntergeladen und ausgeführt wurde. Dies wird auch als die oben erwähnten „renderblockierenden Ressourcen“ bezeichnet.

Es gibt jedoch Möglichkeiten, dies zu umgehen, und sie basieren auf zwei Schlüsselwörtern:

• async – Wenn Sie dies zu Ihrem Skriptaufruf hinzufügen, kann der Browser es im Hintergrund herunterladen, ohne die Verarbeitung der Seite anzuhalten. Es wird unabhängig vom Rest der Seite erst ausgeführt, wenn es heruntergeladen wurde.
• defer – Sehr ähnlich zu async . Es weist den Browser an, nicht auf das Skript zu warten und stattdessen mit dem Aufbau der Seite fortzufahren. In diesem Fall wird das Skript jedoch zuletzt geladen, wenn der Rest der Seite vollständig erstellt wurde.

So sieht die Verwendung async und defer in der Praxis aus:

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Wie Sie sich vorstellen können, können beide Methoden zu einer erheblichen Zeitersparnis beim Laden der Seite führen. Ihr Hauptunterschied: defer wird die relative Reihenfolge der Skripte so beibehalten, wie sie im Dokument angezeigt werden, während bei async die Reihenfolge verwendet wird, in der die Skripte heruntergeladen werden.

Sie können beides verwenden, um ungenutztes und unkritisches JavaScript später zu laden. Dazu gehören auch Skripte von Drittanbietern wie z. B. Analytics.

Minimieren Sie JavaScript für einen schnelleren Download

Stellen Sie abschließend sicher, dass das geladene JavaScript minimiert wird. Bei der Minimierung werden alle Markierungen und Codeformatierungen entfernt, die nur dazu dienen, Dateien für Menschen lesbar zu machen.

Dadurch wird die Dateigröße weiter reduziert und das Herunterladen durch den Browser beschleunigt. Dafür gibt es zahlreiche Tools, darunter auch die unten aufgeführten Plugin-Empfehlungen.

Teilen Sie lange Aufgaben auf

Neben der Reduzierung des gesamten JavaScript-Gehalts auf Ihrer Website und der Verbesserung der Bereitstellung können Sie die Verzögerung der ersten Eingabe auf Ihrer WordPress-Website optimieren, indem Sie den Rest in kleinere Teile aufteilen. Dies eignet sich besonders, wenn Sie viele „lange Aufgaben“ auf Ihrer Seite haben.

Was sind lange Aufgaben, fragen Sie?

Alles, was den Hauptthread länger als 50 ms blockiert. Sie können diese in Chrome-Entwicklertools sehen, die mit roten Flaggen gekennzeichnet sind.

Wenn Sie sie in kleinere Teile zerlegen, können Sie sie asynchron laden, was zu weniger ununterbrochener Arbeit im Hauptthread führt.

Wie machst du das?

Durch die Verwendung von Code-Splitting. Es ermöglicht Ihnen, Teile von JavaScript bedingt zu laden, sodass von Anfang an nur kritisch wichtiger Code geladen wird. Der Rest kommt nur bei Bedarf ins Spiel. Sie können Aufgaben auch in kleinere separate Funktionen aufteilen. Beides sind Möglichkeiten, Ihre Seiten reaktionsfähig zu halten.

Weitere sehr technische Tipps zum Umgang mit langen Aufgaben finden Sie in dieser Ressource.

Nützliche WordPress-Plugins zur Verbesserung von FID

Wir verstehen, dass die Optimierung von JavaScript-Dateien nicht jedermanns Sache ist, insbesondere wenn Sie kein Entwickler sind. Aus diesem Grund haben wir einige WordPress-Plugins und -Tools zusammengestellt, die Ihnen dabei helfen können, Ihre First Input Delay-Werte zu verbessern.

• Asset Cleanup – Mit diesem Plugin können Sie ungenutztes CSS und JavaScript deaktivieren, Schriftarten vorab laden, Ihre Dateien verkleinern, JavaScript zurückstellen und vieles mehr.
• Flying Scripts – Ermöglicht Ihnen, die Ausführung von unkritischem JavaScript so lange zu verzögern, bis keine Benutzeraktivität mehr erfolgt.
• Plugin Organizer – Ändern Sie die Reihenfolge, in der Plugins auf Ihrer Website geladen werden, und schalten Sie sie gezielt auf ausgewählten Seiten oder Inhaltstypen aus.
• Autoptimize – Kann CSS- und JS-Dateien automatisch kombinieren und verkleinern sowie async und defer zu Skripten hinzufügen. Es ist auch super einfach zu bedienen.
• WP Rocket – Ein kostenpflichtiges Caching-Plugin, das vieles von dem kann, worüber wir oben gesprochen haben. Im Allgemeinen bieten die meisten Caching-Plugins ähnliche Funktionen.

Abschließende Gedanken: Erste Eingabeverzögerung in WordPress

FID ist eine der Metriken, die das Triumvirat der Core Web Vitals bilden, und misst die Interaktivität von Webseiten. Da niemand träge Web-Erlebnisse mag, ist dies ein wichtiger Teil der Benutzererfahrung. Indem sie sich auf die Verbesserung der First Input Delay konzentrieren, können Websitebesitzer und Entwickler eine reaktionsschnellere Benutzererfahrung bieten und letztendlich die Benutzerzufriedenheit und das Engagement verbessern.

Oben haben wir erläutert, wie Sie FID auf Ihrer WordPress-Website messen, testen und verbessern können. Auch wenn die Optimierung von JavaScript für weniger technisch versierte Benutzer möglicherweise etwas unerreichbar erscheint, können Sie dennoch viel tun, um die Gesamtleistung Ihrer Website, einschließlich FID, zu verbessern. Hoffentlich fühlen Sie sich inzwischen dazu in der Lage.

Haben Sie weitere Tipps zur Verbesserung der First Input Delay auf WordPress-Websites? Teilen Sie unten Ihre Gedanken und Empfehlungen mit!