First Input Delay

Die erste Eingabeverzögerung (First Input Delay, FID) ist eine Kennzahl für das Nutzererlebnis, die Google als kleinen Rankingfaktor verwendet.

Bei der ersten Eingabeverzögerung geht es um mehr als nur darum, Google zu gefallen. Verbesserungen der Website-Performance führen in der Regel zu mehr Umsatz, Werbeeinnahmen und Leads.

Was ist die erste Eingabeverzögerung?

FID ist die Messung der Zeit, die ein Browser braucht, um auf die erste Interaktion eines Website-Besuchers mit der Website zu reagieren, während die Website geladen wird. Dies wird manchmal auch als Eingabe-Latenzzeit bezeichnet.

Eine Interaktion kann das Tippen auf eine Schaltfläche, einen Link oder einen Tastendruck und die anschließende Reaktion sein. Texteingabebereiche, Dropdowns und Kontrollkästchen sind andere Arten von Interaktionspunkten, die der FID misst.

Scrollen oder Zoomen zählen nicht als Interaktion, da von der Website selbst keine Reaktion erwartet wird.

Das Ziel des FID ist es, zu messen, wie reaktionsschnell eine Website ist, während sie geladen wird.

Die Ursache für First Input Delay

First Input Delay wird in der Regel durch Bilder und Skripte verursacht, die nicht ordnungsgemäß geladen werden.

Diese ungeordnete Kodierung führt dazu, dass der Webseiten-Download übermäßig lange pausiert, dann startet und dann wieder pausiert. Dies führt dazu, dass die Besucher der Website nicht mehr reagieren, wenn sie versuchen, mit der Webseite zu interagieren.

Es ist wie ein Stau, der durch ein Chaos verursacht wird, bei dem es keine Verkehrssignale gibt. Um das zu beheben, muss man den Verkehr wieder in Ordnung bringen.

Google beschreibt die Ursache der Eingabeverzögerung wie folgt:

“Im Allgemeinen entstehen Eingabeverzögerungen (auch bekannt als Eingabelatenz), weil der Hauptthread des Browsers mit etwas anderem beschäftigt ist und deshalb (noch) nicht auf den Nutzer reagieren kann.

Ein häufiger Grund dafür ist, dass der Browser mit dem Parsen und Ausführen einer großen JavaScript-Datei beschäftigt ist, die von deiner Anwendung geladen wurde.

Währenddessen kann er keine Event-Listener ausführen, weil das geladene JavaScript ihm sagen könnte, dass er etwas anderes tun soll.”

Da die Hauptursache für die Eingabeverzögerung das ungeordnete Herunterladen von Skripten und Bildern ist, kann man das Problem beheben, indem man Ordnung in die Skripte und Bilder bringt, die dem Browser zum Herunterladen präsentiert werden.

Die Lösung des FID-Problems besteht in der Regel darin, HTML-Attribute zu verwenden, um zu steuern, wie Skripte heruntergeladen werden, Bilder zu optimieren (den HTML-Code und die Bilder) und unnötige Skripte bewusst wegzulassen.

Das Ziel ist es, das Herunterladen zu optimieren, um das typische Pausieren und Starten des Herunterladens von unorganisierten Webseiten zu vermeiden.

Warum Browser unempfindlich werden

Browser sind Software, die Aufgaben erledigt, um eine Webseite anzuzeigen. Die Aufgaben bestehen aus dem Herunterladen von Code, Bildern, Schriftarten, Stilinformationen und Skripten und dem anschließenden Ausführen der Skripte und dem Aufbau der Webseite gemäß den HTML-Anweisungen.

Dieser Prozess wird Rendering genannt. Das Wort “rendern” bedeutet “machen”, und genau das tut ein Browser, indem er den Code und die Bilder zusammensetzt, um eine Webseite zu rendern.

Keine schlaflosen Nächte wegen Code von Drittanbietern

Wenn es um Core Web Vitals und insbesondere um First Input Delay geht, wirst du feststellen, dass es Code gibt, gegen den du nicht viel tun kannst. Das wird aber wahrscheinlich auch bei deinen Konkurrenten der Fall sein.

Wenn dein Unternehmen zum Beispiel von Google AdSense abhängig ist (ein großes Rendering-Blocking-Skript), wird das Problem bei deinem Konkurrenten dasselbe sein. Lösungen wie “Lazy Loading” mit dem Google Ad Manager können helfen.

In manchen Fällen reicht es aus, das Beste zu tun, was du kannst, weil deine Konkurrenten es vielleicht auch nicht besser machen.

In diesen Fällen ist es am besten, wenn du deine Gewinne mitnimmst, wo du sie finden kannst. Kümmere dich nicht um die Verluste, an denen du nichts ändern kannst.

Der Einfluss von JavaScript auf die Verzögerung der ersten Eingabe

JavaScript ist wie ein kleiner Motor, der Dinge in Bewegung setzt. Wenn ein Name in ein Formular eingegeben wird, kann JavaScript dafür sorgen, dass sowohl der Vor- als auch der Nachname eingegeben wird.

Wenn eine Schaltfläche gedrückt wird, kann JavaScript dem Browser sagen, dass er eine Dankesnachricht in einem Popup-Fenster ausgeben soll.

Das Problem mit JavaScript ist, dass es nicht nur heruntergeladen, sondern auch ausgeführt werden muss. Das sind also zwei Dinge, die zur Eingabe-Latenz beitragen.

Wenn sich eine große JavaScript-Datei ganz oben auf der Seite befindet, blockiert diese Datei den Rest der Seite darunter, bis das Skript heruntergeladen und ausgeführt wurde.

Das nennt man Blockieren der Seite.

Die offensichtliche Lösung besteht darin, diese Art von Skripten vom oberen Teil der Seite nach unten zu verschieben, damit sie nicht alle anderen Seitenelemente stören, die auf das Rendern warten.

Das kann aber ein Problem sein, wenn sie zum Beispiel am Ende einer sehr langen Webseite platziert werden.

Denn wenn die große Seite geladen ist und der Nutzer bereit ist, mit ihr zu interagieren, signalisiert der Browser immer noch, dass sie heruntergeladen wird (weil die große JavaScript-Datei am Ende zurückbleibt). Die Seite wird zwar schneller heruntergeladen, bleibt dann aber stehen, während sie auf die Ausführung der JavaScript-Datei wartet.

Dafür gibt es eine Lösung!

Defer- und Async-Attribute

Die HTML-Attribute Defer und Async sind wie Ampeln, die den Start und das Ende des Herunterladens und Ausführens von JavaScript steuern.

Ein HTML-Attribut ist etwas, das ein HTML-Element verändert, sozusagen eine Erweiterung des Zwecks oder Verhaltens des Elements.

Es ist so, wie wenn du eine Fähigkeit erlernst: Diese Fähigkeit wird zu einem Attribut deiner Person.

In diesem Fall sagen die Attribute Defer und Async dem Browser, dass er das Parsen von HTML während des Downloads nicht blockieren soll. Diese Attribute sagen dem Browser, dass er den Hauptthread weiterlaufen lassen soll, während das JavaScript heruntergeladen wird.

Async-Attribut

JavaScript-Dateien mit dem Async-Attribut werden heruntergeladen und dann ausgeführt, sobald sie heruntergeladen sind. Der Zeitpunkt, an dem die Ausführung beginnt, ist der Punkt, an dem die JavaScript-Datei den Hauptthread blockiert.

Normalerweise würde die Datei den Hauptthread blockieren, wenn sie mit dem Herunterladen beginnt. Aber nicht mit dem Attribut async (oder defer).

Dies wird als asynchroner Download bezeichnet, bei dem die Datei unabhängig vom Hauptthread und parallel zu diesem heruntergeladen wird.

Das async-Attribut ist nützlich für JavaScript-Dateien von Drittanbietern wie Werbung und Social Sharing – Dateien, bei denen die Reihenfolge der Ausführung keine Rolle spielt.

Attribut “defer”

JavaScript-Dateien mit dem Attribut “defer” werden ebenfalls asynchron heruntergeladen.

Die aufgeschobene JavaScript-Datei wird jedoch erst ausgeführt, wenn die gesamte Seite heruntergeladen und gerendert wurde. Aufgeschobene Skripte werden außerdem in der Reihenfolge ausgeführt, in der sie sich auf einer Webseite befinden.

Skripte mit dem Attribut defer sind nützlich für JavaScript-Dateien, die davon abhängen, dass Seitenelemente geladen werden, und bei denen die Reihenfolge der Ausführung wichtig ist.

Im Allgemeinen solltest du das Attribut defer für Skripte verwenden, die für die Darstellung der Seite selbst nicht wichtig sind.

Die Eingabe-Latenz ist für alle Nutzer unterschiedlich

Es ist wichtig zu wissen, dass die Werte für die erste Eingabeverzögerung variabel und uneinheitlich sind. Die Werte variieren von Besucher zu Besucher.

Diese Schwankungen sind unvermeidlich, weil der Wert von den Interaktionen abhängt, die für den einzelnen Besucher einer Website typisch sind.

Manche Besucher sind abgelenkt und interagieren erst dann, wenn alle Assets geladen und bereit sind, mit ihnen zu interagieren.

Google beschreibt das folgendermaßen:

“Nicht alle Nutzer werden bei jedem Besuch mit deiner Website interagieren. Und nicht alle Interaktionen sind für die FID relevant…”.

Hinzu kommt, dass die ersten Interaktionen einiger Nutzer/innen zu schlechten Zeiten stattfinden (wenn der Haupt-Thread über einen längeren Zeitraum ausgelastet ist) und die ersten Interaktionen einiger Nutzer/innen zu guten Zeiten (wenn der Haupt-Thread komplett inaktiv ist).

Das bedeutet, dass einige Nutzer/innen keine FID-Werte haben werden, einige Nutzer/innen niedrige FID-Werte und einige Nutzer/innen wahrscheinlich hohe FID-Werte.”

Warum die meisten Websites an der FID scheitern

Leider wurden viele Content Management Systeme, Themes und Plugins nicht für diese relativ neue Kennzahl entwickelt.

Das ist der Grund, warum so viele Verlage entsetzt feststellen, dass ihre Websites den First Input Delay-Test nicht bestehen.

Aber das ändert sich jetzt, da die Entwickler von Web-Software auf die Forderungen der Verlagswelt nach anderen Kodierungsstandards reagieren.

Und es ist nicht so, dass die Softwareentwickler, die Content-Management-Systeme herstellen, schuld daran sind, dass ihre Produkte diesen Kriterien nicht genügen.

FID und der WordPress Gutenberg Editor

WordPress hat zum Beispiel eine Schwachstelle im Gutenberg-Website-Editor behoben, die dazu führte, dass das System schlechter abschnitt als es könnte.

Gutenberg ist eine visuelle Methode, um Websites mit Hilfe von Blöcken zu erstellen. Es gibt einen Widgets-Block, einen Kontaktformular-Block, einen Footer-Block usw.

Der Prozess der Webseitenerstellung ist also visueller und erfolgt durch die Metapher der Blöcke, die buchstäblich eine Seite mit verschiedenen Blöcken aufbauen.

Es gibt verschiedene Arten von Blöcken, die auf unterschiedliche Weise aussehen und sich unterschiedlich verhalten. Jeder einzelne Block hat einen entsprechenden Style-Code (CSS), der zum großen Teil spezifisch und einzigartig für den jeweiligen Block ist.

Die Standardmethode für die Codierung dieser Stile ist die Erstellung eines Stylesheets, das die Stile enthält, die für jeden Block einzigartig sind. Das ist sinnvoll, weil du so einen zentralen Ort hast, an dem der gesamte Code für die einzelnen Blöcke vorhanden ist.

Das hat zur Folge, dass WordPress auf einer Seite, die aus (sagen wir) zwanzig Blöcken besteht, die Stile für diese Blöcke plus alle anderen Blöcke, die nicht verwendet werden, lädt.

Vor Core Web Vitals (CWV) galt dies als Standardmethode, um CSS zu verpacken.

Seit der Einführung von Core Web Vitals gilt diese Praxis als Code-Aufblähung.

Das soll keine Beleidigung für die WordPress-Entwickler sein. Sie haben fantastische Arbeit geleistet.

Es ist nur ein Beispiel dafür, wie schnell sich ändernde Standards in der Softwareentwicklung zu einem Engpass führen können, bevor sie in das Code-Ökosystem integriert werden.

Das Gleiche haben wir beim Übergang zum Mobile-First-Webdesign erlebt.

Tipps um deinen First Input Delay bei WordPress zu verbessern

Um den FID in WordPress zu verbessern, gibt es einige Maßnahmen, die Sie ergreifen können:

1. Optimieren Sie Ihre Bilder: Verwenden Sie Tools wie TinyPNG oder Kraken.io, um die Größe Ihrer Bilder zu reduzieren, ohne die Qualität zu beeinträchtigen.
2. Verwenden Sie ein Content Delivery Network (CDN): Ein CDN ermöglicht es, Ihre Inhalte auf Servern auf der ganzen Welt zu verteilen, was dazu beiträgt, die Ladezeiten zu verkürzen.
3. Verwenden Sie ein Caching-Plugin: Caching-Plugins speichern eine Kopie Ihrer Seiten und Beiträge auf dem Browser des Benutzers, wodurch sie schneller geladen werden können.
4. Verwenden Sie Minimierungs-Tools: Minimieren Sie Ihre CSS- und JavaScript-Dateien, um die Größe dieser Dateien zu reduzieren und die Ladezeiten zu verbessern.
5. Verwenden Sie ein Lazy-Loading-Plugin: Lazy-Loading-Plugins laden Bilder erst dann, wenn sie auf dem Bildschirm des Benutzers sichtbar sind, anstatt alle Bilder auf einmal zu laden.
6. Deaktivieren Sie unnötige Plugins: Deaktivieren oder entfernen Sie unnötige Plugins, die nur die Ladezeiten verlangsamen.
7. Optimieren Sie Ihre Datenbank: Verwenden Sie Plugins wie WP-Optimize, um Ihre Datenbank zu bereinigen und zu optimieren.
8. Verwenden Sie ein schnelles und zuverlässiges Hosting: Ein schnelles und zuverlässiges Hosting kann dazu beitragen, die Ladezeiten zu verkürzen.

Es ist wichtig zu beachten, dass die Verbesserung des FID ein kontinuierlicher Prozess ist und dass es wichtig ist, regelmäßig die Leistung Ihrer Website zu überwachen und die oben genannten Schritte anzuwenden, um sicherzustellen, dass Ihre Website schnell und reaktionsschnell bleibt.

Welche Nachteile hat ei hoher First Input Delay?

Ein hoher First Input Delay (FID) hat verschiedene Nachteile, insbesondere im Hinblick auf das Nutzererlebnis und die SEO-Performance einer Website. Hier sind einige der Nachteile, die mit einem hohen FID verbunden sind:

1. Schlechtes Nutzererlebnis: Wenn der FID hoch ist, bedeutet das, dass die Nutzer länger warten müssen, bis ihre Interaktionen mit der Website verarbeitet werden. Das kann zu Frustration führen, insbesondere wenn Nutzer versuchen, auf Links zu klicken, Formulare auszufüllen oder andere Aktionen auf der Website auszuführen. Ein schlechtes Nutzererlebnis kann dazu führen, dass die Nutzer die Website verlassen und möglicherweise zu einer Konkurrenzseite wechseln.
2. Höhere Absprungraten: Ein hoher FID kann dazu führen, dass Nutzer die Geduld verlieren und die Seite verlassen, bevor sie vollständig geladen ist. Das führt zu höheren Absprungraten, was wiederum einen negativen Einfluss auf die SEO-Performance haben kann.
3. Negative SEO-Auswirkungen: Google berücksichtigt die Seitengeschwindigkeit und das Nutzererlebnis als Rankingfaktoren. Ein hoher FID kann daher dazu führen, dass deine Website in den Suchergebnissen schlechter abschneidet. Das bedeutet weniger Sichtbarkeit und letztendlich weniger Traffic auf deiner Seite.
4. Schlechte Conversion-Raten: Wenn Nutzer aufgrund eines hohen FID Schwierigkeiten haben, deine Website zu nutzen, kann das die Conversion-Raten negativ beeinflussen. Das bedeutet, dass weniger Nutzer tatsächlich Aktionen ausführen, die für dein Geschäft oder deine Website-Ziele wichtig sind, wie zum Beispiel den Kauf eines Produkts oder das Abonnieren eines Newsletters.

Ein Beispiel, um die Auswirkungen eines hohen FID zu veranschaulichen, wäre eine E-Commerce-Website: Stell dir vor, ein Nutzer möchte ein Produkt in den Warenkorb legen, aber die Schaltfläche reagiert nicht sofort auf den Klick. Der Nutzer könnte frustriert sein und den Kaufvorgang abbrechen, was zu Umsatzeinbußen führt.

Um den FID zu reduzieren und die oben genannten Nachteile zu vermeiden, sollte man darauf achten, den JavaScript-Code zu optimieren, unnötige Ressourcen zu entfernen und die Seitengeschwindigkeit insgesamt zu verbessern. Das sorgt für ein besseres Nutzererlebnis und kann die SEO-Performance deiner Website steigern.

Fazit zum First Input Delay

Den First Input Delay (FID) zu reduzieren ist entscheidend für den Erfolg deiner Website, da er das Nutzererlebnis und die SEO-Performance maßgeblich beeinflusst. Hier sind einige Gründe, warum es wichtig ist, den FID zu reduzieren, zusammen mit Veranschaulichungen und Beispielen:

1. Verbessertes Nutzererlebnis: Indem du den FID reduzierst, sorgst du dafür, dass deine Besucher schneller mit deiner Website interagieren können. Stell dir vor, du betrittst einen Laden und es dauert ewig, bis dir jemand hilft – das wäre ziemlich frustrierend, oder? Genauso fühlen sich Nutzer, wenn sie lange warten müssen, um auf deiner Website zu interagieren. Durch die Verbesserung des FID bieten dir eine schnellere und reibungslosere Erfahrung, was sie eher dazu verleitet, auf deiner Seite zu bleiben und sie wieder zu besuchen.
2. Geringere Absprungrate: Eine geringere Absprungrate ist für jede Website erstrebenswert, da sie ein Zeichen für ein positives Nutzererlebnis und relevante Inhalte ist. Wenn der FID niedrig ist, haben die Nutzer weniger Grund, frustriert die Seite zu verlassen, und die Absprungrate sinkt. Zum Beispiel, wenn du einen Blog betreibst und deine Leser können problemlos durch die Artikel navigieren, sind sie eher bereit, mehr Zeit auf deiner Website zu verbringen und mehr Inhalte zu konsumieren.
3. Bessere SEO-Rankings: Da Google die Seitengeschwindigkeit und das Nutzererlebnis als Rankingfaktoren berücksichtigt, kann ein niedriger FID dazu beitragen, dass deine Website in den Suchergebnissen besser abschneidet. Stell dir vor, du hast ein kleines Café, und viele Leute empfehlen es weiter, weil der Service schnell und freundlich ist – das würde sicherlich mehr Kunden anlocken. Genauso funktioniert es mit deiner Website: Eine bessere Performance führt zu höheren Rankings, mehr Sichtbarkeit und letztendlich mehr Traffic.
4. Höhere Conversion-Raten: Wenn Nutzer deine Website ohne Verzögerungen nutzen können, sind sie eher bereit, Aktionen auszuführen, die für dein Geschäft wichtig sind. Zum Beispiel, wenn du einen Online-Shop betreibst und der FID gering ist, können die Nutzer problemlos Produkte in den Warenkorb legen und den Kaufvorgang abschließen. Das führt zu höheren Conversion-Raten und mehr Umsatz.

Zusammenfassend lässt sich sagen, dass die Reduzierung des First Input Delay ein wichtiger Schritt ist, um das Nutzererlebnis zu verbessern, die SEO-Performance zu steigern und letztendlich den Erfolg deiner Website zu sichern. Indem du den FID optimierst, sorgst du dafür, dass deine Besucher zufrieden sind und deine Website immer wieder gerne besuchen.