Erfahren Sie, wie sich die wichtigsten Web-Vitalwerte ändern und was Sie tun können, um bei der Interaktion mit Next Paint, Googles neuer Metrik für die Seitenerfahrung, gut zu punkten.
Dieser Beitrag wurde von DebugBear gesponsert. Die in diesem Artikel geäußerten Meinungen sind die eigenen des Sponsors.
Was müssen Sie tun, um bei Google einen hohen Rang einzunehmen?
Die einfache Antwort: Erstellen Sie qualitativ hochwertige Inhalte, die Ihren Lesern dienen.
Aber Google schaut auch darauf, wie gut Ihre Website-Erfahrung ist, sobald Besucher ankommen.
In den letzten Jahren hat Google überarbeitet, welche Seitenerlebnissignale gesammelt und als Rankingfaktor verwendet werden.
Nach der Einführung der Kern-Web-Metriken hat Google nach und nach optimiert, wie sie gemessen werden, damit sie die reale Nutzererfahrung besser widerspiegeln.
Mit der Einführung der Metrik Interaction to Next Paint (INP) hat Google nun jedoch das größte Core Web Vitals Update seit seiner ursprünglichen Einführung angekündigt.
Was müssen Sie tun, bevor INP zu einem Ranking-Signal wird?
Dieser Leitfaden erklärt die neue Metrik von Google und wie Sie sie optimieren können.
Contents
- 1 Was sind Core Web Vitals & Was ändert sich?
- 2 Was ist die Interaktion mit der nächsten Farbe?
- 3 Was soll meine Interaktion mit der nächsten Farbe sein?
- 4 Was verursacht eine langsame Interaktion mit Next Paint (INP) -Scores?
- 5 So optimieren Sie die Interaktion mit dem nächsten Paint
- 6 Der einfache Weg: Real User Monitoring (RUM)
- 7 Einfache und konsistente Überwachung der Interaktion mit der nächsten Farbe
Was sind Core Web Vitals & Was ändert sich?
Core Web Vitals (CWV) sind ein Satz von drei Metriken für die Benutzererfahrung, die im Juni 2021 zu einem Ranking-Signal wurden.
Die drei CWV-Metriken sind:
- Größte inhaltliche Farbe: Wie schnell wird der Inhalt der Hauptseite angezeigt?
- Kumulative Layoutverschiebung: Ist das Seitenlayout nach dem Laden stabil?
- Verzögerung bei der ersten Eingabe: Wie schnell reagiert die Seite auf Benutzereingaben?
Im März 2024 wird jedoch die Interaktion mit der nächsten Farbe (INP) die erste Eingangsverzögerung ersetzen.
Was ist die Interaktion mit der nächsten Farbe?
Die Metrik Interaction to Next Paint (INP) sagt Ihnen, welche Interaktion Besucher bei der Nutzung Ihrer Website verzögert.
INP misst, wie viel Zeit zwischen einer Benutzerinteraktion (wie einem Klick oder einer Berührungseingabe) und dem „nächsten Paint“ vergeht, der die Website visuell aktualisiert.
Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt und die Seite vor dem Aktualisieren eine halbe Sekunde lang hängt, beträgt der INP-Wert 500 Millisekunden.
Der Browser verbringt diese Zeit damit, Website-Code auszuführen und die aktualisierte Seite zu rendern.
Warum hat Google die erste Eingabeverzögerung in Interaktion mit der nächsten Farbe geändert?
Die alte Metrik für die Verzögerung der ersten Eingabe konnte schlechte Benutzererfahrungen oft nicht identifizieren, wenn sie auftraten.
Interaction to Next Paint (INP) verbessert die erste Eingabeverzögerung auf zwei Arten:
- INP berücksichtigt die gesamte Zeit zwischen der Benutzerinteraktion und der nächsten visuellen Aktualisierung auf der Seite. Die erste Eingangsverzögerung berücksichtigt nur einen Bruchteil der Gesamtverzögerung.
- INP berücksichtigt alle Seiteninteraktionen und meldet normalerweise die mit der größten Verzögerung. Die erste Eingangsverzögerung betrachtet nur die erste Interaktion.
Was soll meine Interaktion mit der nächsten Farbe sein?
Um eine gute Erfahrung zu bieten und die wichtigsten Web Vitals-Kriterien von Google zu erfüllen, muss Ihr INP unter 200 Millisekunden liegen.
Die meisten Websites fanden es ziemlich einfach, die erste Eingangsverzögerungsschwelle zu erreichen, wobei 93% der mobilen Websites eine gute Erfahrung boten.
Im Gegensatz dazu schneiden derzeit nur 64% der Websites bei der Metrik Interaktion mit der nächsten Farbe gut ab.
Sie können ein kostenloses Tool wie PageSpeed Insights oder DebugBear verwenden, um zu sehen, wie gut Ihre Website abschneidet. Die Registerkarte DebugBear "Web Vitals“ zeigt Ihnen auch einen Verlauf darüber, wie sich Ihr INP-Wert im Laufe der Zeit verändert hat.
Ein Screenshot von DebugBear.com , August 2023
Was verursacht eine langsame Interaktion mit Next Paint (INP) -Scores?
Die laufende CPU-Verarbeitung auf der Seite, die verhindert, dass der Browser aktualisierte Seiteninhalte anzeigt, führt zu langsamen INP-Werten.
Lassen Sie uns also aufschlüsseln, wo Sie nach potenziellen INP-Problemen suchen sollten.
Der Gesamt-INP-Wert setzt sich aus drei verschiedenen Komponenten zusammen, die sich zur Gesamtpunktzahl addieren:
- Eingangsverzögerung.
- Bearbeitungszeit.
- Verzögerung der Präsentation.
Ein Bild erstellt von DebugBear.com , August 2023
Eingabeverzögerung
Die Eingabeverzögerung ist die Verzögerung zwischen dem Klicken Ihres Benutzers auf eine Schaltfläche und dem Erhalt einer Antwort von dieser Schaltfläche.
In diesem Beispiel können Sie JavaScript verwenden, um neuen Seiteninhalt dynamisch anzuzeigen, sobald ein Benutzer auf eine Schaltfläche „Mehr anzeigen“ klickt.
Der neue Seiteninhalt kann jedoch nur geladen werden, wenn der Browser nicht bereits damit beschäftigt ist, anderen Code auf Ihrer Website auszuführen.
Wenn der Browser noch anderen Code auf Ihrer Website ausführt, muss er warten, bis dieser Code vollständig ausgeführt wird, bevor er auf den Klick des Benutzers reagieren kann.
Diese Verzögerung zwischen der Benutzerinteraktion und der Ausführung Ihres Ereignishandlercodes wird als Eingabeverzögerung bezeichnet.
Die Metrik für die gesamte Blockierungszeit kann Ihnen einen Hinweis darauf geben, welcher andere Code auf Ihrer Website ausgeführt wird, und kann den Ereignishandlercode verzögern.
Verarbeitungszeit
Die Verarbeitungszeit ist die Zeit, die Sie damit verbringen, Ihren Code als Reaktion auf eine Benutzerinteraktion auszuführen. Dies macht normalerweise den größten Teil der gesamten Interaktionsverzögerung aus.
Wenn Ihr Code nur einige kleine Änderungen an der Seite vornimmt (z. B. versteckte Inhalte sichtbar zu machen), kann diese Verarbeitung in nur wenigen Millisekunden erfolgen.
Wenn Sie jedoch eine komplexe Anwendung mit vielen Daten neu rendern müssen, kann dies Hunderte von Millisekunden oder länger dauern.
Präsentationsverzögerung
Die Präsentationsverzögerung ist die Zeit, die Ihr Browser damit verbringt zu berechnen, wo und wie neue Inhalte angezeigt werden sollen. Dies kann alles von Farben über den Standort bis hin zu Schriftarten umfassen.
Wenn Sie eine einfache Website haben, sollte es keine große Verzögerung geben.
Wenn Ihre Website jedoch aus 10 von Tausenden von Einzelelementen mit komplexem Styling besteht, können diese Berechnungen zu Interaktionsverzögerungen auf Ihrer Website beitragen.
So optimieren Sie die Interaktion mit dem nächsten Paint
Wenn Sie nicht sicher sind, welche Seiten auf Ihrer Website optimiert werden müssen, ist das Core Web ein guter AusgangspunktVitalwertbericht in der Google Search Console. Hier sehen Sie bestimmte URLs, die langsam sind.
Sobald Sie wissen, welche Seiten optimiert werden sollen, gibt es einige Ansätze, um langsame Interaktionen auf Ihrer Website zu identifizieren:
- Verwenden des INP-Debuggers
- Manuelles Testen in Chrome DevTools
- Erstellen von Benutzerströmen in Lighthouse
- Verwenden von Real User Monitoring (RUM)
Wir werden uns diese vier Ansätze sowie ihre Vor- und Nachteile ansehen.
1. Verwenden Sie einen INP-Debugger, um herauszufinden, was INP-Verzögerungen verursacht
Der INP-Debugger von DebugBear ist ein kostenloses Tool, das langsame Interaktionen auf einer Website automatisch erkennt.
- Geben Sie die URL Ihrer Website ein.
- Der Debugger wird versuchen, Schaltflächen, Eingabefelder und andere Seitenelemente zu finden, die Interaktionsverzögerungen verursachen können.
- Wenn eine langsame Interaktion aufgetreten ist, wird das relevante UI-Element zusammen mit seiner Interaktion zum nächsten Farbwert im Testergebnis angezeigt.
Ein Screenshot von DebugBear.com , August 2023
Der INP-Debugger macht es einfach, einen Test durchzuführen und langsame Elemente zu identifizieren.
Es funktioniert jedoch nicht gut für komplexe Flows.
Wenn ein Benutzer beispielsweise zum ersten Mal ein Element in seinen Warenkorb legt und während des Checkout-Ablaufs auf eine schlechte Leistung stößt, wird dies nicht erkannt.
2. Folgen Sie Chrome DevTools, um komplexe INP-Probleme zu entdecken
Die Entwicklertools in Google Chrome bieten viele Informationen darüber, was auf Ihrer Seite passiert.
Auf der Registerkarte DevTools „Performance“ können Sie eine Aufzeichnung einer Interaktion erstellen und diese dann analysieren.
- Öffnen Sie die Registerkarte DevTools-Leistung.
- Klicken Sie auf die Schaltfläche Aufnahme starten.
- Klicken Sie auf ein UI-Element auf der Seite.
- Stoppen Sie die Aufnahme.
- Öffnen Sie die Spur „Interaktionen“ des Leistungsprofils.
- Überprüfen Sie die „Hauptspur“, um die ausgeführte CPU-Arbeit zu sehen, einschließlich der spezifischen Aufgaben, die für die Verzögerung verantwortlich sind.
Jede laufende Arbeit am Hauptfaden blockiert die nächste Farbe.
Ein Screenshot von Chrome DevTools, August 2023
Die DevTools-Daten sind unglaublich detailliert und geben Ihnen alle Informationen, die Sie benötigen, um diese Interaktion zu optimieren.
Es funktioniert sowohl für einfache Seiten als auch für komplexe Benutzerabläufe oder Seiten, die eine Anmeldung erfordern.
Als nächstes müssen Sie die Daten manuell erfassen und mithilfe von Versuch und Irrtum ermitteln, mit welchen UI-Elementen Sie interagieren möchten.
3. Drilldown zu präziseren Interaktionsverzögerungen mit Lighthouse User Flows
Jetzt, da Sie Seitenelemente manuell identifiziert haben, ist es an der Zeit, das Lighthouse-Tool von Google zu nutzen, das auch das Testen von Benutzerströmen und das Messen von INP unterstützt.
Lighthouse bietet eine präzisere Analyse der Interaktionsverzögerungen als die Registerkarte DevTools-Leistung.
Sie können Lighthouse über Chrome DevTools ausführen und manuell mit Seitenelementen interagieren oder Code schreiben, um die Interaktionen zu automatisieren, damit Sie Ihre Site später einfach erneut testen können.
Ein Screenshot von Lighthouse, August 2023
4. Interaktion mit nächsten Malproblemen beheben
Nachdem Sie die Interaktion identifiziert haben, die eine Verzögerung verursacht, können Sie sie in DevTools replizieren und ein Leistungsprofil mit Details darüber erstellen, was genau behoben werden muss.
Sie müssen mit Ihrem Entwicklungsteam oder Website-Plattformanbieter zusammenarbeiten, um diese Probleme zu beheben.
Häufige INP-Probleme umfassen Code von Drittanbietern, der die CPU blockieren könnte, oder die Leistung eines benutzerdefinierten Schiebereglers oder Menüs muss möglicherweise optimiert werden.
Wie ein INP-Problem behoben werden kann, hängt stark von der Art des Problems ab.
Der einfache Weg: Real User Monitoring (RUM)
Mit Real User Monitoring können Sie detaillierte Daten sammeln und genau sehen, welche spezifischen Seiteninteraktionen zu Interaktionsverzögerungen geführt haben.
In Echtzeit.
Um INP-Werte einfach zu reduzieren:
- Verwenden Sie RUM, um langsame Seitenelemente automatisch aufzudecken.
- Sehen Sie schnell die Seitenelemente, die am häufigsten zu langsamen Interaktionen führen.
- Nehmen Sie Ihre Änderungen vor.
Dieser Screenshot des DebugBear RUM-Produkts zeigt, wie verschiedene Benutzer mit verschiedenen Seitenelementen interagieren und wie sie dadurch unterschiedliche Eingabeverzögerungen erfahren.
Ein Screenshot von DebugBear.com , August 2023
Tools zur Überwachung echter Benutzer liefern auch Details zu bestimmten Fällen langsamer Benutzererfahrungen.
Dies kann Ihnen helfen, den Kontext zu verstehen, in dem die Verzögerung aufgetreten ist, und erleichtert die Replikation und Behebung des Problems.
Zum Beispiel können einige UI-Elemente nur auf bestimmten Bildschirmgrößen sichtbar sein oder bestimmte Interaktionen können in einigen Browsern nur langsam sein.
Ein Screenshot von DebugBear.com , August 2023
Real User Monitoring liefert detaillierte Daten über langsame Interaktionen auf Ihrer Website.
Es ist auch den Google-Daten am nächsten, da Google seine Messwerte auch von echten Nutzern sammelt. Komplexe User Journeys und eingeloggte Erlebnisse können nachverfolgt werden.
Echte Benutzerüberwachungstools erfordern jedoch normalerweise kostenpflichtige Tools, und Sie müssen ein Snippet auf Ihrer Website installieren.
Sie können DebugBear 14 Tage lang kostenlos testen.
Einfache und konsistente Überwachung der Interaktion mit der nächsten Farbe
Sammeln Sie echte Benutzerdaten zu INP und anderen wichtigen Web-Vitals, indem Sie sich für eine kostenlose 14-Tage-Testversion von DebugBear anmelden.
Mit dieser kostenlosen Testversion können Sie:
- Sofort die Auswirkungen Ihrer Optimierungen sehen, anstatt 28 Tage auf Google zu warten.
- Verfolgen Sie die Leistung auf Ihrer gesamten Website.
- Identifizieren Sie stark frequentierte Seiten, auf denen Benutzer langsame Interaktionen erleben.
- Sehen Sie, wie sich die Leistung weltweit, geräteübergreifend und über verschiedene Seitentypen auf Ihrer Website unterscheidet.
Probieren Sie DebugBear kostenlos aus
Bildnachweis
Ausgewähltes Bild: Bild von DebugBear. Verwendung mit Genehmigung.