Core Web Vitals: Interaction to Next Paint ersetzt First Input Delay

Marcel Sarman  Marcel Sarman in OnPage SEO am 16. Februar 2024

Am 12. März 2024 gibt es eine Änderung bei den Core Web Vitals: Interaction to Next Paint (INP) ersetzt dann First Input Delay (FID).

First Input Delay (FID)

First Input Delay (FID) misst die Zeit zwischen der ersten Interaktion des Users mit einer Website und dem Zeitpunkt ab dem der Hauptthread des Browsers mit der Verarbeitung dieses Ereignisses beginnt.

Interagiert ein User mit einer Website, wird das Ereignis (Senden eines Formulars, Kauf eines Produkts, Aufklappen eines Akkordeons) zu einer Warteschlange hinzugefügt, damit der Hauptthread des Browsers mit der Verarbeitung beginnt. Der Hauptthread ist jedoch oft noch anderweitig beschäftigt (HTML Parsing, Ausführung von JavaScript). Erst nachdem die anderen Ereignisse verarbeitet sind, beginnt der Browser mit der Ausführung der User-Interaktion. Diese Wartezeit entspricht dem FID-Wert.

First Input Delay
First Input Delay: Ein Benutzer drückt unmittelbar nach dem Aufruf der Seite einen Button. Die Verarbeitung des Klicks geschieht jedoch nicht sofort. Zunächst muss der Hauptthread des Browsers noch HTML bzw. JavaScript verarbeiten.

Interaction to Next Paint (INP)

Sie alle kennen sicher das Phänomen: Sie klicken auf einen Button und es ändert sich zunächst nichts. Sie sind unsicher, ob die Website Ihre Aktion gerade verarbeitet. Ihre Nutzerzufriedenheit sinkt. Genau hier setzt der neue Core Web Vitals Wert Interaction to Next Paint (INP) an.

Interaction to Next Paint (INP) besteht aus drei Teilen: Der Verzögerung bei der Eingabe (Input Delay) bzw. First Input Delay, der Verarbeitungsverzögerung (Processing Delay) und dem Presentational Delay, also der Zeit, die es dauert bis sich das Layout verändert hat bzw. der User Reaktionen auf seine Eingaben sieht. Der neue Wert Interaction to Next Paint umfasst also 3 Elemente. während der bisher gültige First Input Delay Wert nur einen Faktor enthielt.

Interaction to Next Paint
Input Delay Processing Delay Presentation Delay
Die laufenden Background Tasks verhindern, dass die Event Handler der Benutzereingabe starten. Die Event Handler (JavaScript) werden ausgeführt. Das neue Layout wird berechnet.

Vereinfacht ausgedrückt: Die Zeit bis Sie sehen, dass Sie einen Artikel in den Warenkorb gelegt oder eine Anfrage abgeschickt haben, nennen Fachleute Interaction to Next Paint.

Zu den durch INP erfassten Interaktionen zählen:

  1. Ein Mausklick .
  2. Das Drücken einer Taste auf der Tastatur.
  3. Tippen auf einem Touchscreen.

Hover-Effekte oder Scrolling zählen nicht zu den durch INP erfassten Werten. INP misst also beispielsweise nicht, wenn die untergeordneten Menüpunkte beim Flyout-Menü nicht zügig genug  erscheinen, sobald der User über einen übergeordneten Link hovert.

Beachten Sie: Interaction to Next Paint (INP) misst alle auf der Seite möglichen Aktionen und nimmt den höchsten Wert. Im Unterschied zu First Input Delay, wo nur die Verzögerung bei der ersten Interaktion gemessen wird.

Further, FID only measures the input delay portion of the first interaction, which is the amount of time the browser had to wait (due to main thread busyness) before even beginning to handle the interaction.
Rick Viscomi, DevRel Engineer at Google

Interaction to Next Paint

Unterschiede zwischen FID und INP

First Input Delay Interaction to Next Paint
Zeitraum für die Verarbeitung der ersten Nutzerinteraktion. Alle Reaktionszeiten des Browser auf Nutzereingaben. Der höchste (schlechteste) Wert ist maßgeblich.
FID = Input Delay der ersten Nutzeraktion INP = Input Delay + Verarbeitungszeit von Ereignissen + Dauer der Visualisierung

INP messen

PageSpeed Insights - INP Wert
Mit PageSpeed Insights messen Sie die Core Web Vitals und Ihren INP-Wert. Außerdem zeigt das Tool Ihnen Verbesserungsmöglichkeiten an. Oftmals bekommen Sie die Empfehlung, den Aufwand für den Hauptthread zu minimieren.

Hier zeigt PageSpeed Insights die Aufgaben, die eine schnelle Reaktion auf Usereingaben verhindern. Reduzieren Sie Ihren JavsaScript Code bzw. teilen Sie längere Skripte in mehrere Einzelteile auf.
Aufwand für den Hauptthread minimieren
Übermäßige DOM-Größe vermeiden bedeutet, dass Sie auf zu kompliziertes bzw. verschachteltes HTML verzichten sollten. Ansonsten dauert es zu lange, bis der User Veränderungen nach seinen Klicks sieht.
DOM INP
PageSpeed Insights gibt Ihnen noch zahlreiche weitere Tipps, um Ihre Core Web Vitals bzw. Ihren INP-Wert zu verbessern.

Der INP Debugger zeigt Ihnen anhand von Screenshots direkt die problematischen Seitenelemente an. Gehen Sie Schritt für Schritt die einzelnen Elemente durch und verändern Sie die kritischen Komponenten. Hier sehen Sie auch, dass INP sämtliche Nutzereingaben betrachtet und der höchste Wert maßgeblich ist. Das übersichtliche Tool sortiert die Ereignisse dabei nach Reaktionszeiten.

Bei Werten unter 200 Millisekunden besteht kein Handlungsbedarf. Liegt Ihr Wert über 500 Millisekunden sollten Sie schnellstmöglich Verbesserungen durchführen.

Werte für Interaction to Next Paint
bis 200 ms 200 bis 500 ms über 500 ms
gut Verbesserungsbedarf schlecht

INP verbessern

Identifizieren Sie zunächst die störende Elemente. Meist liefern die entsprechenden Tools bereits konkrete Verbesserungsvorschläge. Jede Website hat andere Probleme, die den INP-Wert nach oben treiben. Dennoch gibt es einige Punkte, die immer wieder auftauchen.

  1. Entlasten Sie den Hauptthread Ihres Browsers, indem Sie Skripte asynchron laden. Die Blockierung von Nutzereingaben wird somit aufgehoben und mehrere Skripte laufen parallel. Die User sehen Layoutveränderungen nach Klicks dann ohne sichtbare Verzögerung.
  2. Löschen Sie nicht benötigte Third Party Scripts wie Social Sharing Buttons, Analyseskripts, Werbung, Produktbewertungen oder Live-Chats. Diese Codes stammen von Drittanbietern und werden direkt auf der eigenen Website eingebunden. Oftmals verlängern sie die Ladezeit und blockieren so das Ausführen von anderen Skripten.
  3. Vereinfachen Sie Ihren HTML Code bzw. verzichten Sie auf überflüssiges JavaScript. Viele WordPress-Themes sind überdimensioniert und enthalten viel unnötigen Code, der im Hintergrund verarbeitet werden muss. Wählen Sie ein einfaches Theme oder lassen Sie sich ein individuelles und simples Theme entwickeln.
  4. Komprimieren Sie Ihren Code und Ihre Grafiken. Ersetzen Sie, falls möglich, JavaScript durch CSS.
  5. Greifen Sie auf Preloading und Prefetching zurück. Diese Techniken reduzieren die Ladezeiten von benötigten Ressourcen wie Grafiken, Stylesheets oder Skripten. Mit preload werden dringend benötigte Dateien sofort geladen, bei prefetch erfolgt das Laden erst, wenn der User zur betreffende Stelle scrollt. Bedenken Sie, dass Firefox kein preload unterstützt und Safari kein prefetch.
  6. Teilen Sie die Ereignisse im Hauptthread in kleine Schritte ein. Nach jedem Schritt ist dann die Verarbeitung einer Usereingabe möglich. Der Browser muss nicht warten, bis alle Ereignisse verarbeitet sind. Die setTimeout JavaScript-Funktion bewirkt die Ausführung einer Aufgabe nach einer kleinen Verzögerung. Der Einbau der Funktion verhindert die längere Blockade des Hauptthreads für andere Ereignisse. Benutzereingaben werden schneller verarbeitet.

setTimeout

Fazit

Nutzen Sie die vorhandenen Tools zur Kontrolle Ihres INP-Wertes. Reduzieren und vereinfachen Sie Ihre Skripte und bauen Sie auf einfachen Code bzw. schnell ladbare Inhalte. Teilen Sie Ihren Code in kleinere Abschnitte auf. Bedenken Sie, dass durch längere Reaktionszeiten die für Google wichtige Nutzerzufriedenheit sinkt.

Anzeige


Beitrag kommentieren

EINE ANTWORT HINTERLASSEN

Dein Kommentar wird vor der Freischaltung von einem Admin moderiert.



Marcel Sarman

Über Marcel Sarman

IT-Abteilung

Marcel Sarman betreut die ABAKUS Website und entwickelt sie weiter. Er ist unser Experte für HTML5, CSS3 und WordPress und schreibt Beiträge für unsere Seite.
Alle Artikel von:

Verwandte Beiträge

Core Web Vitals: Interaction to Next Paint ersetzt First Input Delay

Am 12. März 2024 gibt es eine Änderung bei den Core Web Vitals: Interaction to Next Paint (INP) ersetzt dann First Input Delay (FID). First Input Delay (FID) Interaction to Next Paint (INP) Unterschiede zwischen FID und INP INP messen INP verbessern Fazit First Input Delay (FID) First Input Delay (FID) misst die Zeit zwischen

> WEITERLESEN …

 
Höhere Klickraten durch Sonderzeichen in den SERPs

Durch Sonderzeichen in der SERPs steigern Sie die Aufmerksamkeit für Ihr Suchergebnis und erhöhen die Klickrate. Fügen Sie die entsprechenden Zeichen in Ihren Titel oder in die Metadescription ein, um sich von Ihrer Konkurrenz abzuheben. Nutzen Sie unserer ABAKUS SERP Snippet Generator zur Überprüfung Ihrer SERPs und lesen Sie, falls nötig, dort auch die grundlegenden

> WEITERLESEN …

 
SEO Agentur ABAKUS Internet Marketing GmbH ist Premium Partner von CONTAO CMS
ABAKUS ist Premiumpartner bei Contao

ABAKUS Internet Marketing freut sich, die neue Premium Partnerschaft mit Contao CMS bekannt zu geben. In unserem aktuellen Leitfaden teilen wir  spannende Einblicke aus unserer Arbeit als SEO Agentur mit dem Open Source Content Management System. Profitieren Sie von unserem Know-How und lassen Sie Ihre Contao-Website von den ABAKUS SEO-Experten optimieren.   Lesen Sie mehr:

> WEITERLESEN …

 
So indexiert Google JavaScript Content

Mit JavaScript kommt Bewegung auf Ihre Website. Interaktive Anwendungen, Animationen, Diashows und Fotogalerien verbessern dabei das Look-and-feel. Beachten Sie: JavaScript zur Verbesserung der Bedienbarkeit oder des Aussehens ist aus SEO-Sicht unbedenklich, solange sich die Ladezeit nicht merklich erhöht. Größere Probleme treten nur auf, wenn Inhalte (Texte) ausgeblendet und/oder nur mit aktiviertem JavaScript sichtbar sind. Schließlich

> WEITERLESEN …

 

SEO Beratung

Kompetente SEO-Berater kümmern sich individuell um Ihre Seite und verbessern Ihre Suchmaschinenrankings. Persönliche Betreuung steht dabei für uns an erster Stelle.

SEO Berater
SEO Beraterin
SEO Berater

▶ SEO Beratung anfragen