First Input Delay is an essential metric to track and improve on your web page.
Delivering a fast user experience to your website visitors is critical to your site’s success. But how do you know whether your site is achieving the right speeds?
Hier kommt First Input Delay (FID) ins Spiel.
In this post, we’ll explain what FID is, how to measure it and what a good FID score is. We'll also reveal some ways you can optimise your FID for better results.
Let's dive in.
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.
Think of it like measuring the time from when you ring someone’s doorbell to them answering the door.
Das important thing to know about FID is that Google uses it as a ranking factor. It’s one of the Core Web Vitals, which are the metrics Google uses to determine the quality of your site’s user experience and, in turn, its page rank.
More than that, improvements to site performance and user experience generally lead to increased conversions, sales, and ad revenue. By addressing your FID, you can overcome that feeling of frustration that users may experience while your page is loading.
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.
There are a few things that are matter when measuring First Input Delays.
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.
To summarise, user input includes clicks not scrolls.
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) is another helpful web performance metric and can be confused with First Input Delay.
TTI measures the time it takes for a page to be fully interactive, i.e. when there’s useful content already rendered on the page, user interaction is processed within 50ms and event handlers are registered for most page elements.
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
Heavy JavaScript bundles are the main cause of long first input delays - both initial payload and ongoing execution.
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.
The good news is you can control the size and complexity of the web pages, and more specifically, you can control how much JavaScript your website uses.
Lang laufendes JavaScript
Long first input delay times also occur even after all JavaScript has been loaded.
Why? Because any long running task in JavaScript runs on the main thread, and user inputs are blocked until the task finishes and the main thread is free to handle the input.
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?
Remember that FID is measured in milliseconds (ms) of time, so the less you score, the better. You don't want long input delays.
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 some cases, your FID might be under 100ms and scoring as "good" but the page may still feel unresponsive. That's because the browser still needs to run the task associated with the user input, and that's not measured by FID.
Wie messen Sie die erste Eingabeverzögerung auf Ihrer Seite?
Probieren Sie diese Tools aus, um Ihre erste Eingabeverzögerung zu messen:
They all measure FID along with lots of other key metrics. So the one you choose depends on the other performance metrics you want to track, and your preferred way of measuring.
Let's talk through how to use the tools to measure FID.
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.
The Chrome User Experience Report provides user experience metrics for how real-world users experience your website.
The ö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.
To get started, go to g.co/chromeuxdash where you can provide the origin for which the dashboard will be generated.
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
One of the easiest tools to use to do an input delay test is Google's PageSpeed Insights.
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.
Remember, First Input Delay requires a real input event. But so long as your site has recently had user interactivity, you should be able to find your score on PageSpeed Insights. Google denotes this score as field data because it's based on actual user interaction, not lab tests.
Geben Sie einfach die URL Ihrer Site in das Textfeld ein und klicken Sie auf Analysieren .
Once the tool has finished analysing your page, you will be shown the results. Your site gets an overall score, but it's the Field Data section that you want to focus on.
This shows how real users experience your site, and is where you will find the First Input Delay (FID) metric.
Gehen Sie dann zu „Möglichkeiten“ , um Vorschläge zur Optimierung Ihrer Seite und Verbesserung Ihrer Punktzahl anzuzeigen.
Google Search Console
You can also use the Core Web Vitals report in Google Search Console (GSC) to measure FID.
Ö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?
Take a look at the below tactics. A lot of these optimisations mean you need to optimise JS code manually, which requires a skilled web developers in most cases. But the performance gains are well worthwhile and your user experience will be much improved.
Optimieren und minimieren Sie CSS- und JavaScript-Code
Start by compressing and optimising your CSS and JavaScript code. This takes out unnecessary characters, spaces and line breaks, so you have a smaller file size. In turn, this reduces the number of processes a browser has to handle, which increases responsiveness and page speed.
Das Ergebnis? Eine geringere erste Eingangsverzögerung.
A quick and simple way to minify your code is to use an online tool like Minify Code or get your web developer to help.
Break up long JavaScript tasks
The problem with long Javascript tasks is they can block the main thread, not allowing it to process user input, and therefore compromising your site’s responsiveness.
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.
The best way to this is with code splitting, which is where you break up and load smaller and necessary pieces of code at a time, rather than one large file all togeher. Tools like Webpack will let you do this.
Reduzieren Sie die Auswirkungen von Drittanbietercode und nicht kritischen Skripten
Too many third-party scripts, such as tags and analytics, can delay the execution of your site’s own data.
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.
Start by removing or delaying ads or pop-ups that aren’t necessary. Also, look under the Opportunities section of your PageSpeed Insights report for recommendations. It will list specific files and tasks that could be blocking your main thread.
Use async or defer for JavaScript to be executed only when it’s needed.
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: Your code is run only when needed.
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.
Read this article by Philip Walton for more on this approach.
Verwenden von Web-Workern
Web workers allow you to run scripts in the background without impacting the main thread.
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.