Was ist die erste Eingangsverzögerung (FID)? So reduzieren Sie es in WordPress

Es gibt einen Namen für diesen unangenehmen Moment, wenn Sie zum ersten Mal versuchen, mit einer Seite zu interagieren, und es eine Weile dauert, bis sie reagiert. Das nennt sich First Input Delay (FID) und ist eine Metrik, die Ihnen eine Vorstellung davon gibt, wie gut die Benutzererfahrung (UX) einer Website ist.

Ein niedriger FID sagt Ihnen, dass eine Website richtig optimiert ist. Das bedeutet, dass die Browser Ihrer Besucher beim Laden von Elementen und Skripten nicht hängen bleiben, selbst wenn es so aussieht, als wäre eine Seite fertig gerendert. Wenn Sie Ihren FID-Score so niedrig wie möglich halten können, werden die Besuche der Benutzer viel angenehmer.

In diesem Artikel werden wir darüber sprechen, was First Input Delay bedeutet und warum es eine so wichtige Metrik ist. Dann gehen wir auf vier Möglichkeiten ein, um FID-Scores in WordPress zu reduzieren. Lasst uns anfangen!

Inhaltsverzeichnis:

• Was ist die erste Eingangsverzögerung?
• So messen Sie die erste Eingabeverzögerung für Ihre Website
• Möglichkeiten zur Reduzierung der First Input Delay-Werte in WordPress

Was First Input Delay ist (und warum es eine wichtige Metrik ist)

Jedes Mal, wenn Sie eine Website besuchen, passiert viel im Hintergrund. Bevor Sie eine Seite sehen können, muss Ihr Browser seinen Server abfragen, Anfragen senden und verarbeiten, Elemente laden und so weiter. Bei einer modernen Website kann Ihr Browser Dutzende von Anforderungen erfüllen, bevor Sie eine vollständig gerenderte Seite sehen, mit der Sie interagieren können.

In manchen Fällen kommt es vor, dass eine Seite fertig aussieht , Ihr Browser jedoch noch Anfragen verarbeitet und Skripte im Hintergrund lädt. Wenn Sie versuchen, mit dieser Seite zu interagieren, stellen Sie möglicherweise fest, dass zwischen dem Ausführen einer Aktion und dem Empfangen einer Antwort eine leichte Verzögerung besteht.

Wenn Sie beispielsweise auf einen Link klicken, verarbeitet Ihr Browser die Anfrage möglicherweise nicht sofort. Wenn Sie eine Taste drücken, tut dies möglicherweise auf den ersten Blick nichts. Das kann im Grunde bei jedem interaktiven Element auf Ihrer Website passieren, und es ist Ihr Ziel, diese Verzögerung bei der ersten Eingabe so weit wie möglich zu reduzieren.

Idealerweise sollte die First Input Delay Ihrer Website unter 100 Millisekunden liegen. Das ist der Standard, den Google für Websites als akzeptabel erachtet:

Wir erwähnen Google ausdrücklich, weil FID eine der drei Metriken ist, die verwendet werden, um positive oder negative Benutzererfahrungen auf einer Website zu messen. Diese drei Metriken werden als Core Web Vitals bezeichnet und beinhalten auch die folgenden zwei Metriken:

1. Largest Contentful Paint (LCP): Diese Metrik misst, wie lange es dauert, bis das größte Element auf einer Seite geladen ist.
2. Cumulative Layout Shift (CLS): Dies misst, wie stark sich eine Seite beim Laden visuell „verschiebt“. Wenn sich Elemente beim Laden zu stark bewegen, haben Sie einen schlechten CLS-Score. Wir haben eine Anleitung zur Behebung der kumulativen Layoutverschiebung für WordPress.

Es gibt zwei Hauptgründe, warum Core Web Vitals so wichtig sind. Erstens liefern sie ein Maß dafür, wie gut Ihre Website optimiert ist. Wenn Ihre Website hervorragende Ergebnisse erzielt, bedeutet dies, dass sie schnell geladen wird, optisch stabil ist und Benutzer nicht zu lange warten müssen, um mit ihr zu interagieren.

Der zweite Grund, warum Core Web Vitals so wichtig sind, ist, dass sie die Suchmaschinenoptimierung (SEO) Ihrer Website beeinflussen. Google verwendet diese Metriken als kleines Signal bei der Ermittlung von Rankings. Tatsächlich hat der Suchmaschinengigant deutlich gemacht, dass Core Web Vitals wichtig sind, wenn es um SEO geht, wenn auch nicht im gleichen Maße wie Inhalt und Backlinks.

So messen Sie die erste Eingabeverzögerung für Ihre Website

Die Verzögerung bei der ersten Eingabe kann schwierig zu messen sein, da Sie Daten basierend auf den tatsächlichen Besuchern Ihrer Website sammeln müssen, im Gegensatz zu anderen Leistungsmetriken, bei denen Sie nur simulierte Tests mit einem Computer durchführen können.

Der einfachste Weg, die Verzögerung der ersten Eingabe für Ihre Website zu messen, ist die Verwendung von PageSpeed ​​Insights. PageSpeed ​​Insights zeigt jedoch nur die Verzögerungszeiten bei der ersten Eingabe an, wenn Ihre Website über genügend Traffic verfügt, um in den Bericht zur Chrome-Benutzererfahrung aufgenommen zu werden.

Lassen Sie uns zuerst darüber sprechen, wie PageSpeed ​​Insights funktioniert, und dann werden wir einige Alternativen vorstellen, die Sie ausprobieren können, wenn PageSpeed ​​Insights keine Metriken zur Verzögerung der ersten Eingabe für Ihre Website anbietet:

Um PageSpeed ​​Insights zu verwenden, geben Sie die URL für die Seite ein, die Sie testen möchten. PageSpeed ​​Insights braucht einen Moment, um es zu analysieren, und gibt dann einen Bericht zurück, der so aussieht:

Insgesamt hat diese Website nicht die besten Core Web Vital-Ergebnisse. Sie können jedoch sehen, dass es sehr gut abschneidet, wenn es um die Metrik der ersten Eingangsverzögerung geht, mit einer durchschnittlichen Zeit unter 100 ms.

Wie oben erwähnt, sehen jedoch nicht alle Websites diese Metrik. Wenn Sie eine Website mit weniger Traffic haben, sehen Sie möglicherweise Folgendes:

In dieser Situation haben Sie zwei Möglichkeiten:

1. Ganz einfach : Sie können die Metrik „ Total Blocking Time “ aus dem Abschnitt „ Lab Data “ als groben Anhaltspunkt für Ihre First Input Delay Time verwenden. Es ist keine perfekte Darstellung, aber die Metrik Total Blocking Time ist der First Input Delay sehr ähnlich. Wenn Sie Ihre Gesamtsperrzeit verbessern, werden Sie im Allgemeinen auch ähnliche Verbesserungen bei Ihrer Verzögerungszeit für die erste Eingabe feststellen.
2. Erweitert : Sie können ein echtes Tool zur Überwachung der Benutzerleistung wie Request Metrics verwenden. Bei diesen Tools müssen Sie Ihrer Website ein Tracking-Skript hinzufügen, um echte Benutzerdaten zu sammeln.

Unten sehen Sie, wo Sie die Metrik Gesamtblockierungszeit in PageSpeed ​​Insights finden:

Nachdem Sie nun wissen, wie Sie FID und andere Core Web Vitals messen, lassen Sie uns darüber sprechen, wie Sie sie verbessern können.

Möglichkeiten zur Reduzierung der First Input Delay-Werte in WordPress

In diesem Abschnitt konzentrieren wir uns auf WordPress-Optimierungen, die Ihre First Input Delay-Ergebnisse verbessern. Einige dieser Optimierungen werden sich auch positiv auf andere Core Web Vitals auswirken, was sie umso nützlicher macht.

1. Entfernen Sie unnötige Skripte von Ihrer Website

Einer der Hauptgründe, warum das Laden Ihrer WordPress-Website möglicherweise zu lange dauert, ist, dass sie eine große Liste von Skripten ausführen muss. Mit Skripten meinen wir neben anderen möglichen Optionen JavaScript und CSS. Wenn Sie ein „komplexes“ WordPress-Theme oder eine breite Palette von Plugins verwenden, besteht die Möglichkeit, dass Sie möglicherweise ein paar zu viele Skripte im Hintergrund ausführen.

Herauszufinden, welche Skripte nützlich sind und welche nicht, kann eine Herausforderung sein, aber hier kommt PageSpeed ​​Insights ins Spiel. Wenn Sie einen Test für eine der Seiten Ihrer Website durchführen, enthält der PageSpeed ​​Insights-Bericht auch einen Abschnitt „Werbechancen“:

In diesem Abschnitt wird darauf hingewiesen, welche JavaScript- und CSS-Dateien Ihre Website nicht verwendet. Das Entfernen dieser Skripte sollte Ihre FID-Werte entsprechend verringern.

In vielen Fällen stammen diese Skripte von Plugins. Das bedeutet, dass Sie sich Ihre Plugin-Liste genau ansehen und herausfinden müssen, welche Tools Sie nicht wirklich benötigen. Das Culling Ihrer Plugins ist eine großartige Möglichkeit, das Laden Ihrer Website so schnell wie möglich zu halten.

2. Unkritischen Code während des Ladens zurückstellen

Es ist üblich, auf bestimmte Skripts oder Codes zu stoßen, deren Laden zu lange dauert. Das Problem ist, dass Ihr Browser in einigen Fällen nicht in der Lage sein wird, den Rest der Elemente einer Seite zu laden, bis er diese Skripte bearbeitet hat.

Wenn diese Skripte nicht „kritisch“ sind, können Sie Ihren Browser einfach anweisen, sie bis zum Schluss zu verschieben, damit sie die Dinge nicht für alle anderen verlangsamen. Das nennen wir „Zurückstellen von nicht kritischem Code“.

Ihre erste Anlaufstelle, wenn Sie herausfinden möchten, welche Skripte Sie zurückstellen können, sollte PageSpeed ​​Insights sein. Sobald Sie einen Bericht für eine Seite erstellt haben, enthält PageSpeed ​​Insights Empfehlungen zur Verbesserung der Punktzahlen.

Unter diesen Empfehlungen finden Sie eine Option mit der Aufschrift Renderblockierende Ressourcen beseitigen . Wenn Sie darauf klicken, wird Ihnen eine Liste von Skripten angezeigt, die Sie zurückstellen können:

Es gibt zwei Möglichkeiten, mit Render-Blocking-Skripten in WordPress umzugehen. Die erste Methode beinhaltet die Verwendung von async . Dadurch können Browser Ihre Website weiter laden, während sie das von Ihnen angegebene Skript parsen. Alternativ können Sie den Code zurückstellen , damit er geladen wird, nachdem der Browser den Rest des HTML-Dokuments gerendert hat.

Um dies in WordPress einzurichten, können Sie das kostenlose Async-JavaScript-Plugin verwenden. Oder viele WordPress-Leistungs-Plugins enthalten Funktionen zum Zurückstellen von Code. Wenn Sie bereit sind, für ein Premium-Plugin zu bezahlen, verfügt WP Rocket über Funktionen zum automatischen Zurückstellen von unkritischem CSS und JavaScript.

3. Verwenden Sie CSS- und JavaScript-Minifizierungstools

Obwohl wir alle dafür sind, ungenutztes CSS und JavaScript zu entfernen, gibt es einige Skripts, die Sie nicht entfernen möchten. Zum Beispiel möchten Sie das CSS-Stylesheet einer Seite nicht abschaffen, es sei denn, Sie möchten eine Website, die sich anfühlt, als wäre sie aus dem letzten Jahrhundert gerissen worden.

Für die Skripte, die Sie nicht entfernen können, ist es am besten, sie zu minimieren. Das bedeutet, Leerzeichen und unnötige Zeichen aus dem Code zu entfernen, um die Größe jedes Skripts zu reduzieren. Es gibt mehrere Tools, die Skripte in WordPress automatisch für Sie minimieren, wie z. B. Autoptimize und Fast Velocity Minify:

Im Allgemeinen enthalten die meisten WordPress-Optimierungs- und Caching-Plugins auch Skript-Minifizierungstools. Einige von ihnen erfordern jedoch viel Konfigurationsarbeit, daher empfehlen wir, bei Optionen wie Autoptimize zu bleiben, wenn es um die Minimierung geht.

4. Verwenden Sie ein Content Delivery Network (CDN)

Die Verwendung eines CDN ist eine großartige Möglichkeit, die Leistung Ihrer Website zu steigern. Mit einem CDN erhalten Sie Zugriff auf ein Netzwerk von Rechenzentren auf der ganzen Welt, die den Inhalt Ihrer Website zwischenspeichern können. Wenn ein Besucher versucht, auf Ihre Website zuzugreifen, verarbeitet das CDN diese Anfrage und stellt eine zwischengespeicherte Version davon bereit.

In den meisten Fällen verbessert die Verwendung eines CDN die Ladezeiten und FID-Werte Ihrer Website. Die Integration von WordPress in ein CDN ist einfach und die größte Herausforderung besteht wahrscheinlich darin, zu entscheiden, welcher Dienst verwendet werden soll.

Wenn Sie nach kostenlosen CDN-Optionen suchen, empfehlen wir Ihnen, sich für eine der folgenden Optionen zu entscheiden:

1. Cloudflare: Dies ist eines der beliebtesten CDNs auf dem Markt. Es ist einfach in WordPress zu integrieren und bietet einen kostenlosen Plan.
2. Jetpack: Das Jetpack-Plugin bietet eine Funktion namens Site Accelerator , die die WordPress.com-Server verwendet, um statische Elemente Ihrer Website zwischenzuspeichern. Obwohl Jetpack ein WordPress.com-Konto erfordert, können Sie es auch auf selbst gehosteten WordPress-Sites verwenden.

Für die beste Leistung sollten Sie jedoch ein Premium-CDN wie KeyCDN, StackPath oder Bunny CDN in Betracht ziehen.

Reduzieren Sie noch heute die Verzögerung bei der ersten Eingabe Ihrer Website

Etwas so Abstraktes zu messen kann kompliziert sein, weshalb sich jeder Kernvital auf eine bestimmte Situation konzentriert, die sich negativ auf die Erfahrungen der Besucher auswirken kann. Alle Core Web Vitals sind essenziell, aber gerade FID kann bei zu hoher Verzögerung zu viel Frust führen.

Wenn Sie nach Möglichkeiten suchen, Ihren FID-Score in WordPress zu verbessern, müssen Sie Folgendes tun:

1. Entfernen Sie unnötige Skripte von Ihrer Website.
2. Unkritisches CSS und JavaScript beim Laden zurückstellen.
3. Verwenden Sie CSS- und JavaScript-Minimierungstools wie Autoptimize und Fast Velocity Minify.
4. Verwenden Sie ein CDN wie Cloudflare oder Jetpack.

Haben Sie Fragen dazu, wie Sie FID-Scores in WordPress reduzieren können? Lassen Sie uns im Kommentarbereich unten darüber sprechen!