Die Verzögerung der ersten Eingabe ist eine wichtige Kennzahl zum Verfolgen und Verbessern Ihrer Webseite.
Für den Erfolg Ihrer Website ist es entscheidend, den Besuchern Ihrer Website eine schnelle Benutzererfahrung zu bieten. Aber woher wissen Sie, ob Ihre Website die richtige Geschwindigkeit erreicht?
Hier kommt First Input Delay (FID) ins Spiel.
In diesem Beitrag erklären wir, was FID ist, wie man es misst und was ein guter FID-Score ist. Wir zeigen Ihnen auch einige Möglichkeiten, wie Sie Ihren FID für bessere Ergebnisse optimieren können.
Lassen Sie uns eintauchen.
Was ist First Input Delay (FID)?
First Input Delay (FID) ist eine Kennzahl für Web-Performance und Benutzerfreundlichkeit, die die Zeit von der ersten Interaktion eines Besuchers mit einer Webseite bis zu dem Zeitpunkt misst, an dem der Browser mit der Verarbeitung der Interaktion beginnt. Dies wird manchmal als Eingabelatenz bezeichnet.
Die erste Eingabeverzögerung misst die Zeitdauer in Millisekunden (ms).
Einfacher ausgedrückt ist FID die Verzögerung zwischen der Benutzerinteraktion (z. B. wenn Sie auf etwas wie einen Link oder eine Schaltfläche klicken oder tippen) und dem Zeitpunkt, an dem der Browser auf Ihre Aktion reagiert und mit der Verarbeitung beginnt.
Stellen Sie es sich so vor, als würden Sie die Zeit messen, von dem Moment an, in dem Sie bei jemandem klingeln, bis zu dem Moment, in dem er die Tür öffnet.
Wichtig zu wissen ist, dass FID von Google als Rankingfaktor verwendet wird. Es handelt sich um einen der Core Web Vitals , also die Kennzahlen, die Google verwendet, um die Qualität der Benutzerfreundlichkeit Ihrer Site und damit ihren PageRank zu bestimmen.
Darüber hinaus führen Verbesserungen der Site-Leistung und des Benutzererlebnisses im Allgemeinen zu höheren Conversion-Raten, mehr Verkäufen und höheren Werbeeinnahmen . Indem Sie sich um Ihr FID kümmern, können Sie das Gefühl der Frustration überwinden, das Benutzer möglicherweise verspüren, während Ihre Seite geladen wird.
Das macht First Input Delay zu einer der spannendsten Web-Performance-Metriken - es ist eine der reinen Echte Benutzermetriken, keine Labormetriken. Sie können nicht in einem Labortest simuliert werden – für die Messung sind echte Benutzereingaben erforderlich. FID misst die tatsächliche Erfahrung echter Benutzer, die Ihre Seite aufrufen.
Beim Messen von First Input Delays sind einige Dinge wichtig.
FID misst nur endliche Wechselwirkungen
Die Ereignisse, die als Benutzerinteraktionen gelten, müssen diskret oder endlich sein. Das bedeutet, dass es sich nur um etwas handeln kann, das einen klaren Anfangs- und Endpunkt hat, wie das Tippen auf eine Schaltfläche, das Klicken auf einen Link oder das Aktivieren eines Kontrollkästchens.
Kontinuierliche Arten der Benutzerinteraktion, wie das Scrollen oder Zoomen Ihrer Webseite, können mit dieser Metrik nicht richtig gemessen werden, da von der Site selbst keine Reaktion erwartet wird – und das Ziel der First Input Delay besteht darin, zu messen, wie reaktionsfähig eine Site während des Ladens ist.
Zusammenfassend lässt sich sagen, dass die Benutzereingaben Klicks und kein Scrollen umfassen.
FID misst nur die erste Benutzerinteraktion
Der erste Eindruck, den ein Benutzer von Ihrer Seite bekommt, ist sein erster Eindruck, und der erste Eindruck ist alles. Er bestimmt, wie er Ihre Web-Performance erlebt und wahrnimmt (und damit, ob er bleibt oder geht).
Die meisten Blockierungen des Haupt-Threads des Browsers erfolgen in diesen ersten Momenten des Lebenszyklus einer Seite, da zu dieser Zeit kritische Ressourcen geladen werden.
Durch Messen der Verzögerung bei der ersten Eingabe können Sie sicherstellen, dass diese kritischen Ressourcen schnell geladen werden und Ihre Website dadurch nicht klobig, langsam und reaktionsträge wird.
Die erste Eingabeverzögerung unterscheidet sich von der Zeit bis zur Interaktivität
Time to Interactive (TTI) ist eine weitere hilfreiche Kennzahl zur Web-Performance und kann mit First Input Delay verwechselt werden.
TTI misst die Zeit, die benötigt wird, bis eine Seite vollständig interaktiv ist, d. h. wenn auf der Seite bereits nützliche Inhalte gerendert sind, die Benutzerinteraktion innerhalb von 50 ms verarbeitet wird und Ereignishandler für die meisten Seitenelemente registriert sind.
First Input Delay ist nicht dasselbe. FID wird verwendet, um die Benutzereingaben zu verfolgen, die erfolgen, bevor die Seite vollständig interaktiv ist. Ein Benutzer kann also auf einen Link klicken, der angezeigt wird, bevor Ereignishandler für die meisten Seitenelemente registriert sind, und First Input Delay ermöglicht es Ihnen, diese frühen Interaktionen zu erfassen.
Die Ursache für die Verzögerung bei der ersten Eingabe
Einige verschiedene Faktoren können die Metrik „First Input Delay“ beeinflussen:
Umfangreiche JavaScript-Nutzlasten im Voraus
Große JavaScript-Pakete sind die Hauptursache für lange Verzögerungen bei der ersten Eingabe – sowohl bei der anfänglichen Nutzlast als auch bei der laufenden Ausführung.
Es kann lange dauern, bis der Browser diese Pakete analysiert und auswertet. Eingaben werden verzögert, weil sie warten müssen, bis die Seite alle referenzierten JavaScripts geladen hat. Mit anderen Worten: Wenn Sie viele Bilder oder Skripts haben, die in zufälliger Reihenfolge geladen werden, kann dies den gesamten Prozess verlangsamen und die Reaktion des Benutzers verzögern.
Große Pakete entstehen typischerweise durch übermäßige Abhängigkeiten von Drittanbietern oder durch die Einbindung von Code, der auf der aktuellen Seite nicht benötigt wird.
Die gute Nachricht ist, dass Sie die Größe und Komplexität der Webseiten steuern können, und insbesondere können Sie steuern, wie viel JavaScript Ihre Website verwendet.
Lang laufendes JavaScript
Auch nachdem das gesamte JavaScript geladen wurde, kommt es zu langen Verzögerungen bei der ersten Eingabe.
Warum? Weil jede lang andauernde Aufgabe in JavaScript im Hauptthread ausgeführt wird und Benutzereingaben blockiert werden, bis die Aufgabe abgeschlossen ist und der Hauptthread die Eingaben verarbeiten kann.
Dieses Problem wird durch schlecht optimierten Code verursacht.
Geschwindigkeit und Verarbeitungsleistung des Geräts des Benutzers
Dies kann Auswirkungen auf Ihr FID haben, aber Sie können das nicht kontrollieren.
Was ist ein guter FID-Score?
Denken Sie daran, dass FID in Millisekunden (ms) gemessen wird. Je weniger Punkte Sie also erzielen, desto besser. Sie möchten keine langen Eingabeverzögerungen.
Gemäß den FID-Schwellenwerten in PageSpeed Insights:
- FID von 100ms oder weniger ist gut
- FID zwischen 100-300 ms muss verbessert werden
- FID über 300 ms ist schlecht.
Laut einer Studie der NN Group ist 0,1 Sekunde ungefähr die Grenze, ab der der Benutzer das Gefühl hat, das System reagiere sofort. Versuchen Sie also, Ihren FID unter 100 ms zu halten.
In manchen Fällen liegt Ihr FID möglicherweise unter 100 ms und wird als „gut“ bewertet, aber die Seite reagiert möglicherweise trotzdem nicht. Das liegt daran, dass der Browser die mit der Benutzereingabe verknüpfte Aufgabe noch ausführen muss, und das wird nicht durch FID gemessen.
Wie messen Sie die erste Eingabeverzögerung auf Ihrer Seite?
Probieren Sie diese Tools aus, um Ihre erste Eingabeverzögerung zu messen:
Sie alle messen FID zusammen mit vielen anderen wichtigen Kennzahlen. Welche Sie auswählen, hängt also von den anderen Leistungskennzahlen ab, die Sie verfolgen möchten, und von Ihrer bevorzugten Messmethode.
Lassen Sie uns darüber sprechen, wie die Tools zur Messung von FID verwendet werden.
Bericht zur Chrome-Benutzererfahrung
Wenn Sie mit der Verwendung von JavaScript vertraut sind, können Sie auch mit dem Chrome User Experience Report (CrUX) experimentieren.
Der Chrome User Experience Report bietet Kennzahlen zur Benutzererfahrung, die Aufschluss darüber geben, wie echte Benutzer Ihre Website erleben.
Das öffentliche Google BigQuery-Projekt aggregiert Metriken zur Benutzererfahrung nach Herkunft, sofern sie den Webcrawlern von Google bekannt sind, und unterteilt sie in mehrere Dimensionen. Für den Zugriff auf BigQuery benötigen Sie ein Google-Konto und ein Google Cloud-Projekt. Google bietet eine Schritt-für-Schritt-Anleitung und eine praktische geführte Tour zum Abfragen des Projekts .
Alternativ kann das CrUX-Dashboard in Data Studio von Webentwicklern eingerichtet werden, um die Benutzererfahrungstrends einer Quelle zu verfolgen.
Gehen Sie zunächst zu g.co/chromeuxdash , wo Sie den Ursprung angeben können, für den das Dashboard generiert wird.
Auf dem Dashboard können Sie die monatliche Core Web Vitals-Leistung des Ursprungs einrichten. Core Web Vitals-Metriken sind die wichtigsten UX-Metriken, auf die Sie sich laut Google konzentrieren sollten, einschließlich der First Input Delay.
PageSpeed Einblicke
Eines der am einfachsten zu verwendenden Tools zum Durchführen eines Eingabeverzögerungstests ist PageSpeed Insights von Google.
Dies ist ein kostenloses Tool, das die Leistung Ihrer Site auf viele Arten testet und zeigt, wie Ihre Site bei einigen wichtigen Kennzahlen abschneidet, einschließlich der Verzögerung bei der ersten Eingabe.
Denken Sie daran, dass First Input Delay ein echtes Eingabeereignis erfordert. Aber solange Ihre Site kürzlich Benutzerinteraktionen hatte, sollten Sie Ihren Wert auf PageSpeed Insights finden können. Google bezeichnet diesen Wert als Felddaten, da er auf tatsächlicher Benutzerinteraktion und nicht auf Labortests basiert.
Geben Sie einfach die URL Ihrer Site in das Textfeld ein und klicken Sie auf Analysieren .
Sobald das Tool die Analyse Ihrer Seite abgeschlossen hat, werden Ihnen die Ergebnisse angezeigt. Ihre Site erhält eine Gesamtpunktzahl, Sie sollten sich jedoch auf den Abschnitt „Felddaten“ konzentrieren.
Dies zeigt, wie echte Benutzer Ihre Site erleben, und hier finden Sie die Metrik „First Input Delay“ (FID) .
Gehen Sie dann zu „Möglichkeiten“ , um Vorschläge zur Optimierung Ihrer Seite und Verbesserung Ihrer Punktzahl anzuzeigen.
Google Search Console
Sie können auch den Core Web Vitals-Bericht in der Google Search Console (GSC) verwenden, um FID zu messen.
Öffnen Sie GSC, gehen Sie zum Menü „Experience“ und klicken Sie dann auf „Core Web Vitals“.
Sie können die FID für Mobil- oder Desktopbenutzer messen – wählen Sie einfach aus den Berichten „Mobil“ oder „Desktop“ aus.
Der Bericht zeigt Ihnen alle Seiten mit ähnlichen Problemen.
FID optimieren
Nachdem Sie die First Input Delay (die erste Eingabeverzögerung) Ihrer Site gemessen haben, wie können Sie sie optimieren?
Schauen Sie sich die folgenden Taktiken an. Viele dieser Optimierungen bedeuten, dass Sie den JS-Code manuell optimieren müssen, was in den meisten Fällen einen erfahrenen Webentwickler erfordert. Aber die Leistungssteigerungen sind es wert und Ihr Benutzererlebnis wird deutlich verbessert.
Optimieren und minimieren Sie CSS- und JavaScript-Code
Beginnen Sie damit, Ihren CSS- und JavaScript-Code zu komprimieren und zu optimieren. Dadurch werden unnötige Zeichen, Leerzeichen und Zeilenumbrüche entfernt, sodass die Dateigröße kleiner wird. Dies wiederum reduziert die Anzahl der Prozesse, die ein Browser verarbeiten muss, was die Reaktionsfähigkeit und Seitengeschwindigkeit verbessert.
Das Ergebnis? Eine geringere erste Eingangsverzögerung.
Eine schnelle und einfache Möglichkeit, Ihren Code zu minimieren, besteht darin, ein Onlinetool wie „Minify Code“ zu verwenden oder sich von Ihrem Webentwickler helfen zu lassen.
Teilen Sie lange JavaScript-Aufgaben auf
Das Problem bei langen Javascript-Aufgaben besteht darin, dass sie den Hauptthread blockieren können, sodass dieser keine Benutzereingaben verarbeiten kann und somit die Reaktionsfähigkeit Ihrer Site beeinträchtigt wird.
Die Lösung besteht darin, diese Aufgaben in kleinere aufzuteilen, sodass Benutzereingaben zwischen ihnen verarbeitet werden können. Versuchen Sie, Ihre Aufgaben unter 50 ms zu halten.
Der beste Weg hierfür ist die Codeaufteilung. Dabei werden kleinere und notwendige Codeteile auf einmal aufgebrochen und geladen, anstatt eine große Datei zusammen zu laden. Tools wie Webpack ermöglichen Ihnen dies.
Reduzieren Sie die Auswirkungen von Drittanbietercode und nicht kritischen Skripten
Zu viele Drittanbieter-Skripte, wie etwa Tags und Analysen, können die Ausführung der eigenen Daten Ihrer Site verzögern.
Um Ihren First Input Delay-Score zu optimieren, reduzieren Sie die Auswirkungen von Drittanbietercode, entfernen Sie alle nicht kritischen Drittanbieterskripte und verschieben Sie diejenigen, die Sie nicht entfernen können.
Wie entscheiden Sie, welche Skripte am wichtigsten sind?
Überlegen Sie, welche Skripte für die UX Ihrer Site eine wichtige Rolle spielen. Laden Sie zuerst die Skripte, die den größten Nutzen für die Benutzer bieten.
Beginnen Sie damit, nicht benötigte Anzeigen oder Popups zu entfernen oder zu verzögern. Empfehlungen finden Sie auch im Abschnitt „Chancen“ Ihres PageSpeed Insights-Berichts. Dort werden bestimmte Dateien und Aufgaben aufgelistet, die Ihren Hauptthread blockieren könnten.
Verwenden Sie „async“ oder „defer“ , damit JavaScript nur bei Bedarf ausgeführt wird.
Leerlauf verwenden, bis es dringend ist
„Idle Until Urgent“ wurde von Philip Walton von Google entwickelt und bietet eine intelligente Möglichkeit, Ihren Code auszuwerten, sodass die Eingabeverzögerung minimal ist.
Die Strategie kombiniert zwei beliebte Ansätze zur Code-Auswertung:
- Schnelle Auswertung: Ihr gesamter Code wird sofort ausgeführt. Das Ergebnis ist eine Seite, deren Ladezeit lange dauert, bis sie vollständig interaktiv ist und anschließend reibungslos läuft.
- Lazy Evaluation: Ihr Code wird nur bei Bedarf ausgeführt.
Mit Idle Until Urgent können Sie Code während völliger Leerlaufzeiten ausführen, um den Hauptthread so weit wie möglich zu nutzen. Es garantiert aber auch, dass dringend benötigter Code sofort ausgeführt wird.
Dies ist eine großartige Möglichkeit, Ihre erste Eingabeverzögerung zu verbessern. Da die Codeausführung nur während Leerlaufzeiten erfolgt, minimieren Sie die Blockierungszeit des Hauptthreads.
Lesen Sie diesen Artikel von Philip Walton, um mehr über diesen Ansatz zu erfahren.
Verwenden von Web-Workern
Mit Web Workern können Sie Skripte im Hintergrund ausführen, ohne den Hauptthread zu beeinträchtigen.
Für Webentwickler ist es eine gute Praxis, Nicht-UI-Vorgänge in einen Hintergrund-Thread zu verschieben.
Abschluss
Ein positiver erster Eindruck ist für die Besucher Ihrer Website von großer Bedeutung und Sie haben nur eine Chance, ihn richtig zu machen. Wenn Sie etwas Zeit und Mühe in die Messung der First Input Delay (FED) Ihrer Website investieren und Ihren Wert optimieren, können Sie Ihr Benutzererlebnis auf lange Sicht verbessern.
Wenn Ihr monatlicher Werbeumsatz mehr als 2.000 US-Dollar beträgt, kontaktieren Sie uns noch heute, um mehr darüber zu erfahren, wie Publift Ihnen dabei helfen kann, Ihren Werbeumsatz zu steigern und den auf Ihrer Website oder App verfügbaren Werbeplatz optimal zu optimieren.