Interaction to next Paint optimieren

Die Interaction to next Paint (INP) misst die Reaktionsgeschwindigkeit einer Website und zählt dabei zu den Core Web Vitals. Die Optimierung dieser Kennzahlen führt zu einer besseren Ladezeit, welche auch Auswirkungen auf das Google Ranking hat.

In diesem Blogbeitrag erklären wir, was genau mit der Interaction to next Paint gemessen wird und wie diese Zeit optimiert werden kann.

Grundsätzlich werden alle Aktionen, die ein:e Nutzer:in auf einer Website ausführt, als Interaktion bezeichnet. Das können Mausklicks, Tastatureingaben oder Zoomen sein. Für die Interaktivität einer Website wird häufig JavaScript verwendet, bestimmte Element werden jedoch auch von CSS unterstützt.

Für die Berechnung des Interaction to next Paint werden dabei nur die folgenden Interaktionstypen verwendet:

• Mausklicks
• Tippen per Touchscreen
• Drücken einer Taste auf einer Tastatur oder Bildschirmtastatur

Die restlichen Interaktionstypen zählen nicht zur Interaction to next Paint.

Wichtig dabei ist, dass eine Interaktion aus mehreren Ereignissen bestehen kann. Eine Tastatureingabe löst zum Beispiel 3 Ereignisse aus: keydown, keypress und keyup.

Mit der Interaction to next Paint Kennzahl soll die Reaktionszeit einer Website so gut wie möglich gemessen werden. Wenn ein User auf einer Website auf einen Button klickt, erwartet er eine Reaktion. Die INP misst dabei genau die Zeit zwischen Klick auf den Button und der Reaktion des Browsers mit dem angeforderten Text oder Visual.

Die Reaktionszeit einer Interaktion kann dabei auf drei Bestandteile aufgeteilt werden:

• Verzögerung der Eingabe: Diese Zeit beschreibt die Zeit zwischen einer Nutzerinteraktion und dem Start der Eventhandler.
• Ausführung der Ereignishandler: In dieser Zeit wird die Anfrage des Nutzers verarbeitet.
• Verzögerung in der Präsentation: Diese Zeit beschreibt die Zeit zwischen dem Ende des Ausführens der Ereignishandler und der sichtbaren Änderung am Bildschirm.

Um die tatsächliche Reaktionszeit auswerten zu können, werden dabei alle Interaktionen eines Nutzers während der gesamten Zeit, die er auf der Seite verbringt, gemessen. Für Websites mit einer großen Anzahl an Interaktionen ist dies problematisch, weil hier bestimmte Aussetzer vorkommen können. Daher wird in diesen Fällen bei jeder 50. Interaktion die höchste Interaktion ignoriert.

Als Interaction to next Paint wird dabei die längste Dauer eines Ereignisses, welches Teil einer Interaktion ist, vom Beginn der Interaktion bis zum nächsten Frame des Browsers gemessen. Da mit dem Interaction to next Paint nur die längste Dauer ausgegeben wird, haben die weiteren Interaktionen auf der Website (bis auf Ausreißer) eine kürzere Reaktionszeit als die ausgegebene.

Der Interaction to next Paint Wert wird erst berechnet, wenn der Nutzer eine Seite verlässt. Daher spiegelt dieser Wert die Gesamtreaktionszeit einer Website wider.

Wichtig: Die Interaction to next Paint misst nur die Dauer bis zum nächsten Frame des Browsers. Das bedeutet nicht, dass die Ausgabe zu diesem Zeitpunkt schon abgeschlossen sein muss. Wenn direkt nach einem Klick ein Ladescreen angezeigt wird, ist die Interaction to next Paint trotzdem niedrig.

JETZT UNVERBINDLICH ANFRAGEN!

Im März 2024 löste der Interaction to next Paint die First Input Delay (FID) Kennzahl in der Google Search Console als Teil der Core Web Vitals ab. Mit dem First Input Delay wurde dabei auch die Reaktionsfähigkeit einer Website gemessen.

Mit dem First Input Delay wurde die Zeit von der ersten Interaktion des Nutzers mit einer Website bis zum Beginn der Verarbeitung der Ereignisse, die an die Interaktion gebunden sind, gemessen. Die Verarbeitung der Ereignisse selbst sowie die Verzögerung in der Präsentation wurden daher vom First Input Delay nicht gemessen. Zudem wurde mit dem FID nur die erste Interaktion gemessen, wobei die INP alle Interaktionen mit der Website berücksichtigt.

Aus diesen Gründen spiegelt der INP die Gesamtreaktionsfähigkeit einer Website wider und ist daher besser dazu geeignet, die Reaktionsfähigkeit einer Website auszuwerten als der FID.

Bevor eine Website auf den Interaction to next Paint optimiert wird, muss erst herausgefunden werden, ob zurzeit ein Problem vorliegt. Es gibt mehrere Tools, um diesen Wert zu messen. Bei der Messung sollte immer darauf geachtet werden, ob das verwendete Tool Daten von echten Nutzer:innen oder Labordaten enthält. Um den INP richtig auszuwerten, ist beides notwendig.

Die Tests mit echten Nutzerdaten sollten anfangs verwendet werden, um festzustellen, ob Probleme mit der Interaction to next Paint vorliegen. Es gibt mehrere Tools, um echte Nutzerdaten zu sehen.

Pagespeed Insights

Mit dem Pagespeed Insights Tool (https://pagespeed.web.dev/) können Webseiten auf die Seitenladezeit geprüft werden. Im oberen Bereich werden dabei die Daten der echten Nutzer:innen angezeigt. Diese Daten werden für Desktop und Mobilgeräte gesondert ausgewertet.

In der Google Search Console werden im Punkt “Core Web Vitals” bestehende Probleme mit den Core Web Vitals angezeigt. Hier wird auch immer ausgegeben, mit welcher Kennzahl der Core Web Vitals Probleme vorliegen.

Mit der web-vitals JavaScript Datenbank (https://github.com/GoogleChrome/web-vitals) können Felddaten von Nutzer:innen einer Website erhoben werden. Diese Bibliothek umfasst dabei eine Reihe von Messzahlen, unter anderem die Interaction to next Paint.

Sobald die erhobenen Felddaten darauf hinweisen, dass es ein Problem mit der Interaction to next Paint gibt, sollten Labordaten verwendet werden, um zu prüfen, mit welchen Interaktionen Probleme vorliegen.

Die INP-Wert während eines Labortests ist davon abhängig, welche Interaktionen im Test ausgeführt wurden. Auch zeigen mehrere Labortools keine INP Werte an. In diesem Fall können die Total Blocking Time (TBT) Werte als Proxywerte für die INP dienen.

Um Labordaten auszuwerten, können die folgenden Tools verwendet werden.

Die Chrome Entwicklertools können in Google Chrome mit einem Rechtsklick auf “Untersuchen” geöffnet werden. Im Menüpunkt “Performance” werden alle Kennzahlen der Core Web Vitals angezeigt. Mit diesem Tool können bekannte, langsame Interaktionen geprüft werden. Wird die Interaktion einmal ausgelöst, werden die INP-Werte aller Interaktionen ausgegeben. Zusätzlich wird auch angezeigt, welche Interaktion als INP gewählt wurde.

Über die Chrome Entwicklertools können bestimmte Interaktionen auch aufgezeichnet werden. Im Menüpunkt Performance kann die Aufzeichnung mit Klick auf das “Record” Zeichen gestartet werden. Danach muss die problematische Interaktion ausgelöst werden. Mit Klick auf “Record” wird die Aufzeichnung wieder gestoppt. Lange Aufgaben werden im Profiler mit roten Balken angezeigt, dadurch können die problematischen Bereiche schnell identifiziert werden.

Es gibt mehrere Situationen, in denen der Interaction to next Paint Messwert nicht angezeigt werden kann. Eine davon betrifft Sitzungen, in denen keine Interaktionen stattfanden. Wenn keine Interaktion stattfindet, kann die Reaktionszeit einer Interaktion auch nicht gemessen werden.

Wenn ausschließlich Interaktionen ausgelöst werden, die von der Interaction to next Paint nicht berücksichtigt werden, kann der Wert auch nicht angezeigt werden. Das betrifft zum Beispiel Scrollen auf einer Website.

Wird mit einem Browser zugegriffen, der nicht für die Interaktion mit einer Seite programmiert wurde, kann auch keine Interaction to next Paint angezeigt werden. Diese Browser werden oftmals von Bots verwendet, die den Inhalt einer Seite analysieren, ohne mit der Seite zu interagieren.

JETZT UNVERBINDLICH ANFRAGEN!

Nach den Richtlinien von Google gilt ein INP-Wert von unter 200 Millisekunden als gut. Ein INP-Wert von über 500 Millisekunden gilt dabei als schlecht.

Der INP-Wert kann sich pro Seitenaufruf unterscheiden. Um einen guten Interaction to next Paint zu erreichen, muss der Wert für mindestens 75% der Seitenaufrufe als “Gut” bewertet werden.

In der Google Search Console werden Probleme mit dem INP unter dem Menüpunkt “Core Web Vitals” angezeigt. Das ist ein guter Einstiegspunkt, um Probleme mit dem INP-Wert zu erkennen.

Vor der Optimierung des Interaction to next Paint sollte das Problem anhand von Felddaten festgestellt und mit Labordaten reproduziert werden. Auch sollte festgestellt werden, in welchem Teilbereich das Problem vorliegt. Das Problem kann dabei an der Verzögerung bei der Eingabe, an der Verarbeitungsdauer einer Interaktion oder an der Verzögerung bei der Darstellung liegen. Die Optimierungsmaßnahmen unterscheiden sich pro Teilbereich.

Die Eingabeverzögerungen sollten so kurz wie möglich gehalten werden, um einen guten Wert bei der Interaction to next Paint zu erreichen. Jede Interaktion hat dabei eine gewisse Eingabeverzögerung, die nicht vollständig beseitigt werden kann.

Optimierungsmöglichkeiten für die Eingabeverzögerung:

Wiederkehrende Timer: In Javascript können zwei Funktionen für Timer verwendet werden: setTimeout und setInterval. Während setTimeout eine Interaktion nach einer bestimmten Zeit plant, löst setInterval eine Interaktion alle n Millisekunden aus, bis der Timer gestoppt wird. Dadurch, dass der Eventhandler bei setInterval wiederholt ausgeführt wird, ist es hier wahrscheinlicher, dass eine Interaktion beeinträchtigt wird.

Vermeidung von langen Tasks: Die Eingabeverzögerung erhöht sich, wenn der Hauptthread während der Interaktion durch lange Aufgaben blockiert wird. Lange Aufgaben sollten in mehrere Teile aufgesplittet werden.

Überschneidungen vermeiden: Interaktionen überschneiden sich, wenn nach einer Interaktion eine weitere Interaktion mit der Seite ausgeführt wird, bevor der nächste Frame geladen wird. Oftmals können aufwendige Interaktionen der Grund für Überschneidungen sein. Nach Möglichkeit sollten daher statt Javascript requestAnimationFrame Aufrufen CSS Animationen verwendet werden.

Die Verarbeitungsdauer bezeichnet die Zeit, die benötigt wird, um eine Reaktion für eine Nutzerinteraktion zu rendern. Es gibt mehrere Möglichkeiten, diese Zeit zu reduzieren.

Optimierungsmöglichkeiten für die Verarbeitungsdauer:

Aufgaben aufteilen: Für die Reaktion auf Benutzerinteraktionen sollte so wenig Arbeit wie möglich anfallen. Da das oft nur schwer zu erreichen ist, können die Ereignis-Callbacks auf mehrere separate Aufgaben aufgeteilt werden. Dadurch wird der Hauptthread weniger blockiert.

Nur erforderliche Elemente laden: Eine weitere Option, die Verarbeitungsdauer zu reduzieren, besteht darin, dass nur der Code ausgeführt wird, der für die visuellen Updates des nächsten Frames nötig ist. Die weiteren Code-Elemente können später erfolgen.

Layout-Trashing vermeiden: Layout-Trashing kommt vor, wenn Layouts in Javascript aktualisiert werden und sofort danach die Werte dieser Layouts angefragt werden. In diesen Situationen ist Javascript dazu gezwungen, die Layoutarbeiten, die üblicherweise asynchron ausgeführt werden können, synchron auszuführen. Dadurch verringert sich die Renderingleistung des Browsers.

Die Darstellungsverzögerung beginnt, nachdem das Ereignis-Callback abgeschlossen wurde und endet mit den visuellen Änderungen des nächsten Frames im Browser. Auch hier gibt es mehrere Möglichkeiten, um diese Zeit zu reduzieren.

Optimierungsmöglichkeiten für die Verarbeitungsdauer:

DOM Größe minimieren: Der Renderingaufwand steigt mit der DOM Größe, ist das DOM kleiner, kann das Rendern schneller abgeschlossen werden. Es gibt jedoch auch Fälle, in denen große DOMs nicht reduziert werden können.

Lazy Rendering: Mit der CSS Eigenschaft content-visibility kann der Renderingaufwand deutlich reduziert werden. Dadurch werden Elemente erst gerendert, wenn sie im sichtbaren Bereich sind.

Inhalte auf dem Server bereitstellen: HTML Inhalte, die vom Server kommen, werden von Browsern sehr schnell verarbeitet. Das Parsen und Rendern von HTML wird dabei auf mehrere kleinere Teile aufgeteilt. Dadurch wird die Total Blocking Time sowie die Interaction to next Paint reduziert. Ein minimaler Anfangs-HTML-Code muss dabei immer integriert werden.

Nachdem man als Nutzer:in mit einer Website interagiert, wartet man nicht lange auf eine entsprechende Reaktion. Mit der Interaction to next Paint wird genau der Zeitpunkt von der Nutzerinteraktion bis zur entsprechenden Layoutänderung gemessen. Die INP ist dabei ein Bestandteil von den Core Web Vitals Kennzahlen, die verwendet werden, um die Seitenladezeit einer Website auszuwerten.

Wenn ein Problem mit der Seitenladezeit festgestellt wird, muss erst ermittelt werden, in welchem Bereich die Probleme bestehen. Um die Interaction to next Paint genauer zu analysieren, sollten Felddaten sowie Labordaten verwendet werden. Nachdem festgestellt wurde, in welchem Bereich der INP die Probleme auftreten, sollten die in diesem Beitrag erwähnten Optimierungen vorgenommen werden.

JETZT UNVERBINDLICH ANFRAGEN!