First Input Delay

« Back to Glossary Index

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.

Verbessere deine Inhalte mit der Keyword-Intent-Analyse

Mit der Keyword-Intent-Metrik von Semrush war es noch nie so einfach, deine Keywords schnell auf die richtige Zielgruppe und den richtigen Inhalt abzustimmen.

Die einzelnen Rendering-Aufgaben werden Threads genannt, kurz für “thread of execution”. Damit ist eine einzelne Handlungsabfolge gemeint (in diesem Fall die vielen einzelnen Aufgaben, die zum Rendern einer Webseite durchgeführt werden).

In einem Browser gibt es einen Thread, den sogenannten Haupt-Thread, der für die Erstellung (das Rendering) der Webseite verantwortlich ist, die ein Besucher der Website sieht.

Der Haupt-Thread kann als eine Autobahn dargestellt werden, auf der die Autos symbolisch für die Bilder und Skripte stehen, die heruntergeladen und ausgeführt werden, wenn eine Person eine Website besucht.

Mancher Code ist groß und langsam. Das führt dazu, dass die anderen Aufgaben anhalten und darauf warten, dass der große und langsame Code von der Autobahn herunterkommt (das Herunterladen und Ausführen beendet).

Ziel ist es, die Webseite so zu programmieren, dass optimiert wird, welcher Code zuerst heruntergeladen und wann er ausgeführt wird, damit die Webseite so schnell wie möglich heruntergeladen wird.

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.

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.

Gutenberg 10.1 Verbesserte Leistung

WordPress Gutenberg 10.1 führte eine verbesserte Methode zum Laden der Stile ein, indem nur die Stile geladen wurden, die benötigt wurden, und nicht die Blockstile, die nicht verwendet werden sollten.

Das ist ein großer Gewinn für WordPress, die Verlage, die sich auf WordPress verlassen, und natürlich für die Nutzer/innen, die mit WordPress erstellte Websites besuchen.

Zeit, die Verzögerung bei der ersten Eingabe zu beheben, ist jetzt

Wir können davon ausgehen, dass in Zukunft immer mehr Softwareentwickler, die für das CMS, Themes und Plugins verantwortlich sind, auf First Input Delay-freundliche Programmierpraktiken umsteigen werden.

Aber bis das passiert, liegt es an den Verlagen, Schritte zur Verbesserung der Eingabeverzögerung zu unternehmen. Sie zu verstehen, ist der erste Schritt.

« Back to Glossary Index

Mit Spitzenpositionen zum neuen Umsatzkanal.

Lass Google für Dich arbeiten, denn aus Besuchern werden Kunden.

Über den Autor

Dein kostenfreies Geschenk!

Das SEO Praxisbuch
2022

Du willst mehr Besucher und bessere Google Rankings?

Lad dir jetzt kostenlos das SEO Praxisbuch
“Die 7 SEO Sünden” herunter.