So verbessern Sie die Interaktion mit Next Paint (INP)

Die Interaktion mit Next Paint (INP) ist nicht mehr experimentell.

Ab März 2024verpflichtet sich Google, INP als neue Core Web Vital-Metrik für Reaktionsfähigkeit zu fördern und First Input Delay zu ersetzen.

Und auch wenn Sie vielleicht denken, dass die Verwaltung des INP-Scores Ihrer Website eine Aufgabe ist, die Sie aufschieben können, sind wir da anderer Meinung.

Google hat bereits damit begonnen, INP-Probleme in der Search Console zu melden und E-Mails an Websites zu senden, die den Schwellenwert für eine gute Reaktionsfähigkeit verfehlen:

Mit anderen Worten: Jetzt ist der perfekte Zeitpunkt, um mit der Optimierung Ihrer Website für die kommende Reaktionsfähigkeitsmetrik zu beginnen. Und wie das genau geht, erfahren Sie in den folgenden Zeilen.

• Interaktion mit Next Paint – Übersicht
• Interaktionslatenz verstehen
• Warum Ihre Website INP nicht besteht
• So erkennen Sie langsame Interaktionen
• So optimieren Sie INP

Weiter lesen.

Interaktion mit der nächsten Farbe: Übersicht

Bevor wir uns mit den verschiedenen Optimierungstechniken befassen, finden Sie hier eine kurze Zusammenfassung der INP-Messungen.

INP bewertet die allgemeine Reaktionsfähigkeit einer Seite auf Benutzerinteraktionen, indem es die Latenz aller qualifizierten Interaktionen während des Besuchs eines Benutzers auf einer Seite beobachtet. Der endgültige INP-Wert ist die längste beobachtete Interaktion.

Die Wechselwirkungen, die bei den Berechnungen von INP eine Rolle spielen, sind:

• Klicken mit einer Maus;
• Tippen auf ein Gerät mit Touchscreen;
• Drücken einer Taste auf einer physischen oder digitalen Tastatur.

Ähnlich wie bei den anderen Core Web Vitals kann Ihr INP-Score innerhalb eines der drei Schwellenwerte liegen:

• Gut : 0-200 ms
• Verbesserungsbedarf : 200–500 ms
• Schlecht : >500 ms

Um sicherzustellen, dass Sie dieses Ziel für die Mehrheit Ihrer Benutzer erreichen, wird empfohlen, das 75. Perzentil der Seitenladevorgänge zu bewerten, segmentiert nach Mobil- und Desktop-Geräten.

Wenn Sie mehr erfahren oder Ihr Wissen über INP auffrischen möchten, lesen Sie unseren Artikel über die kommende Reaktionsfähigkeitsmetrik.

Interaktionslatenz verstehen

Wenn Sie möchten, dass Ihr INP-Score von schlecht auf gut wechselt, müssen Sie die Interaktionslatenz verstehen.

Was genau ist also Interaktionslatenz?

Unter Interaktionslatenz versteht man die Verzögerung oder Verzögerung zwischen der Eingabe oder Aktion eines Benutzers und der daraus resultierenden Antwort oder Ausgabe auf dem Bildschirm. Dies ist ein entscheidender Faktor bei der Bestimmung der Reaktionsfähigkeit und der wahrgenommenen Leistung Ihrer Website.

Drei Hauptkomponenten tragen zur Interaktionslatenz bei:

Eingabeverzögerung

Die Eingabeverzögerung bezieht sich auf die Zeit zwischen dem Beginn der Interaktion eines Benutzers mit der Seite und dem Beginn der Ausführung der zugehörigen Aktionen oder Ereignisrückrufe. Dazu gehören die physischen oder technischen Verzögerungen, die durch das Eingabegerät (z. B. Tastatur, Maus, Touchscreen) und die Eingabeverarbeitungsmechanismen des Systems verursacht werden.

Bearbeitungszeit

Sobald die Benutzereingabe eingegangen ist, muss das System sie verarbeiten, um die entsprechende Reaktion oder Aktion zu bestimmen. Unter Verarbeitungszeit versteht man die Zeit, die das System benötigt, um die Eingabedaten zu analysieren und zu interpretieren, alle erforderlichen Berechnungen oder Operationen durchzuführen und die Ausgabe oder Antwort zu generieren.

Präsentationsverzögerung

Nachdem das System die Ausgabe oder Antwort generiert hat, gibt es normalerweise eine Verzögerung, bevor sie dem Benutzer präsentiert wird. Die Präsentationsverzögerung umfasst die Zeit, die das System benötigt, um die Anzeige zu aktualisieren, Grafiken oder Benutzeroberflächen zu rendern und die Ausgabe an die Benutzeroberfläche oder das Ausgabegerät zu liefern.

Wenn Sie weitere Informationen benötigen, können Sie sich Jeremy Wagners Präsentation auf der JSConf Korea 2022 ansehen:

Das Verstehen und Optimieren der Interaktionslatenz kann für ein nahtloses Benutzererlebnis sorgen und Ihre INP-Scores verbessern.

Aber werfen wir vorher einen Blick auf die Hauptursachen für hohe Interaktionslatenz und schlechte INP-Werte …

Auf Ihrer Website wurde ein Core Web Vitals INP-Problem festgestellt: Was könnte die Ursache sein?

Obwohl INP als ausstehend gekennzeichnet ist,bedeutet dies nicht, dass Sie ohne Strategie in den Optimierungsprozess einsteigen sollten.

Das erste, was Sie tun müssen, ist herauszufinden, was die Hauptverursacher von INP sind, damit Sie effektiv mit ihnen umgehen können.

Hier sind die Hauptgründe für die Fehlermeldung„INP-Problem: länger als 200 ms“:

Lange Aufgaben

Alles, was ein Browser tut, wird als Aufgabe betrachtet. Dazu gehören das Rendern, Parsen von HTML, das Ausführen von JavaScript und alles, worüber Sie möglicherweise die Kontrolle haben oder nicht.

Im Hauptthread erledigt der Browser die meiste Arbeit, die zum Anzeigen einer Seite erforderlich ist. Und obwohl möglicherweise Dutzende Aufgaben ausgeführt werden müssen,kann der Hauptthread jeweils nur eine Aufgabe verarbeiten.

Aber das ist nur die Hälfte des Problems.

Die andere Hälfte besteht darin, dass eine Aufgabe, deren Ausführung länger als 50 Millisekunden dauert, alslange Aufgabe klassifiziert wird. 

Wenn man bedenkt, dass der Hauptthread jeweils eine Aufgabe bearbeiten kann, gilt: Je länger die Aufgabe ist, desto länger wird der Browser bei der Verarbeitung blockiert.

Mit anderen Worten: Wenn der Benutzer versucht, mit der Seite zu interagieren, während eine lange Aufgabe ausgeführt wird, wird der Browser die Anfrage nur verzögert ausführen.

Das Ergebnis ist eine Interaktionslatenz und ein niedrigerer INP-Score.

Große DOM-Größe

Ein weiterer Grund für das Scheitern von INP ist die große DOM-Größe.

Das Document Object Model (DOM) ist ein untrennbarer Bestandteil jeder Webseite. Das DOM ist eine Darstellung eines als Baum strukturierten HTML-Dokuments. Jeder Zweig im Baum endet an einem Knoten und jeder Knoten enthält Objekte. Knoten können verschiedene Teile des Dokuments darstellen, beispielsweise Elemente, Textzeichenfolgen oder Kommentare.

Das DOM selbst ist kein Problem, seine Größe jedoch möglicherweise. Eine große DOM-Größe beeinträchtigt die Fähigkeit eines Browsers, eine Seite schnell und effizient darzustellen.

Je größer das DOM, desto ressourcenintensiver ist die anfängliche Anzeige der Seite und die Durchführung nachfolgender Aktualisierungen während des Lebenszyklus der Seite.

Einfach gesagt:

Wenn Sie möchten, dass eine Seite schnell auf Benutzerinteraktionen reagiert, stellen Sie sicher, dass Ihr DOM nur die erforderlichen Elemente enthält.

Sie fragen sich vielleicht, was „notwendig“ bedeutet. Laut Lighthouse ist die DOM-Größe einer Seite zu groß, wenn sie1.400 Knoten überschreitet .

Achten Sie also darauf, innerhalb dieses Limits zu bleiben. Andernfalls wird in Ihrem PageSpeed ​​Insights-Bericht möglicherweise der folgende Fehler angezeigt:

Clientseitiges Rendern von HTML

Um zu verstehen, warum das Client-Site-Rendering zu schlechten INP-Scores führen kann, müssen wir erklären, wie es sich vom serverseitigen HTML-Rendering unterscheidet.

Beim herkömmlichen Laden einer Seite empfängt der Browser bei jeder Navigation HTML vom Server. Was im Hintergrund passiert, wenn eine Person beschließt, eine Seite zu laden, ist Folgendes:

1. Der Browser sendet eine Navigationsanforderung für die angegebene URL.
2. Der Server antwortet mit HTML in Blöcken.

Der Schlüssel hier ist „in Stücken“.

Wenn der Browser den ersten HTML-Block empfängt, kann er mit der Analyse beginnen. Aber wie wir wissen, ist das Parsen von HTML eine Aufgabe, die der Hauptthread übernimmt.

Nachdem jedoch jeder Block verarbeitet wurde, legt der Browser eine Analysepause ein und ermöglicht die Ausführung anderer Aufgaben. Dies verhindert lange Aufgaben, die den Browser verlangsamen könnten.

Stattdessen kann mit dem Rendern der Teile der Seite begonnen werden, die bereits analysiert wurden, sodass der Benutzer früher eine teilweise geladene Seite sieht. Es kann auch alle Benutzerinteraktionen verarbeiten, die beim ersten Laden der Seite auftreten.

Mit anderen Worten:

Dieser Ansatz führt zu einem besseren Interaction to Next Paint (INP)-Score für die Seite.

Im Gegenteil: Wenn Ihre Website das Single-Page-Application-Muster (SPA) verwendet, das große Teile des HTML/DOM auf dem Client dynamisch mit JavaScript erstellt, müssen Sie mit negativen Auswirkungen auf Ihren INP-Score rechnen.

Beim clientseitigen Rendering sendet der Server einen kleinen Teil des grundlegenden HTML-Codes an den Client. Anschließend kümmert sich der Client darum, den Hauptinhalt der Seite mithilfe der vom Server abgerufenen Daten auszufüllen.

Alle zukünftigen Navigationen werden von JavaScript abgewickelt, wobei neues HTML vom Server abgerufen und die Seite dynamisch aktualisiert wird, ohne sie vollständig neu zu laden. Wenn es um JavaScript-Aufgaben auf der Clientseite geht, werden diese leider nicht automatisch aufgeteilt.

Dies kann zu langwierigen Aufgaben führen, die den Hauptthread blockieren und sich möglicherweise auf den Interaction to Next Paint-Score Ihrer Seite auswirken. Daher kann das clientseitige Rendering das Laden und die Interaktivität Ihrer Seite beeinträchtigen.

Wenn Sie zusätzliche Informationen zu den Vor- und Nachteilen von serverseitigem und clientseitigem Rendering benötigen, schauen Sie sich dieses Video an:

Nachdem Sie nun einige der Hauptschuldigen kennen, können wir mit der Messung Ihres INP-Scores und der Identifizierung langsamer Interaktionen fortfahren.

So identifizieren Sie langsame Interaktionen anhand von Felddaten und debuggen sie im Labor

Der nächste Schritt auf dem Weg zur INP-Optimierung besteht darin, die Leistung Ihrer Website zu messen und langsame Interaktionen zu identifizieren.

Ähnlich wie die Verzögerung bei der ersten Eingabe lässt sich INP am besten vor Ort messen, indem untersucht wird, wie echte Benutzer Ihre Website erleben.

Der optimale Testprozess würde so aussehen:

1. Sammeln Sie Felddaten für INP
2. Identifizieren Sie die genauen Aktionen, die für INP verantwortlich sind
3. Verwenden Sie Labortools, um herauszufinden, warum diese Interaktionen langsam sind

Wir haben „optimal“gesagt, weil Ihre Website in manchen Fällen möglicherweise nicht über Felddaten verfügt (auch bekannt als Real User Monitoring (RUM)-Daten). Das bedeutet jedoch nicht, dass Sie auf die Optimierung Ihres INP-Scores verzichten sollten. Sie müssen einen anderen Ansatz wählen und die verfügbaren Labortools nutzen.

Werfen wir einen Blick auf beide Szenarien und erklären, wie Sie die meisten Ihrer Feld- und Labordaten erfassen.

Felddaten

Idealerweise möchten Sie über Felddaten verfügen, wenn Sie beginnen, die Reaktionsfähigkeit Ihrer Website zu verbessern. Wenn Sie sich auf RUM-Daten verlassen, sparen Sie viel Zeit bei der Ermittlung, welche Interaktionen optimiert werden müssen.

Darüber hinaus können laborbasierte Tools bestimmte Interaktionen simulieren, reale Benutzererfahrungen jedoch nicht vollständig nachbilden.

Beim Sammeln von INP-Felddaten sollten Sie Folgendes erfassen, um einen Kontext zu liefern, warum die Interaktionen langsam waren:

• Der INP-Wert – Die Verteilung dieser Werte bestimmt, ob die Seite die INP-Schwellenwerte erfüllt.
• Die Elementauswahlzeichenfolge, die für den INP-Wert der Seite verantwortlich ist – Es reicht nicht aus, nur den INP-Wert einer Seite zu kennen.Sie möchten wissen, welche Elemente für die Interaktionen verantwortlich sind.
• Der Ladestatus der Seite für die Interaktion, die den INP der Seite darstellt. Wenn Sie wissen, ob eine Interaktion während des Ladens der Seite oder danach stattfindet, können Sie feststellen, ob Sie den Hauptthread optimieren sollten oder ob die Interaktion selbst unabhängig vom anfänglichen Laden der Seite langsam ist.
• Die Startzeit der Interaktion – Stellen Sie sicher, dass Sie die Startzeit der Interaktion protokollieren, da Sie so wissen, wann die Interaktion auf der Leistungszeitleiste stattgefunden hat.
• Der Ereignistyp – Wenn Sie den Typ des Interaktionsereignisses kennen (Klick-Tastendruck, andere geeignete Ereignisse), können Sie genau bestimmen, welcher Ereignisrückruf in der Interaktion am längsten zur Ausführung gedauert hat.

Wenn Sie sich fragen:

Wie soll ich all diese Dinge einfangen?

Mach dir keine Sorge. Alle Daten werden in der JavaScript-Bibliothek von web-vitals bereitgestellt. In der Schritt-für-Schritt-Anleitung von Google erfahren Sie, wie Sie die Web-Vital-Bibliothek nutzen und sogar INP-Daten direkt an Ihr Google Analytics übertragen.

Auch wenn Sie bereits Daten bei einem RUM-Drittanbieter sammeln, sollten Sie einen Vergleich mit Chrome UX Report (CrUX)-Daten in Betracht ziehen, da es Unterschiede in den verwendeten Methoden gibt.

Labordaten

Felddaten sind die zuverlässigste Quelle für Messungen. Allerdings ist es, wie gesagt, nicht immer verfügbar.

Aber es besteht kein Grund zur Sorge, denn Sie können mithilfe von Labordaten immer noch Interaktionen messen und identifizieren, die verbessert werden können.

Sie können entweder Lighthouse oder PageSpeed ​​Insights verwenden, um einige Leistungstests durchzuführen. Die Kennzahl, auf die Sie achten sollten, ist die Total Blocking Time (TBT).

TBT ist eine Metrik, die die Seitenreaktionsfähigkeit während des Ladevorgangs bewertet und sehr gut mit INP korreliert. Ein schlechter TBT-Score ist ein Zeichen dafür, dass Interaktionen beim Laden der Seite möglicherweise langsam sind.

So können Sie langsame Interaktionen mit Labortools reproduzieren:

• Verwenden Sie die Web Vitals Chrome-Erweiterung

Die Web Vitals Chrome-Erweiterung ist eine der einfachsten Möglichkeiten, die Interaktionslatenz Ihrer Website zu messen. Folgendes müssen Sie tun, um nützliche Informationen abzurufen:

1. Klicken Sie in Chrome auf das Erweiterungssymbol rechts neben der Adressleiste.
2. Suchen Sie im Dropdown-Menü nach der Web Vitals-Erweiterung.
3. Klicken Sie auf das Symbol rechts, um die Einstellungen der Erweiterung zu öffnen.
4. Klicken Sie auf Optionen.
5. Aktivieren Sie im daraufhin angezeigten Bildschirm das Kontrollkästchen „Konsolenprotokollierung“ und klicken Sie dann auf „Speichern“.

Öffnen Sie abschließend die Chrome DevTools-Konsole und beginnen Sie mit dem Testen. Sie erhalten hilfreiche Konsolenprotokolle mit detaillierten Diagnoseinformationen für die Interaktion.

• Zeichnen Sie eine Ablaufverfolgung mit Chrome DevTools auf

Um noch mehr Informationen darüber zu erhalten, warum die Interaktion langsam ist, können Sie den Leistungsprofiler in Chrome DevTools verwenden. Gehen Sie einfach wie folgt vor:

1. Öffnen Sie Chrome DevTools und gehen Sie zum Leistungsbereich.
2. Klicken Sie oben links im Bedienfeld auf die Schaltfläche „Aufzeichnen“, um mit der Aufzeichnung zu beginnen.
   
   
   
3. Führen Sie die gewünschte Interaktion durch.
4. Klicken Sie erneut auf die Schaltfläche „Aufzeichnen“, um die Verfolgung zu beenden.

Um Leistungsprobleme schnell zu erkennen, überprüfen Sie die Aktivitätszusammenfassung oben im Profiler, wenn das Profil gefüllt wird. Suchen Sie in der Aktivitätszusammenfassung nach roten Balken, die auf lange Aufgaben während der Aufzeichnung hinweisen. Diese roten Balken helfen Ihnen, Problembereiche zu lokalisieren und Ihre Untersuchung zu fokussieren.

• Verwenden Sie Lighthouse-Zeitspannen

Der Zeitspannenmodus von Lighthouse ist die weniger einschüchternde Alternative zum DevTools-Leistungsprofiler. So verwenden Sie es:

1. Gehen Sie in DevTools zur Registerkarte „Lighthouse“.
2. Wählen Sie im Abschnitt mit der Bezeichnung „Modus“ die Option „Zeitspanne“ aus.
3. Wählen Sie im Abschnitt „Gerät“ den gewünschten Gerätetyp aus.
4. Stellen Sie sicher, dass unter der Bezeichnung „Kategorien“ mindestens das Kontrollkästchen „Leistung“ aktiviert ist.
5. Klicken Sie auf die Schaltfläche Zeitspanne starten.
   
   
   
6. Testen Sie die gewünschte(n) Interaktion(en) auf der Seite.
7. Klicken Sie auf die Schaltfläche „Zeitspanne beenden“ und warten Sie, bis die Prüfung angezeigt wird
8. Sobald die Prüfung ausgefüllt ist, filtern Sie sie nach INP.

Ihnen wird eine Liste der nicht bestandenen und bestandenen Audits angezeigt. Wenn Sie darauf klicken, erscheint ein Dropdown-Menü und Sie können eine Aufschlüsselung der während der Interaktion aufgewendeten Zeit sehen, aufgeteilt nach Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung.

Quelle: Google

Da Sie nun wissen, woran Sie arbeiten müssen, ist es an der Zeit, die Ärmel hochzukrempeln und mit der Optimierung zu beginnen.

So optimieren Sie INP

Um Ihrer Website einengutenINP-Score zu garantieren, müssen Sie sicherstellen, dass jedes Interaktionsereignis so schnell wie möglich abläuft. So erreichen Sie es:

Eingangsverzögerung reduzieren

1. Vermeiden Sie wiederkehrende Timer, die den Hauptthread überlasten

setTimeout und setInterval sind häufig verwendete JavaScript-Timerfunktionen, die zur Eingabeverzögerung beitragen können.

setTimeout plant die Ausführung eines Rückrufs nach einer bestimmten Zeit. Dies kann zwar dazu beitragen, lange Aufgaben zu vermeiden, hängt jedoch davon ab, wann die Zeitüberschreitung auftritt und ob sie mit Benutzerinteraktionen zusammenfällt.

setInterval hingegen plant einen Rückruf so, dass er in einem bestimmten Intervall wiederholt ausgeführt wird. Aus diesem Grund ist es wahrscheinlicher, dass es die Benutzerinteraktionen beeinträchtigt. Seine wiederkehrende Natur erhöht die Eingabeverzögerung und kann die Reaktionsfähigkeit von Interaktionen beeinträchtigen.

Wenn Sie die Kontrolle über die Timer in Ihrem Code haben, bewerten Sie deren Notwendigkeit und reduzieren Sie ihre Arbeitsbelastung so weit wie möglich.

2. Vermeiden Sie lange Aufgaben

Wie Sie bereits wissen, blockieren lange Aufgaben den Hauptthread und verhindern so, dass der Browser die Interaktionsereignisse ausführt.

Um die Reaktionsfähigkeit Ihrer Website zu verbessern, ist es wichtig, die Arbeitsbelastung des Hauptthreads zu minimieren und in Erwägung zu ziehen, lange Aufgaben aufzuteilen.

Durch die Aufteilung langer Aufgaben in kleinere Abschnitte erhält der Hauptthread die Möglichkeit, andere Aufgaben zu erledigen und schneller auf Benutzerinteraktionen zu reagieren.

Darüber hinaus trägt das Aufteilen langer Aufgaben dazu bei, den „Ruck“-Effekt zu vermeiden, bei dem Animationen und Übergänge auf der Seite aufgrund des überlasteten Hauptthreads abgehackt werden oder stottern. Indem sichergestellt wird, dass jede Aufgabe innerhalb eines kürzeren Zeitrahmens abgeschlossen wird, kann die Seite für ein reibungsloseres visuelles Erlebnis für den Benutzer sorgen.

3. Vermeiden Sie Interaktionsüberschneidungen

Interaktionsüberlappung bedeutet, dass ein Besucher, nachdem er mit einem Element interagiert hat, eine weitere Interaktion mit der Seite durchführt, bevor die erste Interaktion die Möglichkeit hatte, den nächsten Frame darzustellen.

Dies kann beispielsweise passieren, wenn Benutzer in Formularfelder tippen und innerhalb kurzer Zeit zu zahlreichen Tastaturinteraktionen führen. Sie können den Prozess optimieren, indem Sie:

• Entprellen von Eingaben, um die Anzahl der Ausführungen eines Ereignisrückrufs in einem bestimmten Zeitraum zu begrenzen.
• Verwenden von AbortController zum Abbrechen ausgehender Abrufanforderungen, damit der Hauptthread nicht mit der Verarbeitung von Abrufrückrufen überlastet wird.
  

Event-Callbacks optimieren (Verarbeitungszeit)

1. Erwägen Sie, den unnötigen Rückruf zu entfernen

Ist der teure Event-Rückruf wirklich notwendig? Wenn nicht, sollten Sie erwägen, den Code vollständig zu entfernen, oder, wenn das nicht möglich ist, seine Ausführung auf einen geeigneteren Zeitpunkt zu verschieben.

2. Nicht rendernde Arbeiten aufschieben

Lange Aufgaben können unterbrochen werden, indem man sich dem Hauptthread überlässt. Wenn Sie sich dem Hauptthread überlassen, pausieren Sie im Wesentlichen die aktuelle Aufgabe und teilen die verbleibende Arbeit in eine separate Aufgabe auf. Dadurch kann der Renderer Aktualisierungen der Benutzeroberfläche verarbeiten, die zuvor im Ereignisrückruf verarbeitet wurden. Durch Nachgeben ermöglichen Sie dem Renderer die Ausführung ausstehender Änderungen und stellen eine reibungslose und zeitnahe Aktualisierung der Benutzeroberfläche sicher.

Minimieren Sie Präsentationsverzögerungen

1. DOM-Größe reduzieren

Eine große DOM-Größe ist ein todsicherer Weg, um bei der INP-Bewertung durchzufallen. Um sicherzustellen, dass das nicht passiert, müssen Sie die DOM-Größe reduzieren, oder anders ausgedrückt: Sie müssen die DOM-Tiefe reduzieren.

Streben Sie eine DOM-Tiefe von nicht mehr als 1.400 Knoten an.

Sie können dies erreichen, indem Sie die folgenden Techniken integrieren:

• Vermeiden Sie schlecht codierte Plugins und Themes
• Minimieren Sie JavaScript-basierte DOM-Knoten
• Verzichten Sie auf Seitenersteller, die aufgeblähten HTML-Code generieren
• Kopieren/fügen Sie keinen Text in den WYSIWYG-Editor ein
• Teilen Sie Ihre einseitige Website in mehrere Seiten auf
• Verstecken Sie unerwünschte Elemente nicht mit display:none
• Vermeiden Sie die Verwendung komplizierter CSS-Deklarationen und JavaScript
  

2. Vermeiden Sie übermäßige oder unnötige Arbeit bei requestAnimationFrame-Rückrufen

Die Methode „requestAnimationFrame“ teilt dem Browser mit, dass Sie eine Animation ausführen möchten, und fordert den Browser auf, eine bestimmte Funktion aufzurufen, um eine Animation unmittelbar vor dem nächsten Repaint zu aktualisieren.

Der Rückruf „requestAnimationFrame()“ ist Teil der Renderphase in der Ereignisschleife und muss abgeschlossen sein, bevor der nächste Frame angezeigt werden kann. Wenn Sie requestAnimationFrame() für Aufgaben verwenden, die nichts mit Änderungen an der Benutzeroberfläche zu tun haben, müssen Sie sich darüber im Klaren sein, dass Sie möglicherweise eine Verzögerung beim Rendern des nachfolgenden Frames verursachen.

Vermeiden Sie daher den Einsatz, wenn dies unnötig ist.

3. ResizeObserver-Rückrufe zurückstellen

Die ResizeObserver-Schnittstelle meldet Änderungen an den Abmessungen des Inhalts oder der Rahmenbox eines Elements oder der Begrenzungsbox eines SVGElements.

ResizeObserver-Rückrufe werden vor dem Rendern ausgeführt und können möglicherweise die Präsentation des nächsten Frames verschieben, wenn sie ressourcenintensive Aufgaben beinhalten. Ähnlich wie bei Ereignisrückrufen ist es ratsam, unnötige Logik, die nicht für den unmittelbar bevorstehenden Frame erforderlich ist, aufzuschieben.

Verbessern Sie INP mit NitroPack

Basierend auf all den Tests, die wir in den letzten Monaten durchgeführt haben, und der gesamten Dokumentation, die Google auf INP veröffentlicht hat, können wir sagen, dass es große Ähnlichkeit mit Largest Contentful Paint (LCP) hat.

Ein vielschichtiges Core Web Vital mit vielen beweglichen Teilen.

Seit Google die neuen Reaktionsgeschwindigkeitsmetriken zum ersten Mal angekündigt hat, haben wir damit begonnen, Funktionen zu testen und daran zu arbeiten, die die INP-Werte unserer Kunden verbessern werden.

Und wir haben einige vielversprechende Ergebnisse gesehen:

Mit NitroPack erleben unsere Kunden eine durchschnittliche Verbesserung des INP um 36 %.

Und das alles geschah auf Autopilot. Allein durch die Installation von NitroPack und dank Optimierungsfunktionen wie:

• Reduzieren Sie nicht verwendetes CSS
• Verzögern Sie das Laden von JavaScript
• Integriertes CDN

Sie können auch Ihre INP- und Core Web Vitals-Werte steigern, ohne eine einzige Codezeile schreiben zu müssen. Installieren Sie NitroPack kostenlos und erleben Sie die Verbesserungen selbst.

Beheben Sie Ihre INP-Probleme und übergeben Sie Core Web Vitals automatisch. Holen Sie sich jetzt NitroPack →