Die Metrik Interaction to Next Paint (INP): Umgang mit langsamen Interaktionen

Entwickler und Website-Betreiber aufgepasst. Falls Sie es noch nicht wissen: Google führt die neue Metrik Interaction to Next Paint (INP) ein. Diese soll im März 2024 die Metrik First Input Delay (FID) als eine der drei wichtigsten Core Web Vitals ersetzen.

Interaction to Next Paint ist strenger und reflektiert besser die Nutzererfahrung auf einer Website. Es handelt sich um eine Interaktivitätsmetrik, die die Geschwindigkeit der Reaktion auf Benutzeraktionen misst, nachdem die Seite geladen wurde und der Benutzer mit Komponenten wie Karussells, Akkordeons oder beim Hinzufügen von Artikeln zum Warenkorb interagiert.

Die Optimierung dieser Metrik kann mehrere Monate in Anspruch nehmen, daher ist jetzt der beste Zeitpunkt, sich damit zu befassen.

Was ist die Metrik INP?#

INP beantwortet die Frage: Wie schnell reagiert es?

Interaction to Next Paint misst die gesamte Reaktionszeit von Webseiten auf Benutzerinteraktionen, indem es die Verzögerung aller Ereignisse während des gesamten Besuchs auf der Seite überwacht.

Der empfohlene Wert, um die Metrik zu erfüllen, liegt bei 200 ms. Im Bereich von 200 bis 500 ms ist eine Verbesserung erforderlich, und ab 500 ms wird die Metrik als schlecht bewertet.

Metrik INP

Mit dieser Änderung versucht Google, die Mängel von FID zu beheben. Die Innovation besteht darin, dass INP alle Interaktionen (Tippen, Klicken, Tastendruck) auf der Website misst, die Sie als Benutzer während des Surfens durchführen.

Gleichzeitig misst es einen etwas längeren Abschnitt der Aktivitäten des Browsers. Es handelt sich um den Zeitraum von der Interaktion bis zur Neuzeichnung der Seite.

Metrik INP vs. FID

Ein direkter Vergleich von INP mit seinem Vorgänger FID kann beim Verständnis helfen:

First Input Delay	Interaction to Next Paint
erste Interaktion	alle Interaktionen auf der Seite
Zeit von der Interaktion zur Verarbeitung	Zeit von der Interaktion zur Neuzeichnung der Seite
Limit 100 ms	Limit 200 ms

Wenn es auf Ihrer Website also häufig vorkommt, dass Interaktionen nicht oder verspätet reagieren, liegt ein Problem mit der Metrik INP vor.

Die Hauptursache für hohe INP-Werte ist oft JavaScript und laufende lange Aufgaben (Long Tasks) (messbar durch die Metrik JS Long Tasks (JSLT)), die das Rendern des neuen Bildschirmzustands („Frame“) im Browser verhindern. Ein weiterer Schuldiger könnte langsames Datenladen nach einer AJAX-Anfrage sein. Auf ihre Optimierung werden wir im weiteren Verlauf des Artikels eingehen.

Schauen Sie sich die Aufzeichnung von Zuzkas Vortrag zur INP-Metrik vom FrontKon 2023 an:

Wie wird die Metrik INP berechnet?#

Nun ein paar interessante Details zur Berechnung der Metrik. INP wird basierend auf allen durchgeführten Interaktionen auf der Seite gemessen. Die Interaktion mit dem schlechtesten gemessenen Wert wird dann als Metrikwert gezählt. Scrollen und Hover zählen nicht als Interaktionen, aber die Reaktion auf Klicken oder Tastatureingaben schon.

Bei einer großen Anzahl von Interaktionen wird anders gerechnet: Für jeweils 50 Interaktionen auf der Seite wird ein Höchstwert ignoriert. Google versucht so, die Metrik zu präzisieren und den Einfluss zufälliger Verzögerungen bei Webanwendungen zu beseitigen, bei denen viel geklickt wird, wie etwa bei verschiedenen Spieloberflächen.

INP messen#

Wie bereits erklärt, ist die Quelle der Werte für die INP-Metrik der Chrome UX Report (CrUX). Dieser enthält sowohl Daten für die gesamte Domain als auch für einzelne URLs. Für eine bequemere Arbeit nutzen Sie ein verfügbares Tool, das mit CrUX-Daten arbeiten und diese anzeigen kann. Dazu gehören unser Website-Geschwindigkeitstest oder PageSpeed Insights von Google. Die Verteilung der INP-Werte auf der Domain zeigt ein Histogramm.

PageSpeed Insights zeigt Ihnen die aktuellen Core Web Vitals-Metriken sowohl für Mobilgeräte als auch für Desktops an. Sie können auch die Daten einer bestimmten URL-Adresse und der gesamten Domain einsehen. Die zweite Zeile in der Mitte interessiert uns dabei am meisten, da dies der Wert der INP-Metrik ist.

INP messen

Langfristige Entwicklungen und regelmäßige Änderungen auf der Website erfordern jedoch einen anderen Ansatz, den unser Website-Geschwindigkeitstest bietet. Die Metrikwerte können über einen längeren Zeitraum verfolgt werden.

INP-Metrik in unserem Tester

Ein sehr nützliches Tool zur Überwachung der Core Web Vitals ist auch die Google Search Console, in der Sie gemeldete URLs mit „fehlerhaften“ Metriken finden. So können potenziell problematische URLs recht einfach identifiziert werden.

Google Search Console

Falls Ihnen die Einschränkung auf Google Chrome-Nutzer zu begrenzt ist, können Sie immer noch Messungen mit RUM (Real User Monitoring) verwenden oder Ihre eigene Datenerfassung über JavaScript und das Performance Observer API schreiben.

Eine weitere Möglichkeit sind synthetische Messungen, die Sie mit Tools wie PageSpeed.ONE, Google Lighthouse, WebPageTest und ähnlichen durchführen können. Hier erhalten Sie jedoch nur Werte ähnlicher Metriken (wie JS Long Tasks), nicht aber INP selbst, da diese nur von Nutzern stammen kann.

Über die Unterschiede zwischen den Messungen schreiben wir auf einer separaten Seite: synth vs. CrUX vs. RUM.

Ich habe ein Problem mit INP, was jetzt?#

Sie haben die Daten aus dem CrUX-Bericht der Nutzer durchgesehen, in die Google Search Console geschaut und dort gemeldete Gruppen von URLs gefunden? Jetzt ist es an der Zeit, das Problem zu finden. Gehen Sie zu Testtools oder testen Sie im Browser (wie wir es tun) und identifizieren Sie konkrete problematische Stellen.

Für einen schnellen Überblick über die Interaktionen können Sie den INP Debugger verwenden. Es ist kein perfektes Tool, aber es kann helfen, „lange“ Interaktionen zu finden.

Debugbear-Tool

Der INP Debugger misst keine Interaktionen, die in versteckten Elementen eingebettet sind, und wir empfehlen, mehrere Tests durchzuführen, um zu sehen, wie sich die Seite verhält. Das Ergebnis ist eine Liste von Interaktionen, sortiert nach der gemessenen INP-Zeit.

Ein großer Helfer bei der Arbeit ist die Erweiterung für Chrome Core Web Vitals, die neben allem anderen alle Metriken in der Konsole ausgeben kann. Öffnen Sie also die DevTools, stellen Sie im Performance-Tab CPU: 6x slowdown und Network: Fast 3G ein, um die Geräteleistung zu verlangsamen.

Chrome Core Web Vitals-Erweiterung

Im letzten Schritt gehen Sie zur Registerkarte Console und aktivieren die Core Web Vitals-Erweiterung. Jetzt können Sie beginnen, einzelne Seiten zu testen. Versuchen Sie, alle möglichen Szenarien und interaktiven Elemente zu testen, der Wert der INP-Metrik wird in der Konsole ausgegeben.

Chrome Core Web Vitals - Konsolenausgabe

Um konkrete Interaktionen ausführlich zu analysieren, können Sie die Timeline-Aufzeichnung im Performance-Tab verwenden. Wenn Sie eine bestimmte Interaktion aufzeichnen, sehen Sie im Tab „Interactions“ genau, wann sie stattfand.

Performance-Tab - Timeline

Der Tab „Main“ repräsentiert dann die ausgeführten Skripte und Methoden, die uns die Frage beantworten „Was passiert dort?“

Welche häufigen Fehler und Optimierungsmöglichkeiten gibt es?#

Interaction to Next Paint ist hauptsächlich eine JavaScript-Metrik, aber vieles kann auch durch UI-Anpassungen gelöst werden. Über die Optimierung der INP-Metrik haben wir einen separaten Artikel, aber hier listen wir kurz einige grundlegende Möglichkeiten auf.

Lassen Sie den Benutzer nicht auf eine Reaktion warten#

Nach einer Benutzerinteraktion muss so schnell wie möglich eine Änderung im Rendering auf dem Bildschirm des Benutzers erfolgen. Wenn es zu einer AJAX/Fetch-Anfrage kommt, weiß der Benutzer oft nicht, dass er auf etwas wartet. Es ist notwendig, dass er so schnell wie möglich eine visuelle Rückmeldung erhält. Reagieren Sie daher mit einer Änderung des Layouts und der Darstellung eines Ladesymbols.

Lassen Sie den Benutzer nicht auf eine Reaktion warten

Starten Sie keine JS-Codes, die Sie verschieben können, nach einem Klick#

Verschieben Sie Ereignisse wie verschiedene Messungen und das Senden von Tracking-Codes, bis das Interface reagiert hat. Lange Aufgaben, die z.B. in GTM beim Klicken auf eine Schaltfläche gestartet werden, verlängern die Reaktionszeit des Interfaces und verschlechtern die INP-Metrik.

Starten Sie keine JS-Codes, die Sie verschieben können, nach einem Klick

Eliminieren Sie lange Aufgaben (Long Tasks) in JavaScript#

JavaScript-Code kann Long Tasks bilden. Diese Aufgaben müssen in kleinere Aufgaben aufgeteilt werden, die nacheinander ausgeführt werden und die Antwort nicht blockieren. Der einfachste Weg, Long Tasks zu teilen, ist das Einpacken des Codes in eine setTimeout-Funktion.

document.addEventListener('DOMContentLoaded', function () {
  setTimeout(() => {
    // Hier rufen Sie Ihre Funktionen auf
  }, 0);
});

Es gibt viele interessante Möglichkeiten zur Optimierung von INP, wir empfehlen auch, über Folgendes nachzudenken:

• Optimierung der Antwortgeschwindigkeit von Fetch/Ajax.
• Minimierung des DOMs, Nutzung von „Lazy Load für DOM“ content-visibility.
• In Zukunft wird anstelle von setTimeout() der scheduler.yield(), Long Animation Frames API interessant sein.

Konkrete Erfahrungen mit der Optimierung von INP finden Sie in unserer Fallstudie Innogy: Wie die langfristige Zusammenarbeit mit PageSpeed.ONE INP um 38 % verbesserte.

Was sollten wir uns über INP merken?#

• Interaction to Next Paint (INP) misst die gesamte Reaktion der Seiten auf Benutzerinteraktionen, indem es die Verzögerung aller Ereignisse während des gesamten Besuchs des Nutzers auf der Seite überwacht.
• Die empfohlenen Werte für INP liegen bei unter 200 ms, 200 bis 500 ms erfordern Anpassungen und über 500 ms ist INP nicht zufriedenstellend.
• Google plant, dass INP im März 2024 Teil der Core Web Vitals wird und die Metrik FID ersetzt.
• Bei der Optimierung von INP sollten Sie sich auf die Beseitigung langer Aufgaben in JavaScript (Long Tasks) konzentrieren, den Benutzer nicht auf eine Reaktion warten lassen und JS-Codes verschieben, die Sie nicht sofort ausführen müssen.

Die INP-Metrik ist Teil unserer einheitlichen Geschwindigkeitsmetrik, dem PageSpeed.ONE Score (SPS).

Weitere Informationen finden Sie in der Optimierung der INP-Metrik.