Metrik INP: 7 Tipps zur Optimierung

Die Interaktivitätsmetrik Interaction to Next Paint (INP) ist ein wesentlicher Bestandteil der Core Web Vitals. Bei einigen unserer Kunden beobachten wir auch eine Verbindung zu geschäftlichen Kennzahlen.

Leider ist INP nicht gerade die einfachste Metrik zur Optimierung. Daher haben wir aus unserer Praxis die häufigsten Probleme und Lösungen ausgewählt.

1) Optimieren Sie die Anzahl der DOM-Elemente auf der Seite#

Die Anzahl der DOM-Elemente auf einer Seite steht häufig in engem Zusammenhang mit der Leistung von Funktionen, die direkt mit dem DOM in JavaScript arbeiten. Je mehr DOM-Elemente, desto mehr Daten muss JavaScript durchlaufen, und desto länger dauert es.

Ein großer DOM erhöht den INP-Wert beispielsweise während der Hydratation, wenn Ihre Seiten von JavaScript-Frameworks wie React.js betrieben werden. Probleme können auch durch Drittanbieter-Skripte wie den TikTok-Pixel verursacht werden, die die Seiten und Informationen darauf durchsuchen.

Nach unseren Erfahrungen (und den Empfehlungen von Google) sollte die ideale DOM-Größe bis zu 1.500 Elemente betragen. Wenn Sie mehr auf Ihrer Website haben, sollten Sie eine Optimierung in Betracht ziehen. Zu den häufigsten Komponenten, die die Anzahl der DOM-Elemente auf der Seite erhöhen, gehören Megamenüs oder umfangreiche Filteroptionen in Kategorien.

Auf dieser Website haben wir durch Reduzierung der Komplexität des DOM im Megamenü (bei gleichzeitiger Beibehaltung der Links für SEO) geholfen, den INP-Wert um Dutzende Prozent zu verbessern.

Sie können die INP-Metrik durch Reduzierung der Komplexität von Elementen optimieren (der Inhalt bleibt wegen SEO, aber die Elemente drumherum werden erst nachgeladen) oder durch das Laden von Elementen außerhalb des ersten sichtbaren Bereichs erst bei Bedarf mithilfe des Intersection Observer.

2) Minimieren Sie die Anzahl ressourcenintensiver Skripte wie Hotjar, Smartlook, TikTok Pixel usw.#

Unüberlegtes Hinzufügen von Drittanbieter-Code kann die INP-Metrik Ihrer Website schnell beeinträchtigen. Wir sehen oft Situationen, in denen analytische Werkzeuge Daten sammeln, die niemand verfolgt.

Es kann vorkommen, dass Daten nur für einen begrenzten Zeitraum benötigt werden, aber nach Abschluss der Messung der Code nicht von der Website entfernt wird. Überlegen Sie daher gemeinsam mit Ihrem Marketing-Team, ob einige der analytischen Werkzeuge unnötig auf Ihren Websites laufen. Wenn ja, entfernen Sie den Code vollständig von der Website.

Wir empfehlen, diese Wartung in bestimmten Zeitabständen regelmäßig durchzuführen, insbesondere wenn die Website langfristig entwickelt wird und mehrere Abteilungen unabhängig voneinander in die Verwaltung eingreifen.

3) Aktualisieren Sie Komponenten auf neuere Versionen#

Während unserer Analysen stoßen wir auf Situationen, in denen hohe INP-Werte nach Interaktionen durch ältere Versionen verschiedener JavaScript-Komponenten verursacht werden.

Problematisch kann beispielsweise eine ältere Version des Modalfensters Fancybox sein, die nach einem Klick lange Aufgaben auf der Website verursacht und die Interaktionsdauer verlängert.

Eine lange Aufgabe im JS, die durch eine ältere Version von Fancybox erstellt wird.

Es ist in jedem Fall eine gute Idee, im Rahmen der Projektwartung die verwendeten Komponenten zu überprüfen und gegebenenfalls auf neuere Versionen zu aktualisieren.

Eine vollständige Ersetzung bestimmter Komponenten kann ebenfalls hilfreich sein. Dies betrifft sehr beliebte Karussells wie Owl oder Slick, die ziemlich leistungshungrig sind. Suchen Sie nach Karussells, die für ihre Funktion keine absolute Position und Neuberechnung der left-Eigenschaft in CSS verwenden, sondern die Eigenschaft transform. Ein Beispiel für ein solches Karussell ist Embla.

4) Intersection Observer: Verzögern Sie die Initialisierung ressourcenintensiver Komponenten, die nicht im ersten Viewport sind#

Eine weitere Möglichkeit der Optimierung besteht darin, die Initialisierung ressourcenintensiver Komponenten, wie der bereits erwähnten Karussells, zu verzögern. Wenn die Komponenten außerhalb des ersten Viewports sind, müssen sie beim ersten Laden nicht initialisiert werden. Warten Sie lieber, bis sich der Benutzer ihnen beim Durchblättern der Seite nähert, und initialisieren Sie sie dann mithilfe der Intersection Observer API.

let observer = new IntersectionObserver(callback, options);
let target = document.querySelector('#lazy-component');

observer.observe(target);

Eine zweite Möglichkeit besteht darin, auf die Inaktivität des Browsers mit Idle Request Callback zu warten.

5) Zerlegen Sie lange Aufgaben in JavaScript#

Der beste JavaScript ist der, der gar nicht auf der Seite ist. JavaScript-Code kann, und tut es sehr oft, lange Aufgaben erstellen (messbar mit der Metrik JS Long Tasks (JSLT)). Diese Aufgaben sollten in kleinere, aufeinanderfolgende Teile zerlegt werden, die den Hauptthread des Browsers nicht blockieren.

Ein effektiver Weg, um Long Tasks zu zerlegen, besteht darin, den Code in eine setTimeout-Funktion einzuwickeln. Diese Technik kann beispielsweise genutzt werden, um Interaktionen zu unterteilen, bei denen viele analytische Codes wichtige Operationen bremsen.

setTimeout(() => {
  kod_odlozeny_do_nasledujiciho_renderu();
}, 0);

In Zukunft sollten Sie scheduler.yield() oder Long Animation Frames API im Auge behalten.

6) Lassen Sie Benutzer nicht lange warten#

Wenn Sie auf Ihrer Website nach einer Interaktion des Benutzers (Klick, Tipp, Tastatureingabe usw.) eine lange Bearbeitung eines Antrags wie AJAX/fetch erwarten, sorgen Sie für eine visuelle Änderung auf dem Bildschirm des Benutzers. Die visuelle Änderung sollte so schnell wie möglich erfolgen, laut Google innerhalb von 200 ms, und zeigen Sie den Benutzern nach der Interaktion einen Ladespinner.

7) Optimieren Sie React, und zwar nicht nur die Hydratation#

Bei der Optimierung von React und ähnlichen Frameworks sollten wir etwas verweilen. Viele Probleme entstehen während der Hydratation, dem Moment, in dem die Seite „zum Leben erweckt“ wird.

Während der Hydratation verarbeitet der Browser alle verfügbaren Ressourcen und baut eine Seite auf, die bereits auf Benutzereingaben reagieren kann. Dies stellt eine erhebliche Belastung für den Browser dar und führt zu vielen langen Aufgaben (messbar mit der Metrik JS Long Tasks (JSLT)).

Im Performance-Panel der Chrome DevTools können Sie den Einfluss der Hydratation sehen.

Die gute Nachricht ist, dass Sie die Hydratation optimieren können. Von den Methoden, die wir selbst verwenden, haben wir folgende ausgewählt:

• Reduzieren Sie die Größe des DOM
• Erstellen Sie zwei Versionen von Komponenten: einfach und vollwertig
• Verwenden Sie <Suspense>
• Achten Sie auf Hydratationsfehler
• Seien Sie vorsichtig mit useEffect()
• Nutzen Sie Serverkomponenten

Das Thema der Optimierung der Core Web Vitals Metriken decken wir in voller Breite ab, lesen Sie unsere weiteren Texte:

• Optimierung der Metrik LCP
• Optimierung der Metrik CLS