Core Web Vitals 101 & Entwicklungsleitfaden

Was passiert und ändert sich?

Im Mai 2021 leitete Google die Einführung eines Kernalgorithmus-Updates ein, das den Signalen für das Seitenranking einen zusätzlichen Faktor hinzufügt, der sich auf die Seitengeschwindigkeit und die Benutzererfahrung bezieht. Die Einführung des Core-Updates erstreckte sich ebenfalls bis Juni 2021 und machte dies zu einer der größten Core-Änderungen in der Geschichte. Core Web Vitals wird ältere Ranking-Signale wie eine HTTPS-sichere Website, Mobilfreundlichkeit und nicht aufdringliche Interstitials als Suchsignale in den Ranking-Faktor der Gesamtseitenerfahrung aufnehmen.

Die drei Komponenten von Core Web Vitals umfassen Folgendes:

• Largest Contentful Paint (LCP) : misst die wahrgenommene Ladegeschwindigkeit und markiert den Punkt in der Seitenladezeitachse, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde. Um eine gute Benutzererfahrung zu bieten, sollten Websites danach streben, dass LCP innerhalb der ersten 2,5 Sekunden nach Beginn des Ladevorgangs der Seite auftritt.
• First Input Delay (FID) : Misst die Reaktionsfähigkeit und quantifiziert die Erfahrung, die Benutzer empfinden, wenn sie versuchen, zum ersten Mal mit der Seite zu interagieren. Um eine gute Benutzererfahrung zu bieten, sollten Websites danach streben, eine FID von weniger als 100 Millisekunden zu haben .
• Cumulative Layout Shift (CLS) : Misst die visuelle Stabilität und quantifiziert das Ausmaß der unerwarteten Layoutverschiebung des sichtbaren Seiteninhalts. Um eine gute Benutzererfahrung zu bieten, sollten Websites einen CLS-Wert von weniger als 0,1 anstreben .

Offizielles Release Statement von Google zu diesem Algorithmus-Update: https://developers.google.com/search/blog/2020/11/timing-for-page-experience

Darüber hinaus veröffentlichte Google weitere Informationen über die CLS-Änderung, da sie die Leistung während des Rollouts weiterhin überwachten. Infolgedessen erhielten viele Websites aufgrund der jüngsten Änderungen eine günstigere Bewertung und vermieden viel Entwicklungsarbeit, um ihre Website-Layouts anzupassen. Wie immer können sich diese Änderungen ändern, daher empfehlen wir, CWVs als Teil einer wöchentlichen oder monatlichen Checkliste zu überwachen.

Was wissen wir über das Ranking-Update?

Wie bei den meisten Google-Algorithmus-Updates gibt es viele Unbekannte in Bezug auf die Auswirkungen auf die aktuelle Suchlandschaft. Wir wissen, dass dies ein Faktor für das Seitenranking sein wird. Wir wissen jedoch nicht, wie viel Prozent eines Faktors oder wie stark er innerhalb des Algorithmus sein wird. Ein weiterer unbekannter Faktor wird sein, ob sich direkte Konkurrenten anpassen oder Maßnahmen ergreifen, um ihre Website(s) zu aktualisieren, um sich an die neuen Faktoren zu halten. Basierend auf dem Verhalten der Mitbewerber kann sich dies wiederum positiv oder negativ auf die Platzierungen Ihrer Website im Vergleich zu diesen Konkurrenten auswirken. Was wir wissen, ist, dass Google weiterhin Inhalte, die es als wertvoll oder relevant für die Nutzer ansieht, gegenüber schnelleren Websites mit schwachem Inhalt priorisiert.

Da Google mehr Informationen über das Update anbietet, bestätigten sie tatsächlich, dass relevante Inhalte eines der wichtigsten Elemente in den Suchrankings bleiben.

„Unsere Systeme werden weiterhin Seiten mit den besten Informationen insgesamt priorisieren, auch wenn einige Aspekte der Seitenerfahrung unterdurchschnittlich sind. Eine gute Seitenerfahrung setzt großartige, relevante Inhalte nicht außer Kraft.“

Wie bereite ich mich auf das Google Page Experience Ranking Update vor?

Aufgrund der unbekannten Faktoren im Zusammenhang mit diesem Update und der 6-monatigen Ankündigungsfrist von Google scheint die Änderung zu signalisieren, dass dies zu einem Ranking-Faktor werden wird. Daher wird dringend empfohlen, dass sowohl SEO- als auch Entwicklungsteams die aktuelle Core Web Vitals-Leistung Ihrer Website(s) überprüfen und schnell Maßnahmen ergreifen, um die Probleme im Zusammenhang mit der Aktualisierung des Ranking-Signals zu überprüfen und zu aktualisieren. Es ist wichtig sicherzustellen, dass Sie proaktiv und nicht reaktiv sind, da es einige Zeit dauern kann, bis sich jeder Rückgang im Ranking wieder erholt. Wir alle wissen, dass SEO ein langes Spiel ist!

Wie erkennt man Website-Probleme, nächste Schritte basierend auf den Problemen und zusätzliche Tipps?

Core Web Vitals sind im Google Search Console-Konto Ihrer Website unter „Verbesserungen“ aufgeführt. Darüber hinaus gibt es einen übergreifenden Überblick im Abschnitt „Übersicht“ des Kontos, der ähnlich wie im Beispiel unten aussehen wird (wahrscheinlich treten einige Abweichungen auf, da Ihr Konto von den potenziellen Problemen Ihrer Website abhängt). Es gibt auch einen Abschnitt für Desktop und Mobile. In diesem Beispiel betrachten wir mobilbezogene Probleme.

Da alle Websites ab September 2020 zuerst auf Mobilgeräte indexiert werden, empfehlen wir, zuerst Entwicklungszeit für Probleme mit Mobilgeräten aufzuwenden. Wenn Ihre Website responsiv ist, werden sich Updates, die Sie auf Mobilgeräten vornehmen, wahrscheinlich auch positiv auf Desktop auswirken. Darüber hinaus kann es je nach Größe der Website eine Menagerie von „mangelhaften“ und „verbesserungsbedürftigen“ Problemen geben. Wir empfehlen dringend, sich auf die „schlechten“ URLs zu konzentrieren, da „verbesserungsbedürftige“ Elemente möglicherweise den Aufwand im Vergleich zur Wirkung oder der 80/20-Regel nicht wert sind, auf die wir später eingehen werden!

Bei der Überprüfung der in der Google Search Console beschriebenen URLs, die keine optimale Leistung zeigen, ist es wichtig, im Hinterkopf zu behalten, was John Mueller von Google darüber enthüllt hat , wie Google in einigen Fällen den Kern-Web-Vitals-Score als Durchschnitt mehrerer Seiten berechnen kann:

Das ist die Frage:

„Wenn dies zu einem Ranking-Signal wird … wird es auf Seiten- oder Domain-Ebene sein?“

Müller antwortete:

„… Was mit den Felddaten passiert, ist, dass wir nicht für jede Seite Datenpunkte haben.

Wir brauchen also meistens eine Art Gruppierung einzelner Seiten.

Und je nach Datenmenge, die wir haben, kann das eine Gruppierung der gesamten Website (Art der Domain) sein.

… Ich denke, im Chrome User Experience Report verwenden sie den Ursprung, der die Subdomain und das Protokoll dort wäre.

Das wäre also eine Art übergreifende Art der Gruppierung.

Und wenn wir mehr Daten für einzelne Teile einer Website haben, dann versuchen wir, diese zu nutzen.

Und ich glaube, das sehen Sie auch in der Suchkonsole, wo wir wie eine URL zeigen und sagen … es gibt so viele andere Seiten, die damit verbunden sind. Und das ist eine Art Gruppierung, die wir dort verwenden würden.“

Sie fragen sich vielleicht, warum wir das gleich zu Beginn des Gesprächs über Core Web Vitals ansprechen? Mueller erklärt, dass der Google Search Console-Bericht zu URL-Problemen versucht, Seiten mit denselben Problemen in eine Gruppierung zu kategorisieren und zu melden. Leider haben sich diese Gruppierungen von URLs in der Praxis für einige Websites unserer Erfahrung nach als wenig hilfreich erwiesen.

Gelegentlich werden wir die URLs überprüfen, die im Bericht der Google Search Console als „schlechte“ Leistung angegeben wurden, nur um festzustellen, dass dieselben Seiten beim Test mit Lighthouse und Page Speed ​​Insights scheinbar einwandfrei sind.

Zusammenfassend empfehlen wir bei der Überprüfung von URL-Problemen, die im Google Search Console-Bericht beschrieben werden, „es mit Vorsicht zu genießen“. Unsere beste Vermutung ist, dass Google beabsichtigt, den „Web Vitals“-Score für Seiten auf der Grundlage eines 28-tägigen Verlaufs tatsächlicher Browsing-Daten aus der realen Welt („Felddaten“ in der Google-Sprache) zu ordnen. Diese realen Daten werden jedoch wahrscheinlich von der gesamten Domain (oder „Ursprung“ in der Google-Sprache) aggregiert, wenn die Seite nicht stark frequentiert wird. Obwohl die Search Console nützlich sein wird, um festzustellen, dass Ihre Web-Vitals etwas TLC benötigen, verlassen Sie sich bei Ihrem Audit nicht darauf. Achten Sie außerdem darauf, Labordaten (einzelne Ergebnisse von in Echtzeit getesteten Seiten) im Gegensatz zu Felddaten (die sich auf mehrere Seiten beziehen können und sich immer über ein 28-tägiges Rückblickfenster erstrecken) zu überprüfen, wenn Sie Korrekturen durchführen, prüfen oder validieren.

Wenn Sie wissen, dass Sie ein Problem haben, und die Quellseite(n) nicht bestimmen können, beginnen Sie mit Labortests von Beispielseiten für jede Ihrer Kernvorlagen. Zum Beispiel die Homepage, eine Produktseite, eine Kategorieseite, ein Blogartikel usw. Oft können strukturelle Probleme in jeder Instanz eines bestimmten Seitentyps gefunden und von einem Webentwickler einmalig durch ein Update des zugrunde liegenden Templates behoben werden Code. Wenn dies nicht ausreicht, sollten Sie eine ähnliche Analyse einer Teilmenge einzelner Seiten in Betracht ziehen, beginnend mit den am häufigsten besuchten. Ein Tool, das wir für diesen Prozess als nützlich empfunden haben, ist das Auditing von Core Web Vitals über Screaming Frog .

Anleitung zur Verbesserung der kumulativen Layoutverschiebung (CLS).

Cumulative Layout Shift (CLS) misst die Summe aller individuellen Layout-Shift-Scores für jeden unerwarteten Layout-Shift, der während der gesamten Lebensdauer der Seite auftritt. Eine Layoutverschiebung tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.

Google empfiehlt die folgende Anleitung zur Verbesserung von CLS für die meisten Websites, indem Sie sich an einige Leitprinzipien halten:

• Fügen Sie Ihren Bildern und Videoelementen immer Größenattribute hinzu oder reservieren Sie anderweitig den erforderlichen Platz mit so etwas wie CSS-Feldern für das Seitenverhältnis . Dieser Ansatz stellt sicher, dass der Browser während des Ladens des Bildes die richtige Menge an Speicherplatz im Dokument zuweisen kann. Beachten Sie, dass Sie dieses Verhalten in Browsern, die Feature-Richtlinien unterstützen, auch mit der Feature-Richtlinie für undimensionierte Medien erzwingen können.
• Fügen Sie niemals Inhalte über vorhandenen Inhalten ein, außer als Reaktion auf eine Benutzerinteraktion. Dadurch wird sichergestellt, dass auftretende Layoutverschiebungen erwartet werden.
• Ziehen Sie Transformationsanimationen gegenüber Animationen von Eigenschaften vor, die Layoutänderungen auslösen. Animieren Sie Übergänge so, dass Kontext und Kontinuität von Zustand zu Zustand bereitgestellt werden.

Google empfiehlt die Verwendung der folgenden Vorgehensweise zum Analysieren, Testen und Bereitstellen von Updates auf der gesamten Website:

• Sobald Sie Seiten identifiziert haben, die bearbeitet werden müssen (siehe oben), verwenden Sie PageSpeed ​​Insights , um Labor- und Feldprobleme auf einer Seite zu diagnostizieren.
• Sind Sie bereit, Ihre Website lokal im Labor zu optimieren? Verwenden Sie Lighthouse und Chrome DevTools , um Core Web Vitals zu messen und umsetzbare Anleitungen dazu zu erhalten, was genau zu beheben ist. Die Web Vitals Chrome-Erweiterung kann Ihnen eine Echtzeitansicht der Metriken auf dem Desktop geben.
• Suchen Sie nach Anleitung? web.dev/measure kann Ihre Seite messen und Ihnen anhand von PSI-Daten einen priorisierten Satz von Leitfäden und Codelabs zur Optimierung anzeigen.
• Verwenden Sie schließlich Lighthouse CI für Pull-Anforderungen, um sicherzustellen, dass es keine Regressionen in Core Web Vitals gibt, bevor Sie eine Änderung in der Produktion bereitstellen.

Einen ausführlichen Einblick in die Verbesserung von CLS finden Sie unter Optimieren von CLS .

Leitfaden zur Verbesserung von Largest Contentful Paint (LCP).

Die Largest Contentful Paint (LCP)-Metrik gibt die Renderzeit des größten Bild- oder Textblocks an, der im Ansichtsfenster sichtbar ist.

Wie derzeit in der Largest Contentful Paint API spezifiziert , sind die Elementtypen, die für Largest Contentful Paint berücksichtigt werden:

• <img> Elemente
• <image> -Elemente innerhalb eines <svg> -Elements
• <video> -Elemente (das Posterbild wird verwendet)
• Ein Element mit einem Hintergrundbild, das über die Funktion url() geladen wird (im Gegensatz zu einem CSS-Farbverlauf )
• Elemente auf Blockebene, die Textknoten oder andere untergeordnete Textelemente auf Inline-Ebene enthalten

Google empfiehlt die folgende Anleitung zur Verbesserung des LCP, das hauptsächlich von vier Faktoren beeinflusst wird:

• Langsame Serverantwortzeiten
• Rendering-blockierendes JavaScript und CSS
• Ressourcenladezeiten
• Clientseitiges Rendern

Detaillierte Informationen zur Verbesserung des LCP finden Sie unter Optimieren des LCP . Weitere Hinweise zu individuellen Leistungstechniken, die auch LCP verbessern können, finden Sie unter:

• Wenden Sie sofortiges Laden mit dem PRPL-Muster an
• Optimieren des kritischen Rendering-Pfads
• Optimieren Sie Ihr CSS
• Optimieren Sie Ihre Bilder
• Webfonts optimieren

Optimieren Sie Ihr JavaScript (für vom Client gerenderte Websites)

Wichtige Erkenntnisse der Entwicklung von Core Web bis heute

Unser Entwicklungsteam hat erkannt, dass ein Großteil der Aktualisierung des Core Web Vitals-Rankings umfangreiche Tests auf der Entwicklungsseite erfordern wird, um sicherzustellen, dass die vorgenommenen Aktualisierungen den von Google festgelegten Standards entsprechen.

In zahlreichen Fällen für kleinere Sites liegen viele dieser Elemente außerhalb der Kontrolle der Webentwickler. Beispielsweise wird die Servergeschwindigkeit weitgehend vom Hosting-Provider kontrolliert, und bei Shared Hosting (wie WP Engine oder Shopify) haben Entwickler keine Kontrolle. In ähnlicher Weise haben vorkonfigurierte Site-Designs oft Javascript und CSS, die das Rendering blockieren, „eingebacken“. In diesen Fällen ist es möglicherweise nicht praktikabel, viele der gemeldeten Probleme anzugehen. Aus diesen Gründen ist eine kritische Analyse erforderlich, um den Schnittpunkt zu bestimmen, (1) welche Probleme die größten Auswirkungen haben und (2) welche Probleme durch Code verursacht werden, den das Entwicklungsteam ändern kann und sollte.

Nachdem wir mit der Überprüfung von Core Web Vitals-Problemen bei mehreren unserer Kunden begonnen haben, haben wir festgestellt, dass viele der von Google bereitgestellten Tools noch unausgereift sind, da sie in der Lage sind, Probleme (z. B. Verschiebungen beim Laden von Inhalten) zu identifizieren, dies jedoch nicht sind immer hilfreich, um die genaue Ursache zu lokalisieren. Obwohl wir davon ausgehen, dass dies in kommenden Iterationen dieser Tools (insbesondere in Chrome Dev Tools) ausgereift sein wird, haben wir festgestellt, dass möglicherweise alternative Diagnoseverfahren erforderlich sind, um bestimmte Probleme zu identifizieren.

Wir haben auch festgestellt, dass die Arbeit an der Verbesserung dieser Metriken ähnlich ist wie die Verbesserung der Seitengeschwindigkeitsleistung als Ganzes. Wir raten in jedem Fall davon ab, eine „perfekte Punktzahl“ anzustreben. Stattdessen gilt die 80/20-Regel. Wenn Sie sich mit den niedrig hängenden Früchten befassen, werden Sie wahrscheinlich eine deutliche Verbesserung Ihrer Kennzahlen feststellen. Danach wird die Verbesserung zeitaufwändiger, teurer und weniger wirkungsvoll.

Grundlegende Anleitungen wie der Vorschlag von Google, platzsparendes Markup oder CSS in alle Bild-, Video- und Containerelemente einzufügen, sind im Allgemeinen gute Ratschläge, die einfach zu implementieren sind. Andere Probleme sind schwieriger aufzuspüren, und wenn sie keine übermäßigen Auswirkungen auf Ihre Metriken haben (wie von einigen der vorgeschlagenen Tools gemeldet), ist es möglicherweise am besten, diese Probleme beiseite zu legen.

Die Site-Architektur spielt auch eine wichtige Rolle bei der relativen Leichtigkeit, mit der diese Punkte angegangen werden können. Beliebte Website-Plattformen wie Shopify und WordPress, zusammen mit grafischen Seitenerstellern wie WP Bakery und Shogun, handhaben einen Teil des HTML-Generierungsprozesses „hinter den Kulissen“. Probleme, die von Page Builder-Komponenten verdeckt werden (z. B. bestimmtes Lazy-Loading von Bildern), können ohne grundlegende Änderungen an der Website oder Unterstützung der Plattform, des Designs oder des Plugin-/App-Anbieters möglicherweise nicht ohne Weiteres behoben werden.

Das obige Konzept erstreckt sich auch auf Dritte, die Javascript verwenden, um Widgets träge in Ihre Seite zu laden (z. B. eingebettete Anmeldeformulare von E-Mail-Plattformen wie Klaviyo). In einigen Fällen ist es eine praktikable Lösung, ein Containerelement in der richtigen und expliziten Größe um den Einbettungscode der betreffenden Komponente zu platzieren. In anderen Fällen muss der Anbieter möglicherweise selbst eine Änderung vornehmen.

Wir empfehlen, jeden Behebungsprozess mit schwerwiegenden Problemen zu beginnen, die durch Änderungen an leicht zugänglichen zentralen Websitevorlagen (z. B. Produktseiten, Produktsammlungsseiten usw.) behoben werden können. Dies ermöglicht oft eine Codeänderung, um die Ergebnisse auf Dutzenden oder Hunderten von Website-Seiten zu verbessern. Wenden Sie sich als Nächstes der Startseite zu, da dies fast immer die am häufigsten besuchte Seite der Website ist. Priorisieren Sie schließlich andere einzelne Seiten, die behoben werden müssen, basierend auf der Schwere des Problems und der Sichtbarkeit der Seite.

Wie bei der Verbesserung der Seitengeschwindigkeit ist die Verwaltung von Core Web Vitals wichtig, aber es ist nur eine Variable unter vielen im Ranking-Algorithmus von Google, und SEO muss auch gegen andere Website- und Geschäftsprioritäten abgewogen werden, die um Zeit und Budget konkurrieren.