Google CLS-Score – Cumulative Layout Shift verbessern

Waren Sie jemals in einer Situation, in der der Checkout-Button verschwindet, wenn Sie versuchen, eine Bestellung aufzugeben? 

Ja! Es ist frustrierend.

Die Wahrheit ist, es passiert viel zu oft und mit zu vielen von uns.

Glücklicherweise priorisiert Google wie immer die Benutzererfahrung über alles andere.  

Aus diesem Grund hat Google seit 2021 drei neue Leistungsmetriken als Teil seiner zentralen Web-Vitals eingeführt.

Die Core Web Vitals wurden entwickelt, um die Ladegeschwindigkeit, Interaktivität und visuelle Stabilität einer Seite zu messen.

Drei Metriken stellen diese dar:

1. Größte zufriedene Farbe (LCP)

2. Erste Eingangsverzögerung (FID)

3. Kumulative Layoutverschiebung (CLS)

Lassen Sie uns CLS aus Sicht der Benutzer und Webmaster (SEO) verstehen.

Was ist eine kumulative Layoutverschiebung?

Der Cumulative Layout Shift (CLS) repräsentiert die visuelle Stabilität einer Website.

Es misst die Anzahl unbedeutender Layoutverschiebungen auf einer Seite.

Unerwartete Layoutverschiebungen sind das Ergebnis einer Webseite, die sich ohne Benutzereingabe um sich selbst bewegt.

Google CLS ist eine Art Indikator (Signal) für Sie, um das Problem zu beheben, indem gemessen wird, wie oft eine unerwartete Bewegung von Seitenelementen die Benutzererfahrung beeinträchtigt . 

Eine Verschiebung in einem Layout kann jederzeit auftreten, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.

Versuchen wir, die allgemeine Bedeutung zu verstehen und in einfachen Worten „Cumulative Layout Shift“ zu definieren:

Kumulativ ist eine Mengenzunahme. 

Das Layout ist der Rahmen

Eine Verschiebung ist eine Positionsänderung

Einfach ausgedrückt ist die kumulative Layout-Verschiebung die Gesamtsumme aller einzelnen Frame-Änderungen an den Positionen des Website-Designs.

Der Standard-CLS-Score sollte unter 0,1 liegen.

Ein guter Schwellenwert, um dies zu messen, ist das 75. Perzentil der Seitenladevorgänge auf Mobil- und Desktop-Geräten.

Im obigen Bild ist klar, dass  laut Google:

1. Wenn der CLS-Score weniger als 0,1 beträgt, ist dies ein gutes Signal. Das bedeutet, dass Ihre Website keine Probleme mit Layoutänderungen hat.

2. Wenn der CLS-Wert zwischen 0,1 und 0,25 liegt, bedeutet dies, dass Ihre Website eine gewisse Verbesserung des visuellen Layouts benötigt.

3. Wenn der CLS-Score mehr als 0,25 beträgt, handelt es sich um ein schlechtes Signal, was auch bedeutet, dass die Bewegung des visuellen Elements sehr häufig auftritt.

Wie wird die kumulative Layoutverschiebung berechnet?

Google berechnet den CLS einer Seite, indem es den Impact-Anteil und den Entfernungsanteil für jede unerwartete Layout-Verschiebung berechnet.

Schlaganteil von CLS

Es misst den Platz, den ein instabiles Element in einem Darstellungsbereich zwischen zwei Frames einnimmt.

Formel zur Berechnung des Impact Fraction für CLS

Um den Layout Shift Score zu berechnen, benötigen wir Impact Fraction.

Wie berechnet man Impact Fraction für CLS?

Aufprallanteil = [Aufprallbereich] / [Ansichtsfensterbereich]  Aufprallanteil = [330 x 490] / [375 x 667]  Aufprallanteil = [161700] / [250125]  Aufprallanteil = 0,645

Distanzanteil von CLS

Es ist das Maß für den Platz, um den sich das Seitenelement von der ursprünglichen Position zur endgültigen Position bewegt hat, die sich im Grunde im Layout verschiebt.

Um übermäßige Straffälle zu vermeiden, verschieben Sie große Elemente um einen kleinen Betrag, der durch die Einführung von Distance Fraction berücksichtigt wird.

Formel zur Berechnung des Distanzanteils für CLS

Wie berechnet man den Distance Fraction für CLS?

Entfernungsanteil = [Max. Bewegungsabstand] / [Höhe des Sichtfensters] Abstandsbruchteil = [120] / [667] Abstandsbruchteil = 0,179

Formel zur Berechnung des Google CLS-Scores

Der kumulative Layout-Score wird berechnet, indem der Aufprallanteil mit dem Entfernungsanteil multipliziert wird:

Kumulative Layout-Verschiebung (CLS) = Impact Fraction x Distance Fraction 

CLS = 0,645 x 0,179  CLS = 0,1154 .

Der CLS-Score steigt mit zunehmendem Aufprall und zunehmendem Distanzanteil weiter an. 

Kumulativer Layout Shift an einem einfachen Beispiel. 

Sie haben eine Website besucht und etwas Interessantes zum Lesen gesehen.

Sie fahren fort, auf den Link zu klicken.  

Aber gerade als Sie auf den Link klicken wollten, verschiebt er sich auf der Webseite um einen halben Zoll nach unten, und Sie klicken schließlich auf eine Anzeige, die direkt darüber platziert wurde. 

Klingt unfair, oder?

Es ist eine unerwartete Layoutverschiebung.

Es bedeutet nur, dass Sie auf eine unerwünschte Zielseite umgeleitet werden, von der aus Sie zur ursprünglichen Webseite zurückkehren müssen.

Wir haben auch etwas, das als erwartete Layoutverschiebung bekannt ist. 

Es passiert, wenn Sie auf etwas auf einer Webseite klicken, und es ändert das aktuelle Layout der Seite.

Zum Beispiel gehen Sie zu einem Blog und suchen nach einer bestimmten Information.

Sobald Sie den Themennamen in die Suchleiste eingeben, wird ein bestimmter Blog-Beitrag abgerufen, in dem Sie die erforderlichen Informationen finden, oder es werden einige Blog-Beiträge zum Thema angezeigt.

Dies ist ein erwartetes Ergebnis der Webseite und kann als erwartete Layoutänderung betrachtet werden. 

Was verursacht CLS-Probleme? 

Laut Google, dem Suchmaschinengiganten, gibt es 5 mögliche Gründe für die kumulative Layoutverschiebung :

Bilder und Videos ohne Abmessungen

Es ist ratsam, immer die Breite und Höhe Ihrer Bilder und Videos anzugeben.

Sie können auch CSS-Felder für das Seitenverhältnis verwenden, damit der Browser während des Ladens des Bildes den richtigen Platz auf der Webseite zuweisen kann.

Anzeigen, Einbettungen und Iframes ohne Dimensionen

Anzeigengrößen können den Umsatz durch eine hohe CTR steigern.

Dies kann jedoch die Qualität der Benutzererfahrung beeinträchtigen, indem der Inhalt auf der Seite nach unten verschoben wird. 

Diese Layoutverschiebung kann abgemildert werden, indem Platz für Anzeigenflächen reserviert wird, Verschiebungen beseitigt werden, indem die größtmögliche Größe für die Anzeigenfläche reserviert wird, oder indem die bestmögliche Größe der Anzeigenfläche basierend auf historischen Daten ausgewählt wird. 

Dynamisch injizierter Inhalt

Vermeiden Sie es, neue Inhalte über bestehenden Inhalten einzufügen, es sei denn, es handelt sich um eine Reaktion auf eine Benutzerinteraktion.

Dadurch wird sichergestellt, dass alle auftretenden Layoutverschiebungen immer erwartet werden, anstatt dass das Bild oder der Text unerwartet verschoben werden.

Webfonts, die FOIT/FOUT verursachen

Versuchen Sie, font:display-Werte mit Ihren benutzerdefinierten Schriftarten wie auto, swap, block, fallback und optional zu verwenden, um unnötige Layoutverschiebungen zu vermeiden.

Um sicherzugehen, dass es keine Layout-Verschiebung gibt, verwenden Sie font:display zusammen mit link rel=preload.

Jedes Element, das diese Schriftart verwendet, wird ausgeblendet, bis das Schriftart-Asset vollständig heruntergeladen wurde, bekannt als FOIT (Flash of Invisible Text).

Die Anzeige einer Fallback-Schriftart im Schriftartstapel, bis die benutzerdefinierte geladen wird, wird als FOUT (Flash of Unstyled Text) bezeichnet.

Aktionen, die auf eine Netzwerkantwort warten, bevor DOM aktualisiert wird

Wählen Sie immer „Transform“-Animationen für Animationen von Eigenschaften, die Layoutänderungen auslösen.

Wie wird der Google CLS-Score durch Werbung beeinflusst?

Um mit Anzeigen fertig zu werden, die CLS verursachen, müssen Sie das Element, in dem die Anzeige erscheinen soll, formatieren.

Wenn Sie also div,  die Bild- oder Videoabteilung in einem WordPress oder einem beliebigen Website-Element mit einer bestimmten Höhe und Breite formatieren, wird Ihre Anzeige nur auf die genannten Abmessungen beschränkt.

Wenn ein Element, das eine Anzeige enthält, die Anzeige nicht anzeigt, können Sie es so einstellen, dass eine alternative Banneranzeige oder ein Platzhalterbild die freie Stelle füllen kann.

Alternativ kann eine Anzeige bei bestimmten Layouts die gesamte Zeile über einer Spalte im rechten oder linken Bundsteg der Seite füllen. 

Wenn die Seite nicht angezeigt wird, gibt es keine Verschiebung und es macht keinen Unterschied auf Mobilgeräten oder Desktops.

Beachten Sie jedoch, dass dies vom Themenlayout abhängt und Sie es testen müssen, wenn es ein Problem mit dem Anzeigeninventar gibt. 

Wie kann CLS während der Webentwicklung rutschen?

Google CLS kann durch die Entwicklungsphase schlüpfen.

Folgendes kann passieren.

Viele der zum Rendern einer Webseite erforderlichen Assets werden in den Cache eines Browsers geladen. 

Wenn ein Entwickler die in Entwicklung befindliche Seite das nächste Mal besucht, wird er keine Layoutänderung bemerken, da die Seitenelemente bereits heruntergeladen sind. 

Es wird daher empfohlen, eine Messung im Feld oder im Labor durchzuführen. 

Kumulativer Layout-Shift-Test

Kumulative Layout-Shift-Performance-Website-Metriken können auf eine der folgenden Arten gemessen werden:

Feldwerkzeuge

Im Feld: auf echten Benutzern, die tatsächlich mit der Seite interagieren. Es kann mit den folgenden Feldwerkzeugen gemessen werden:

Bericht zur Chrome-Benutzererfahrung

Es stellt Messwerte zur Benutzererfahrung bereit, die zeigen, wie reale Chrome-Benutzer beliebte Ziele im Web erleben. 

PageSpeed-Einblicke

Dieses Tool analysiert den Inhalt einer Webseite und generiert Vorschläge, um diese Seite schneller als zuvor zu machen.

Search Console (Core Web Vitals-Bericht)

Die Search Console  zeigt die Leistung Ihrer Seiten basierend auf realen Nutzungsdaten (manchmal auch als Felddaten bezeichnet).

Laborwerkzeuge

Im Labor: Die Verwendung von Tools zum Simulieren eines Seitenaufbaus in einer kontrollierten Umgebung kann mit den folgenden Lab-Tools gemessen werden:

Chrome-Entwicklungstools

Chrome DevTools kann Ihnen dabei helfen, Seiten spontan zu bearbeiten und Probleme schnell zu diagnostizieren, wodurch Sie letztendlich bessere Websites schneller erstellen können.

Lighthouse

LightHouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Qualität von Webseiten.

Sie können es für jede Webseite ausführen, ob öffentlich oder mit Authentifizierung.

Es verfügt über Audits für Leistung, Zugänglichkeit, progressive Web-Apps, SEO und mehr.

WebseitenTest

Führen Sie einen kostenlosen Website-Geschwindigkeitstest aus der ganzen Welt mit echten Browsern bei Verbraucherverbindungsgeschwindigkeiten mit detaillierten Optimierungsempfehlungen durch.

Laut web.dev; Achtung: Lab-Tools laden Seiten normalerweise in einer synthetischen Umgebung und messen nur Layoutverschiebungen während des Ladens der Seite.

Infolgedessen können die von Labortools für eine bestimmte Seite gemeldeten CLS-Werte niedriger sein als das, was echte Benutzer in der Praxis erfahren.

Schnellwerkzeuge zum Überprüfen der kumulativen Layoutverschiebung

1. CLS im GIF-Format von Defaced Tool von Chris Johnson zur Identifizierung des problematischen LS.

2. Kumulativer Layout-Shift-Rechner 

Fehler in CLS-Berechnungen

Google erhielt Rückmeldungen darüber, dass die CLS-Metrik nicht ausreicht, um lange geöffnete Webseiten zu messen, was sie mit niedrigeren Punktzahlen bestraft.

Google hat drei Lösungen zur Aktualisierung der CLS-Bewertung überprüft, sodass Sie sich keine Sorgen machen müssen, dass sich die CLS-Bewertungen aufgrund dieser Änderung verschlechtern.

Sitzungsfenster zum Messen von CLS

Google entschied sich für einen Session-Window-Ansatz, um CLS zu messen.

Die Messung der Seitenelemente wird in Sitzungsfenstern gemessen, die verschiedenen Teilen einer Webseite entsprechen, die ein Benutzer erreicht, wenn er die Webseite herunterscrollt.

Die Gesamtpunktzahl für jedes Sitzungsfenster ist die kumulative Layoutverschiebung, die Gesamtverschiebung der gesamten Seite.

Viele CLS-Ergebnisse werden sich ändern

Laut Google werden etwa 55 % der Webseiten keine Änderung ihrer kumulativen Layout-Shift-Werte feststellen. Nur etwa 42 % der Websites werden eine geringfügige Verbesserung der Punktzahl feststellen.

3 % der Webseiten mit unendlichem Scrollen oder Benutzeroberflächen-Handlern, die langsam auf Benutzerinteraktionen reagieren, werden eine gute Bewertung erhalten.

Update macht CLS-Ergebnisse genauer

Es ist ein Vorteil für Publisher, da das neue Bewertungssystem fairer wird, insbesondere für Webseiten, die lange geöffnet sind oder unendliches Scrollen verwenden und deshalb unfair bewertet wurden.

Da die Core Web Vitals-Metriken im Mai 2021 zu einem Ranking-Faktor werden, ist es eine wichtige Änderung, die in letzter Minute vorgenommen werden muss.