Interaction To Next Paint (INP): Alles, was Sie wissen müssen

Im SEO-Bereich herrscht kein Mangel an Akronymen.

Von SEO über FID zu FCP (First Contentful Paint) zu INP – Dies sind einige der gebräuchlicheren Akronyme, auf die Sie stoßen werden, wenn es um die Seitengeschwindigkeit geht.

Google ist derzeit dabei, Core Web Vitals zu ändern.

Es wurden zwei neue hinzugefügt Metriken für den Mix: INP (Interaction To Next Paint) und TTFB (Time to First Byte).

INP bezieht sich darauf, wie die Seite auf bestimmte Benutzerinteraktionen reagiert, die in die Gesamt-INP-Metrik einprogrammiert sind, die von den Labordaten und Felddaten von Google Chrome gemessen wird.

TTFB misst die Zeitdauer, die für die erste benötigt wird Byte, die vom Server übertragen werden müssen.

TTFB wird seit langem als Treiber erheblicher Leistungssteigerungen verdächtigt, was bedeutet, dass SEO-Experten die Optimierung als Teil ihres SEO-Prozesses priorisieren sollten.

Google hat erst kürzlich entschieden, TTFB als neue Metrik zu implementieren, damit SEO-Profis messen können, wie ihre Website auf Serverebene abschneidet.

Zum Zwecke dieser Diskussion bleiben wir in dieser Runde bei INP.

Was genau ist INP?

INP ist eine neue Core Web Vitals-Metrik, die entwickelt wurde, um die gesamte Interaktionsverzögerung einer Seite darzustellen.

Es tut dies, indem es mit einer Stichprobe der einzelnen längsten Interaktionen arbeitet, die stattfinden, wenn ein Benutzer die Seite besucht.

Wenn eine Seite insgesamt weniger als 50 Interaktionen hat, berücksichtigt INP die Interaktion mit der absolut schlimmsten Verzögerung.

Die Messung von INP ist eine Darstellung dessen, wie lange ein Benutzer braucht, um mit ihm zu interagieren die gesamte Seite.

Dies ist ein direkter Gegensatz zu FID (First Input Delay).

FID misst einfach nur die erste Reaktion auf die Interaktion eines bestimmten Benutzers.

Hier auf SEJ haben wir berichtet, dass PageSpeed ​​Insights diese neue Geschwindigkeitsmetrik zur Google Lighthouse Chrome-Erweiterung hinzugefügt hat.

Die Mechanik von INP

JavaScript ist normalerweise das primäre Signal für jede Interaktion auf einer Seite.

Es gibt auch andere Arten von Interaktivität, einschließlich Optionsfeldern und Kontrollkästchen , die HTML- <details> Element und einige andere.

INP befasst sich jedoch mit den folgenden Arten von Interaktionen:

• Jeder Mausklick auf ein interaktives Element.
• Jedes Antippen eines interaktiven Elements auf einem beliebigen Gerät mit Touchscreen.
• Das Drücken einer Taste auf einer physischen Tastatur oder einer Bildschirmtastatur.

Es gibt mehr als ein Ereignis, das als Interaktion betrachtet werden könnte.

Keydown und Keyup, zum Beispiel, sind beide Teile eines Tastendrucks.

Jede Tipp-Interaktion könnte auch Pointerup- und Pointerdown-Ereignisse umfassen.

Diese werden alle als “logische Benutzerinteraktionen”

Was sind die Bestandteile von INP?

Jede Interaktion besteht aus mehreren Phasen: Präsentationszeit, Verarbeitungszeit und Eingabeverzögerung.

Der Rückruf der zugehörigen Ereignisse enthält die Gesamtzeit, die für die Ausführung aller drei Phasen benötigt wird.

Die längste Dauer einer logischen Benutzerinteraktion wird aufgezeichnet.

Was ist ein guter INP Wert?

Die web.dev-Dokumentation von Google erklärt, dass ein guter INP-Wert etwa 200 Millisekunden oder weniger beträgt.

Da steht Folgendes:

Ein INP unter oder bei 200 Millisekunden bedeutet, dass Ihre Seite gut reagiert.

Ein INP über 200 Millisekunden und darunter oder bei 500 Millisekunden bedeutet, dass die Reaktionsfähigkeit Ihrer Seite verbessert werden muss.

Ein INP über 500 Millisekunden bedeutet, dass Ihre Seite eine schlechte Reaktionsfähigkeit aufweist.

Google weist auch darauf hin, dass sich INP noch im Versuchsstadium befindet und dass sich die Empfehlungen zu dieser Metrik wahrscheinlich ändern werden.

Wie unterscheidet sich INP von der Verzögerung bei der ersten Eingabe?

Der Hauptunterschied zwischen INP und FID ist, dass FID nur die erste Interaktion auf der Seite berücksichtigt.

INP berücksichtigt alle Seiteninteraktionen.

FID misst nur die Eingangsverzögerungsmetrik und berücksichtigt keine Ereignishandler und wie lange deren Verarbeitung dauert.

Es berücksichtigt auch nicht eventuelle Verzögerungen bei der Darstellung des nächsten Frames der Interaktion.

So identifizieren Sie INP-Probleme auf Ihrer Website

Um INP-Probleme auf einer Website zu finden, müssen wir zuerst die Unterschiede zwischen berücksichtigen Labordaten und Felddaten.

Die einzige Möglichkeit, realistische Daten darüber zu finden, was Ihre Benutzer erleben, besteht darin, Daten aus der Praxis zu verwenden.

Lab-Tools sind Elemente, die nicht vollständig mit der Seite interagieren und daher normalerweise eine manuelle Eingabe erfordern Messaufgaben durchgeführt werden.

Andernfalls kann Ihnen die Verwendung eines Automatisierungstools wie Puppeteer helfen, manuelle Interaktionen zu skripten, während sie auftreten, während Sie Lab-Tools zu Testzwecken verwenden.

Über Lab Daten

Im Zusammenhang mit dieser Art von Tests sind Labordaten eine Metrik, die durch die Steuerung der Seitenlast anhand vordefinierter Bedingungen bestimmt wird, die normalerweise auf das Gerät und das Netzwerk zugeschnitten sind.

Weil diese Bedingungen kontrolliert werden Umgebung, sie werden als Laborumgebung bezeichnet, und hier kommt der Begriff „Labordaten” stammt von.

Über Felddaten

Felddaten, auch als RUM-Daten (Real User Monitoring) bekannt, werden durch die Überwachung von Benutzern auf einer Seite erhalten.

Es misst die Leistungsmetriken einzelner Leistungen und bietet oft Einblick in diese bestimmten Leistungsmetriken.

Felddaten basieren auf echten Benutzerbesuchen – Das ist also etwas, wo Ihre Website auf tatsächlichen Geräten, den geografischen Standorten der Benutzer sowie den Netzwerkbedingungen dieses Geräts dargestellt werden kann.

Alles zusammenfügen

Was ist das Große? Handelt es sich trotzdem um FID, INP, Felddaten und Labordaten?

Nun, Felddaten werden in Chrome-Tools bereitgestellt, die Daten zu Core Web vVtals melden.

Sie können Felddaten aus dem CrUX-Bericht (oder Chrome User Experience Report) abrufen.

Aber der CrUX-Bericht ist nur ein Teil des Bildes.

Deshalb ist er wichtig Felddaten selbst zu sammeln.

Die Verwendung von CrUX allein kann nicht genügend umsetzbare Erkenntnisse liefern, um einen wirklichen Unterschied in der Leistung Ihrer Website zu machen.

Google erklärt, dass dies die wichtigste Erkenntnis ist bei Felddaten ist, dass es nicht nur eine Zahl ist.

Es ist tatsächlich eine Verteilung von Zahlen.

Das bedeutet, dass Ihre Website bei einer bestimmten Stichprobe von Nutzern möglicherweise sehr langsam geladen wird.

Bei anderen Nutzern kann es sein, dass Ihre Website sehr schnell geladen wird.

Mit anderen Worten: Die Felddaten sind ein Gesamtsatz von gesammelten Leistungsdaten von allen Ihren Benutzern.

Wie können Sie INP messen?

Während die Messung von INP am effektivsten ist Bei der Verwendung kombinierter Labor- und Felddaten gibt es einige „einfachste” Möglichkeiten, diese Core Web Vitals-Metrik zu messen.

Sie können die Google Chrome-Erweiterung namens Lighthouse verwenden, die über einen Zeitspannenmodus verfügt.

Mit diesem Modus können Sie einfacher genau überwachen, was während des Ladens der Seite passiert, was Ihnen bei der Behebung von Problemen mit INP weiter helfen kann.

Sie können auch diese anderen Lab-Tools verwenden, um Ihre Daten zu sammeln:

• Das npm-Modul in Lighthouse.
• Benutzerströme in Lighthouse.
• Die Chrome Web Vitals-Erweiterung.

Wie können Sie Ihre eigenen INP-Werte verbessern?

Der beste Weg, dies zu tun, besteht darin, Ihre Haupt-Thread-Arbeit zu optimieren.

Das bedeutet, sicherzustellen, dass Dinge wie Schriftarten von Drittanbietern auf ein Minimum beschränkt werden (d. h. nur Systemschriftarten verwenden) und dass Sie keine Verwenden Sie nicht zu viele Plug-ins, die beim Laden der Seite geladen werden.

Nehmen Sie zum Beispiel an, dass Sie eine WordPress-Site mit 15 Anzeigen-Plug-ins haben, die dazu bestimmt sind, Anzeigen auf Ihrer Seite anzuzeigen – und vielleicht verwenden Sie nicht unbedingt alle.

Das Deaktivieren von 90 % dieser Plugins sollte dazu beitragen, Ihr INP zu verbessern und die Haupt-Thread-Arbeit zu vereinfachen – da dies das Laden der Seite verzögert.

Einige INP-Probleme treten auf, weil Leute ihre Haupt-Thread-Arbeit nicht genug optimieren, um sicherzustellen, dass die Dinge aus der Perspektive von Core Web Vitals richtig durchführbar sind.

Andere können durch Fehlfunktionen von JavaScript-Dateien und mangelnde Aufmerksamkeit dafür verursacht werden, wie Dinge auf der Seite geladen werden – besonders bei größeren Bildern.

Dies sind nur einige, aber nicht alle Faktoren, die für bessere, effektivere INP-Zahlen optimiert werden sollten.

Sowie ein besseres Core Web insgesamt Vitalwerte.

Die Verbesserung Ihres INP ist keine Wunderwaffe

Es ist wichtig zu beachten, dass die Verbesserung Ihres INP keine Wunderwaffe ist, die garantiert sofortigen SEO-Erfolg bringt.

Stattdessen ist es nur ein Punkt unter vielen, der möglicherweise als Teil einer Reihe von Qualitätsänderungen abgeschlossen werden muss, die dazu beitragen können, Ihre SEO-Gesamtleistung zu verbessern.

Wie Planen Sie die Implementierung der INP-Reparatur in Ihre gesamte SEO-Strategie?