Cumulative Layout Shift (CLS) ist ein stabiler Core Web Vitals-Messwert. Er ist ein wichtiger, nutzerorientierter Messwert zum Messen der visuellen Stabilität. Er hilft zu bestimmen, wie oft Nutzer unerwartete Layoutverschiebungen erleben. Ein niedriger CLS-Wert sorgt für eine ansprechende Seite.
Unerwartete Layoutverschiebungen können die Nutzererfahrung in vielerlei Hinsicht beeinträchtigen. Beispielsweise verlieren Nutzer beim Lesen ihre Position beim Lesen, wenn sich der Text plötzlich bewegt, oder dazu, dass Nutzer auf den falschen Link oder die falsche Schaltfläche klicken. In einigen Fällen kann dies schwerwiegende Schäden verursachen.
Eine unerwartete Verschiebung von Seiteninhalten tritt normalerweise auf, wenn Ressourcen asynchron geladen werden oder wenn DOM-Elemente der Seite dynamisch vor vorhandenem Inhalt hinzugefügt werden. Die Ursache für die Bewegung kann ein Bild oder Video mit unbekannten Abmessungen, eine Schriftart, die größer oder kleiner als ihr Fallback gerendert wird, oder eine Drittanbieter-Anzeige oder ein Drittanbieter-Widget, dessen Größe sich dynamisch ändert, sein.
Unterschiede zwischen der Funktionsweise einer Website bei der Entwicklung und der Art und Weise, wie sie für die Nutzer empfunden wird, verschlimmern dieses Problem. Beispiel:
- Personalisierte Inhalte oder Inhalte von Drittanbietern verhalten sich in der Entwicklung und in der Produktion oft unterschiedlich.
- Testbilder befinden sich oft bereits im Browsercache des Entwicklers, aber das Laden dauert länger.
- Lokal ausgeführte API-Aufrufe verlaufen oft so schnell, dass unbemerkte Verzögerungen bei der Entwicklung in der Produktion erheblich beeinträchtigt werden können.
Der Cumulative Layout Shift (CLS)-Messwert hilft Ihnen dabei, dieses Problem zu beheben. Er misst, wie oft es bei echten Nutzern auftritt.
Was ist CLS?
CLS ist ein Maß für den größten Burst von Layout Shift Scores für jede unerwartete Layoutverschiebung, die während der Lebensdauer einer Seite auftritt.
Ein Layout Shift tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten wechselt. Weitere Informationen dazu, wie diese Verschiebungen gemessen werden, finden Sie unter Wert der Layoutverschiebung.
Ein Burst von Layoutverschiebungen wird als Sitzungsfenster bezeichnet, wenn eine oder mehrere einzelne Layoutverschiebungen in kurzer Folge mit weniger als einer Sekunde zwischen den einzelnen Schichten innerhalb eines maximalen Zeitraums von 5 Sekunden auftreten.
Der größte Burst ist das Sitzungsfenster mit der maximalen kumulativen Punktzahl aller Layoutverschiebungen innerhalb dieses Fensters.
Was ist ein guter CLS-Wert?
Für eine gute Nutzerfreundlichkeit muss eine Website einen CLS-Wert von 0.1 oder weniger haben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, empfehlen wir, das 75. Perzentil der Seitenladevorgänge zu messen, aufgeschlüsselt nach Mobilgeräten und Computern.
Weitere Informationen zur Forschung und Methodik hinter dieser Empfehlung finden Sie unter Grenzwerte für Core Web Vitals-Messwerte definieren.
Layoutänderungen im Detail
Layoutverschiebungen werden von der Layout Instability API definiert, die layout-shift-Einträge meldet, wenn ein im Darstellungsbereich sichtbares Element seine Startposition zwischen zwei Frames ändert (z. B. seine obere und linke Position im standardmäßigen Schreibmodus). Elemente, deren Startposition sich ändert, werden als instabile Elemente betrachtet.
Layoutverschiebungen treten nur dann auf, wenn vorhandene Elemente ihre Startposition ändern. Wenn ein neues Element in das DOM aufgenommen wird oder die Größe eines vorhandenen Elements geändert wird, zählt dies nur dann als Layout Shift, wenn die Änderung dazu führt, dass andere sichtbare Elemente ihre Startposition ändern.
Layout Shift-Wert
Zur Berechnung des Layout Shift-Werts berücksichtigt der Browser die Größe des Darstellungsbereichs und die Bewegung instabiler Elemente im Darstellungsbereich zwischen zwei gerenderten Frames. Der Layout Shift-Wert ist das Produkt von zwei Maßen dieser Bewegung: dem Auswirkungsanteil und dem Entfernungsanteil.
layout shift score = impact fraction * distance fraction
Einschlagsanteil
Der Auswirkungsanteil gibt an, wie sich instabile Elemente auf den Darstellungsbereich zwischen zwei Frames auswirken.
Der Anteil der Auswirkungen für einen bestimmten Frame ist eine Kombination der sichtbaren Bereiche aller instabilen Elemente für diesen und den vorherigen Frame, als Anteil der Gesamtfläche des Darstellungsbereichs.
Dieses Bild zeigt ein Element, das in einem Frame die Hälfte des Darstellungsbereichs einnimmt. Im nächsten Frame wird das Element um 25% der Höhe des Darstellungsbereichs nach unten verschoben. Das rot gestrichelte Rechteck gibt den sichtbaren Bereich des Elements in beiden Frames an, was in diesem Fall 75% des gesamten Darstellungsbereichs ausmacht. Der Anteil an der Auswirkung beträgt daher 0.75.
Entfernungsanteil
Der andere Teil der Layout-Shift-Punktgleichung misst die Entfernung, die instabilen Elemente relativ zum Darstellungsbereich verschoben wurden. Der Distanzanteil ist die größte horizontale oder vertikale Entfernung, die ein instabiles Element im Frame verschoben hat, geteilt durch die größte Dimension des Darstellungsbereichs (Breite oder Höhe, je nachdem, welcher Wert größer ist).
In diesem Beispiel ist die größte Dimension des Darstellungsbereichs die Höhe und das instabile Element wurde um 25% der Höhe des Darstellungsbereichs verschoben. Damit beträgt der Abstandsanteil 0.25.
Ein Anteil an der Wirkung von 0.75 und ein Anteil von 0.25 für die Entfernung ergeben einen Layoutverschiebungswert von 0.75 * 0.25 = 0.1875.
Beispiele
Das nächste Beispiel zeigt, wie sich das Hinzufügen von Inhalten zu einem vorhandenen Element auf den Layout Shift-Wert auswirkt:
In diesem Beispiel ändert sich die Größe des grauen Felds, aber seine Startposition ändert sich nicht. Daher ist es kein instabiles Element.
Die Schaltfläche „Click Me!“ war zuvor nicht im DOM enthalten, daher ändert sich ihre Startposition auch nicht.
Die Startposition des grünen Felds ändert sich zwar, es wurde jedoch teilweise aus dem Darstellungsbereich verschoben und der unsichtbare Bereich wird bei der Berechnung des Auswirkungsanteils nicht berücksichtigt. Die Gesamtheit der sichtbaren Bereiche für den grünen Rahmen in beiden Frames (dem rot gestrichelten Rechteck) entspricht der Fläche des grünen Rahmens im ersten Frame – 50% des Darstellungsbereichs. Der Anteil an den Auswirkungen liegt bei 0.5.
Der Distanzanteil wird durch den blauen Pfeil dargestellt. Das grüne Feld wurde um etwa 14% des Darstellungsbereichs nach unten verschoben, der Abstandsanteil beträgt also 0.14.
Der Layout Shift-Wert ist 0.5 x 0.14 = 0.07.
Das folgende Beispiel zeigt, wie sich mehrere instabile Elemente auf den Layout Shift-Wert einer Seite auswirken:
Das erste Element in der Liste („Cat“) ändert seine Startposition zwischen den Frames nicht. Daher ist es stabil. Die neuen Elemente, die der Liste hinzugefügt wurden, waren zuvor nicht im DOM enthalten. Daher ändern sich ihre Startpositionen auch nicht. Die Elemente mit den Bezeichnungen "Hund", "Pferd" und "Zebra" verschieben jedoch ihre Startpositionen, wodurch sie instabil werden.
Das rot gestrichelte Rechteck stellt wieder die Fläche dieser drei instabilen Elemente vor und nach der Verschiebung dar, die in diesem Fall etwa 60% der Fläche des Darstellungsbereichs ausmacht (Auswirkungsanteil von 0.60).
Die Pfeile geben die Abstände an, die instabile Elemente von ihren Startpositionen aus verschoben wurden. Das durch den blauen Pfeil gekennzeichnete Element „Zebra“ wurde um etwa 30% der Höhe des Darstellungsbereichs am stärksten verschoben. Damit wird der Distanzanteil in diesem Beispiel 0.3.
Der Layout Shift-Wert ist 0.60 x 0.3 = 0.18.
Erwartete und unerwartete Layoutverschiebungen
Nicht alle Layout Shifts sind schlecht. Viele dynamische Webanwendungen ändern häufig die Startposition von Elementen auf der Seite. Ein Layout Shift ist nur dann schlecht, wenn Nutzende es nicht erwarten.
Vom Nutzer initiierte Layout Shifts
Layoutänderungen, die als Reaktion auf Nutzerinteraktionen (z. B. Klicken oder Tippen auf einen Link, Drücken einer Schaltfläche oder Eingabe in ein Suchfeld) auftreten, sind in der Regel problemlos möglich, solange sie nah genug an der Interaktion sind, dass die Beziehung für den Nutzer klar ist.
Wenn beispielsweise eine Nutzerinteraktion eine Netzwerkanfrage auslöst, die einige Zeit in Anspruch nehmen kann, sollten Sie sofort ein wenig Platz erstellen und einen Ladeindikator einblenden, um eine unangenehme Layoutverschiebung nach Abschluss der Anfrage zu vermeiden. Wenn der Nutzer nicht merkt, dass etwas geladen wird, oder er nicht weiß, wann die Ressource bereit ist, versucht er, während des Wartens auf etwas anderes zu klicken. Das andere Element könnte sich dann aus ihm herausbewegen, wenn das erste fertig geladen wurde.
Für Layoutverschiebungen, die innerhalb von 500 Millisekunden nach der Nutzereingabe auftreten, wird das Flag hadRecentInput gesetzt, sodass Sie sie aus Berechnungen ausschließen können.
Animationen und Übergänge
Animationen und Übergänge sind eine gute Möglichkeit, Inhalte auf der Seite zu aktualisieren, ohne den Nutzer zu überraschen. Inhalte, die sich plötzlich und unerwartet auf der Seite verschieben, beeinträchtigen die Nutzererfahrung fast immer. Inhalte, die sich jedoch allmählich und natürlich von einer Position zur anderen bewegen, können dem Nutzer häufig dabei helfen, die Situation besser zu verstehen und ihn zwischen Statusänderungen zu führen.
Berücksichtige unbedingt die prefers-reduced-motion-Browsereinstellungen, da Animationen bei einigen Websitebesuchern zu Gesundheits- oder Aufmerksamkeitsproblemen führen können.
Mit der CSS-Eigenschaft transform können Sie Elemente animieren, ohne Layoutverschiebungen auszulösen:
- Verwenden Sie
transform: scale(), anstatt die Attributeheightundwidthzu ändern. - Wenn Sie Elemente verschieben möchten, verwenden Sie
transform: translate(), anstatt die Eigenschaftentop,right,bottomoderleftzu ändern.
CLS messen
CLS kann im Lab oder in der Praxis gemessen werden und ist in folgenden Tools verfügbar.
Außendienst-Tools
- Bericht zur Nutzererfahrung in Chrome
- PageSpeed Insights
- Search Console (Core Web Vitals-Bericht)
web-vitals-JavaScript-Bibliothek
Lab-Tools
Layoutverschiebungen in JavaScript messen
Wenn Sie Layoutverschiebungen in JavaScript messen möchten, verwenden Sie die Layout Instability API.
Das folgende Beispiel zeigt, wie Sie einen PerformanceObserver erstellen, um layout-shift-Einträge in der Console zu protokollieren:
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
CLS in JavaScript messen
Zum Messen der CLS in JavaScript gruppieren Sie die unerwarteten layout-shift-Einträge, die Sie in Sitzungen angemeldet haben, und berechnen Sie den Wert für die maximale Sitzung. Eine Referenzimplementierung finden Sie im Quellcode der web vitals-JavaScript-Bibliothek.
In den meisten Fällen ist der CLS-Wert beim Entladen der Seite der endgültige CLS-Wert für diese Seite. Im nächsten Abschnitt werden jedoch einige wichtige Ausnahmen aufgeführt. Die JavaScript-Bibliothek web vitals berücksichtigt diese so oft wie möglich im Rahmen der Web APIs.
Unterschiede zwischen Messwert und API
- Wenn eine Seite im Hintergrund geladen oder im Hintergrund ausgeführt wird, bevor der Browser Inhalte überträgt, sollte kein CLS-Wert gemeldet werden.
- Wenn eine Seite aus dem Back-Forward-Cache wiederhergestellt wird, sollte ihr CLS-Wert auf null zurückgesetzt werden, da dies für Nutzer ein klarer Seitenbesuch ist.
- Die API meldet keine
layout-shift-Einträge für Verschiebungen, die innerhalb von iFrames auftreten. Für den Messwert ist dies jedoch der Fall, weil sie Teil der Nutzererfahrung auf der Seite sind. Dies kann sich als Unterschied zwischen CrUX und RUM anzeigen lassen. Um den CLS-Wert korrekt zu messen, müssen Sie iFrames einbeziehen. Subframes können die API verwenden, um ihrelayout-shift-Einträge zur Aggregation an den übergeordneten Frame zu melden.
Neben diesen Ausnahmen ist CLS noch komplexer, da die gesamte Lebensdauer einer Seite gemessen wird:
- Nutzer lassen einen Tab möglicherweise sehr lange geöffnet – Tage, Wochen oder sogar Monate. Tatsächlich kann es vorkommen, dass Nutzende einen Tab niemals schließen.
- Auf mobilen Betriebssystemen führen Browser in der Regel keine Unload-Callbacks für Tabs im Hintergrund aus, was es schwierig macht, den „endgültigen“ Wert zu melden.
In solchen Fällen sollte das System den CLS immer dann melden, wenn eine Seite im Hintergrund ausgeführt wird und nicht, wenn sie entladen wird. Das Ereignis visibilitychange deckt beide Szenarien ab. Die Analysesysteme, die diese Daten empfangen, müssen dann den endgültigen CLS-Wert im Back-End berechnen.
Anstatt sich alle diese Fälle auswendig zu lernen, können Entwickler die web-vitals-JavaScript-Bibliothek verwenden, um CLS zu messen. Dabei werden alle hier genannten Ereignisse mit Ausnahme des iFrame-Case berücksichtigt:
import {onCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);
CLS verbessern
Weitere Informationen dazu, wie Sie Layoutverschiebungen vor Ort erkennen und anhand von Labdaten optimieren können, finden Sie in unserem Leitfaden zur Optimierung von CLS.
Weitere Ressourcen
- Anleitung zum Minimieren von Layout Shifts für Google Publisher-Tags
- Understanding Cumulative Layout Shift von Annie Sullivan und Steve Kobes bei #PerfMatters (2020)
Änderungsprotokoll
Gelegentlich werden Fehler in den APIs entdeckt, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst. Aus diesem Grund müssen manchmal Änderungen vorgenommen werden, die sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen zeigen lassen.
Alle Änderungen an der Implementierung oder an der Definition dieser Messwerte werden in diesem Änderungsprotokoll aufgeführt.
Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.