So verbessern Sie die Seitengeschwindigkeit, um die Core Web Vitals-Bewertung von Google zu bestehen
Dieser Beitrag wurde von DebugBear gesponsert. Die in diesem Artikel geäußerten Meinungen sind die eigenen des Sponsors.
Eine schnelle Website bietet den Benutzern ein angenehmeres Erlebnis und kann zu höheren Konversionsraten führen.
Aber auch die Website-Geschwindigkeit berücksichtigt Google im Rahmen der Core Web Vitals und nutzt sie als Rankingfaktor.
Erfahren Sie, wie die Core Web Vitals-Bewertung von Google funktioniert und was Sie tun können, um sicherzustellen, dass Ihre Website schnell geladen wird und nach dem Laden ein gutes Erlebnis bietet.
Was sind die wichtigsten Web-Vitals?
Die Core Web Vitals (CWV) von Google zielen darauf ab, die Website-Qualität und das Benutzererlebnis zu messen.
Zu diesem Zweck wurden mehrere neue Metriken entwickelt, die im Chrome-Browser erfasst werden können.
Drei dieser Metriken bilden die Core Web Vitals:
- Größte inhaltsreiche Farbe.
- Interaktion mit der nächsten Farbe.
- Kumulative Layoutverschiebung.
Größte inhaltsreiche Farbe
Die Largest Contentful Paint (LCP)-Metrik misst, wie schnell der größte einzelne Seiteninhalt auf der Seite erscheint, nachdem ein Besucher eine Seite geöffnet hat.
Ein Beispiel für das LCP können Sie in diesem DebugBear-Rendering-Page-Speed-Filmstreifen sehen, der zeigt, welche Inhalte für Benutzer zu verschiedenen Zeitpunkten sichtbar wären.
Hier werden Inhalte bereits nach 1,27 Sekunden angezeigt.
Das Bild rechts wird jedoch von Chrome als LCP-Element identifiziert und dieses Bild wird erst 2,33 Sekunden nach der Navigation angezeigt.
Der größte Contentful Paint steht in engem Zusammenhang mit zwei anderen Web Vitals-Metriken, die nicht Teil der Core Web Vitals sind: Time to First Byte und First Contentful Paint.
Zeit bis zum ersten Byte
Time to First Byte (TTFB) misst, wie schnell der Server auf die Anfrage nach dem HTML-Dokument reagiert, das zu Beginn des Seitenladevorgangs geladen wird.
Ohne das HTML-Dokument kann der Browser keinen Inhalt anzeigen oder andere Ressourcen laden.
Erste inhaltsreiche Farbe
Der First Contentful Paint (FCP) untersucht, wie schnell Inhalte auf der Seite erscheinen.
Mit Inhalt ist hier meist Text oder ein Bild gemeint.
Wenn dieser Meilenstein jedoch von der Seite erreicht wird, ist der Großteil des Inhalts für den Besucher möglicherweise immer noch nicht verfügbar.
Der FCP kann erst nach dem TTFB-Meilenstein stattfinden. Der größte Contentful Paint wiederum ist immer größer oder gleich dem First Contentful Paint.
Das bedeutet, dass TTFB und FCP dem LCP untere Grenzen setzen und ein Blick auf diese beiden Metriken Ihnen helfen kann, das Ladeverhalten Ihrer Website zu verstehen.
Interaktion mit der nächsten Farbe
Interaction to Next Paint (INP) misst, wie schnell eine Website auf Benutzereingaben reagiert.
Dabei wird im Allgemeinen die langsamste Interaktion eines Benutzers auf einer Webseite betrachtet.
INP meldet, wie viel Zeit zwischen zwei Zeitstempeln während einer Seiteninteraktion verstrichen ist:
- Die Benutzereingabe, zum Beispiel ein Klick oder Tastendruck.
- Die nächste visuelle Aktualisierung („Anstrich“) der Website (ob sich der Inhalt ändert oder nicht, spielt keine Rolle).
Dieser Filmstreifen zeigt beispielsweise, wie auf die Schaltfläche „Details anzeigen“ geklickt wird.
Der Klick wird durch JavaScript-Code auf der Seite verarbeitet und die Ausführung dieses Codes dauert einige Zeit. Während der Klick verarbeitet wird, bleibt die Benutzeroberfläche der Website eingefroren. Sobald die CPU-Verarbeitung abgeschlossen ist, rendert der Browser den neuen Inhalt.
Technisch gesehen gehört Interaction to Next Paint noch nicht zu den Core Web Vitals, aber Google hat angekündigt, dass INP im März 2024 die ältere First Input Delay-Metrik ersetzen wird.
Kumulative Layoutverschiebung
Die Cumulative Layout Shift (CLS)-Metrik prüft, ob der Seiteninhalt nach seiner Anzeige optisch stabil ist.
Eine instabile Benutzeroberfläche verwirrt Benutzer und kann zu unbeabsichtigten Seiteninteraktionen führen.
Dieser Screenshot zeigt ein Beispiel für eine Layoutverschiebung, die während des Seitenladevorgangs auftritt.
Das Bild oben rechts ist zunächst noch nicht sichtbar, da der Browser es noch herunterlädt. Sobald das Bild erscheint, wird die Größe des Bildelements aktualisiert. In diesem Fall wird das Element größer und drückt daher den darunter liegenden Inhalt auf der Seite nach unten.
CLS wird „kumulativ“ genannt, weil die Auswirkungen verschiedener Schichten addiert werden.
Ursprünglich erstreckte sich dies über die gesamte Zeitspanne, in der die Seite geöffnet war, was jedoch zu Unrecht dazu führte, dass lang laufende Einzelseitenanwendungen eine schlechte Bewertung erhielten. Google ist nun auf die Fenster-CLS-Definition umgestiegen, die nur ein Zeitfenster von bis zu fünf Sekunden berücksichtigt.
Was ist die Core Web Vitals-Bewertung von Google?
Google führt eine Core Web Vitals-Bewertung Ihrer Website durch und verwendet die Ergebnisse als Ranking-Signal.
Wenn Ihre Website die Core Web Vitals nicht erfüllt, erhalten Sie in verschiedenen Tools eine Warnung, zum Beispiel die Warnung „Core Web Vitals Assessment: Failed“ in Page Speed Insights.
Die Daten für die Core Web Vitals-Bewertung stammen aus dem Chrome User Experience Report (CrUX), der echte Benutzerdaten von Chrome-Benutzern sammelt.
Zusätzlich zu PageSpeed Insights überprüft die Google Search Console auch Ihre Web-Vitaldaten und erklärt, welche URLs nicht als „gut“ gelten.
Was macht eine gute Core Web Vitals-Bewertung aus?
Google definiert für jede Metrik die Schwellenwerte „Gut“, „Schlecht“ und „Verbesserungsbedürftig“.
| Metrisch | Gut | Muss verbessert werden | Arm |
| Größte inhaltsreiche Farbe | Unter 2,5 s | Unter 4 s | Über 4 s |
| Interaktion mit der nächsten Farbe | Unter 200 ms | Unter 500 ms | Über 500 ms |
| Kumulative Layoutverschiebung | Unter 0,1 | Unter 0,25 | Über 0,1 |
Um den maximalen Rankingvorteil zu erzielen, sollte Ihre Website bei allen drei Core Web Vitals mit „Gut“ bewertet werden. Wenn Ihre Website schlechter wird, wirkt sich dies allmählich auf Ihr Ranking aus, bis die Schwelle „Schlecht“ erreicht ist.
So beschleunigen Sie Largest Contentful Paint (LCP)
Um Ihr LCP zu verbessern, müssen die Hauptinhalte Ihrer Website schneller geladen werden.
- Führen Sie einen kostenlosen Website-Geschwindigkeitstest durch, um herauszufinden, was die Ursache für Verzögerungen beim Hauptinhalt Ihrer Webseite ist.
- Erhalten und überprüfen Sie die Erkenntnisse aus dem visuellen Filmstreifen und den allgemeinen Leistungsmetriken, um herauszufinden, was Ihre nächsten Schritte sind.
- Nutzen Sie diese Erkenntnisse, um die Ladegeschwindigkeit Ihrer Seite zu optimieren.
Sie können dann tiefer in die spezifische Metrik eintauchen, indem Sie im Testergebnis auf den Metriktitel „Größter Contentful Paint“ klicken.
Dies zeigt Ihnen:
- Welches Seitenelement ist für den größten Contentful Paint verantwortlich?
- Wenn es sich bei dem LCP um ein Bild handelt, wie lautet die Bild-URL und welche Anforderungspriorität wurde von den Browsern verwendet.
- Wenn das LCP ein Bild ist, von welchen anderen Anforderungen die Bilddatei abhängt.
Anforderungswasserfälle zeigen an, welche Ressourcen über das Netzwerk geladen wurden und wie lange das Laden dauerte. In diesem Fall zeigt der teilweise Anforderungswasserfall, der sich auf das LCP-Bild konzentriert, dass das Bild davon abhängt, dass zuerst eine große JavaScript-Datei geladen wird. Dies ist ein häufiges Problem und Sie sollten versuchen, LCP-Bilder direkt aus dem HTML-Dokument zu laden.
Das DebugBear-Testergebnis bietet außerdem viele automatisierte Empfehlungen und ordnet diese nach erwarteter Auswirkung.
” alt=”Screenshot von DebugBear, November 2023″ width=”624″ height=”303″ sizes=”(max-width: 624px) 100vw, 624px” srcset=”https://behmaster.ir/wp-content/uploads/2023/11/localimages/picture8-654e137b342ac-sej.png 624w, https://behmaster.ir/wp-content/uploads/2023/11/localimages/picture8-654e137b342ac-sej-480×233.png 480w” src=”https://behmaster.ir/wp-content/uploads/2023/11/localimages/picture8-654e137b342ac-sej.png”>
So verbessern Sie die Interaktion mit Next Paint (INP)
Nur 64 % der mobilen Websites bieten derzeit ein gutes INP-Erlebnis, was es zu einer wichtigen Kennzahl für die Optimierung macht.
Die INP-Metrik kann schwer zu debuggen sein, da sie von einer Benutzerinteraktion abhängt, die nicht so einfach getestet werden kann.
Sie können Seiteninteraktionen manuell testen und sie mithilfe des Chrome DevTools-Leistungsprofils messen.
Dies funktioniert gut, wenn Sie wissen, mit welchen Seitenelementen Benutzer normalerweise interagieren. DevTools ist auch sehr hilfreich, wenn Sie eine langsame Interaktion identifiziert haben, da die Chrome-Entwicklertools Ihnen genau sagen, womit der Browser während dieser Interaktion Zeit verbringt.
Auch das INP-Debugger-Tool kann hilfreich sein, da es automatisch Interaktionen mit verschiedenen Seitenelementen simuliert. Sie müssen lediglich eine Website-URL eingeben.
Allerdings kann der INP-Debugger nicht alle Interaktionen identifizieren, insbesondere wenn sie Teil eines längeren Benutzerflusses sind. Hier ist die Erfassung des Real User Monitoring (RUM) hilfreich, da Sie so Ihre Optimierungen genau an der richtigen Stelle fokussieren können.
Mit RUM-Daten können Sie genau sehen, mit welchen Seitenelementen die meisten Benutzer interagieren und ob es zu Verzögerungen bei der Interaktion kommt.
Sie können auch eine RUM-Aufschlüsselung in seine verschiedenen Komponenten sehen:
- Eingabeverzögerung.
- Bearbeitungszeit.
- Präsentationsverzögerung.
Die Eingabeverzögerung misst, wie lange nach der Benutzerinteraktion der Browser mit der Verarbeitung der Benutzereingabe begann. Eine hohe Eingabeverzögerung weist darauf hin, dass Hintergrundaufgaben oder vorherige Ereignishandler die Benutzerinteraktion blockieren.
Die Verarbeitungszeit misst die tatsächliche Zeit, die für die Bearbeitung der Benutzereingabe aufgewendet wird. Wenn dies langsam ist, müssen Ihre Entwickler prüfen, welcher Code als Reaktion auf die Interaktion ausgeführt wird und wie dieser Code optimiert werden kann.
Die Präsentationsverzögerung misst, wie viel Zeit zwischen der Bearbeitung des Ereignisses und dem nächsten Mal verstrichen ist. Diese Zahl kann hoch sein, wenn das Rendern der Seite komplex ist oder wenn während der Verarbeitung der Interaktion andere CPU-Verarbeitungsvorgänge in der Warteschlange standen.
So reduzieren Sie kumulative Layoutverschiebungen
Ähnlich wie bei INP kann die kumulative Layoutverschiebung schwer zu beheben sein, da sie häufig auftritt, wenn der Benutzer auf der Seite nach unten scrollt oder wenn zusätzlicher Inhalt angezeigt wird, nachdem der Benutzer auf ein UI-Element geklickt hat.
Wenn die Layoutverschiebung beim ersten Laden der Seite auftritt, ist dies leicht zu erkennen:
- Führen Sie einen Seitengeschwindigkeitstest durch.
- Klicken Sie auf den Metriktitel „Kumulative Layoutverschiebung“, um zu sehen, welche Seitenelemente verschoben wurden.
- Behebung des Elements, das die Verschiebung verursacht.
Hier wurden beispielsweise zusätzliche Inhalte geladen, wodurch sich das Layout änderte.
So beheben Sie Layoutverschiebungen
Um Layoutverschiebungen zu beheben, stellen Sie sicher, dass Platzhalter in der richtigen Größe vorhanden sind, wenn einige Inhalte erst später im Seitenladevorgang angezeigt werden.
Sie können auch daran arbeiten, sicherzustellen, dass die anderen Inhalte früher geladen werden – wenn der Co ntent ist bereit, sobald die Seite mit dem Rendern beginnt, dann gibt es keine Layoutverschiebung.
Wenn Ihr CLS-Score schwer zu reproduzieren ist, können Sie die DebugBear-Überwachung echter Benutzer verwenden, um zu sehen, was zu Layoutverschiebungen bei Ihren echten Benutzern führt.
Zusätzlich zur Betrachtung allgemeiner Distributionen können Sie sich auch die individuellen Benutzererfahrungen ansehen und sehen, was zu Layoutverschiebungen bei ihnen geführt hat.
Überwachen Sie die Seitengeschwindigkeit und die wichtigsten Web-Vitalwerte
Wenn Sie Schwierigkeiten haben, die Core Web Vitals-Bewertung zu bestehen, kann Ihnen die DebugBear-Überwachung dabei helfen, Probleme auf Ihrer Website zu erkennen und sicherzustellen, dass Sie bei Problemen benachrichtigt werden.
Starten Sie einfach eine kostenlose Testversion und geben Sie die URLs Ihrer Website ein. Sehen Sie alle Kennzahlen zur Seitengeschwindigkeit auf einen Blick im Dashboard. DebugBear verfolgt außerdem die Lighthouse-Ergebnisse und die Google-Daten von echten Nutzern, die sich auf das Ranking auswirken.
Zusätzlich zum kontinuierlichen Testen Ihrer Website in einer kontrollierten Laborumgebung können Sie auch ein Analyse-Snippet auf Ihrer Website installieren, um echte Benutzererfahrungen zu verfolgen.
Zusätzlich zur allgemeinen Web Vitals-Übersicht können Sie mit DebugBear RUM die Benutzererfahrungen nach Seitengeschwindigkeit, Land oder Webbrowser aufschlüsseln.
Mit detaillierten Laborberichten und echten Nutzerdaten können Sie den Google CrUX-Daten einen Schritt voraus sein, die sich auf das Ranking auswirken und mit einer Verzögerung von 28 Tagen gemeldet werden. DebugBear bietet aussagekräftige Einblicke in Ihre Core Web Vitals und hilft Ihnen bei der Kommunikation mit dem Rest Ihres Teams und Managements.
Sind Sie bereit, mit der Optimierung Ihrer Website zu beginnen? Melden Sie sich bei DebugBear an und erhalten Sie die Daten, die Sie für die Bereitstellung großartiger Benutzererlebnisse benötigen.
Bildnachweise
Ausgewähltes Bild: Bild von DebugBear. Mit Genehmigung verwendet.
