Googles INP (Interaction to Next Paint) – verstehen & optimieren

INP steht für „Interaction to Next Paint“. Es handelt sich um einen Messwert, den Google im Rahmen der Core Web Vitals verwendet. Nach seiner experimentellen Einführung im Mai 2022 kündigte Google im Mai 2023 an, dass der Interaction to Next Paint ab März 2024 die Metrik FID (First Input Delay) in den Core Web Vitals ersetzen und ein fester Bestandteil werden wird. Damit wird der INP einen direkten Einfluss auf die Suchmaschinen-Rankings haben.

Die Core Web Vitals setzen sich dann aus CLS (Cumulative Layout Shift), LCP (Largest Contentful Paint) und INP zusammen.

Was genau ist INP und wo liegt der Unterschied zu FID?

Doch wie sieht INP als Metrik nun aus? Zum besseren Verständnis betrachten wir zuerst den Vorgänger, den First Input Delay.

Google definiert FID wie folgt:

Mit FID wird die Zeit von der ersten Interaktion eines Nutzers mit einer Seite (wenn er auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes JavaScript-Steuerelement verwendet) bis zu dem Zeitpunkt gemessen, an dem der Browser als Reaktion auf diese Interaktion mit der Verarbeitung von Event-Handlern beginnen kann.

Quelle: Google

Einfacher ausgedrückt: Vielleicht hast du die Erfahrung mit einer langsamen Webseite gemacht: Du klickst auf ein Element und erst nach einer Weile reagiert die Website.

Die Wartezeit nach der allerersten Interaktion (Klick, Tastatureingabe) wird als First Input Delay oder FID bezeichnet.

Da drängt sich nun die Frage auf: Warum denn nur nach der ersten Interaktion? Ich will doch auch bei späteren Klicken nicht ewig warten, bis etwas passiert.

Und genau da kommt der Interaction to Next Paint Messwert ins Spiel.  

INP, Interaction to Next Paint gibt die längste auftretende einzelne Wartezeit nach einer Interaktion während der gesamten Besuchsdauer einer Webseite an. 

Statt nur der ersten Interaktion werden alle Interaktionen berücksichtigt. Der längste gemessene Wert entspricht dem INP-Wert.

In der Praxis ist es allerdings so, dass längere Verzögerungen vor allem während des Ladens einer Webseite auftreten. Hauptursache für Verzögerungen ist, dass im Hintergrund noch größere JavaScript Dateien laden.

In der Praxis treten längere Verzögerungen meist beim Laden einer Webseite auf. Eine Hauptursache hierfür ist, dass im Hintergrund noch größere JavaScript-Dateien geladen werden.

Die Webseite mag bereits „fertig“ erscheinen, doch im Hintergrund laufen noch Prozesse. Daher ist es wahrscheinlich, dass schlechte INP-Werte insbesondere bei der ersten Interaktion auftreten.

Wie kann man INP messen?

Im Beitrag zu den Core Web Vitals betone ich, dass es bei der Messung dieser Metriken wichtig ist, zwischen „Laborwerten“ und echten Nutzerdaten zu unterscheiden.

Bei FID und INP gibt es jedoch ein Problem bei Labormessungen: Der gemessene Wert hängt stark vom Zeitpunkt der Nutzerinteraktion ab.

Ein ungeduldiger Nutzer könnte sofort mit der Seite interagieren, was zu schlechteren FID- und INP-Werten führen kann, außer bei extrem schnellen Webseiten.

Die Geduld des Nutzern lässt sich natürlich nicht als kontrollierte Laborbedingung steuern. 

Googles Page Speed Tool gibt daher die Werte für FID nur bei den echten Nutzerdaten aus (woher die kommen, erfährst du im Beitrag über die Core Web Vitals). Hier am Beispiel für die Webseite spiegel.de:

Für die Generierung des Sektion “Leistungsprobleme diagnostizieren” wird eine einzelne Anfrage an deine Webseite geschickt und der daraus resultierende Ladevorgang simuliert und ausgewertet. In den Ergebnisse sind weder FID noch INP aufgeführt:

Die Informationen werden üblicherweise genutzt, wenn es darum geht, die Ursachen für schlechte Werte der Core Web Vitals zu identifizieren und Maßnahmen abzuleiten.

Wie geht man also damit um, dass der Wert nicht direkt gemessen wird?

Die beste Lösung ist, einen Wert zu verwenden, der eng mit dem FID und der INP zusammenhängt: die Total Blocking Time.

Diese wird natürlich nur beim Laden der Seite gemessen, während der INP während der ganzen Nutzungsdauer aufgenommen wird.

Wie bereits erwähnt ist es jedoch sehr wahrscheinlich, dass die für den INP maßgebliche längste Wartezeit direkt bei der ersten Nutzerinteraktion auftritt.

Wie beeinflusst Interaction to Next Paint Rankings?

Wirklich auf dem Radar der meisten SEOs und Websitebetreiber sind derartige Messungen erst, seitdem Google diese mit dem Page Experience Update 2021 zu einem Rankingfaktor erhoben hat.

Tatsächlich hat das sogar dazu geführt, dass viele Webseitenbetreiber eine etwas übertriebene Obsession über die Messwerte entwickelt haben.

Der Zusammenhang mit Suchmaschinenrankings ist jedoch einfach: Sobald eine der Core Web Vitals Metriken als nicht bestanden gilt, hat dies einen negativen Effekt auf deine Rankings. 

Laut einer (mittlerweile etwas älteren) Studie von Sistrix fallen Rankings um 3,7% schlechter aus, sobald nur einer der Core Web Vitals nicht bestanden wird.

Die Devise sollte also beim INP heißen: Bestehen ist alles. Wenn man alle Core Web Vitals besteht, steht man bezüglich flüssiger Nutzererfahrung besser da als die meisten Webseiten.

Wer hier versucht, absolute Bestmarken zu setzen, kann sich schnell in enorm aufwendigen Details verrennen.

Wie kann man INP verbessern/ optimieren

Aber was genau ist zu tun, wenn FID und INP nicht bestanden werden? 

Wenn die beiden Metriken schlechte Werte zeigen, liegt das so gut wie immer an der Ausführung von JavaScript.

Das ist zuallererst mal ein Entwickler Thema. Doch nicht jeder hat den Luxus oder das Budget einen eigenen Entwickler darauf ansetzen zu können.

Daher liste ich hier einige generelle Maßnahmen für Entwickler sowie für Laien auf, die mit einer WordPress Webseite unterwegs sind.

Wenn du noch eine konkrete Frage dazu hast, schreib sie gerne in die Kommentare, dort gehe ich gerne darauf ein!

Als Dev/ Entwickler

• Aufteilung des Codes in geeignete Chunks
• Nur benötigte Module laden
• Third Party Scripte auf ein Minimum begrenzen (z.B. Werbung, externe Tools wie Hotjar, GA, HubSpot Analytics…)

Als Laie (am Beispiel WordPress)

• Plugins aussortieren
• auf Page Builder verzichten
• “leichte” Themes verwenden
• Optimierungstools wie Autoptimize verwenden
• Third Party Scripte auf ein Minimum begrenzen (z.B. Werbung, externe Tools wie Hotjar, GA, HubSpot Analytics…)