Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

Unerwartete Layoutänderungen können die Nutzererfahrung auf viele Arten beeinträchtigen. So kann es beispielsweise passieren, dass Nutzer beim Lesen den Überblick verlieren, wenn sich der Text plötzlich bewegt, oder dass sie auf den falschen Link oder die falsche Schaltfläche klicken. In einigen Fällen kann dies zu schweren Schäden führen.

Unerwartete Bewegungen von Seiteninhalten treten in der Regel auf, wenn Ressourcen asynchron geladen werden oder DOM-Elemente der Seite dynamisch vor vorhandenen Inhalten hinzugefügt werden. Die Ursache für Layoutverschiebungen können Bilder oder Videos mit unbekannten Abmessungen, Schriftarten, die größer oder kleiner als der ursprüngliche Fallback dargestellt werden, oder Anzeigen oder Widgets von Drittanbietern sein, die ihre Größe dynamisch anpassen.

Unterschiede zwischen der Funktionsweise einer Website in der Entwicklung und der Nutzererfahrung 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 Browser-Cache des Entwicklers, das Laden für den Endnutzer dauert jedoch länger.
• Lokal ausgeführte API-Aufrufe sind oft so schnell, dass unmerkliche Verzögerungen in der Entwicklung in der Produktion erheblich werden können.

Mit dem Messwert „Cumulative Layout Shift“ (CLS) können Sie dieses Problem angehen, indem Sie messen, wie oft es bei echten Nutzern auftritt.

Was ist CLS?

Die CLS ist ein Maß für die größten Bursts von Layout Shift-Werten für jede unerwartete Layoutverschiebung, die während des gesamten Lebenszyklus einer Seite auftritt.

Eine Layoutverschiebung tritt jedes Mal auf, wenn sich die Position eines sichtbaren Elements von einem gerenderten Frame zum nächsten ändert. Einzelheiten zur Berechnung der einzelnen Layout-Shift-Werte finden Sie weiter unten in diesem Leitfaden.

Eine Reihe von Layoutänderungen, die als Sitzungsfenster bezeichnet wird, tritt auf, wenn eine oder mehrere einzelne Layoutänderungen in schneller Folge auftreten, wobei zwischen den einzelnen Änderungen weniger als eine Sekunde und die Gesamtdauer des Fensters maximal 5 Sekunden beträgt.

Der größte Ausschlag ist das Sitzungsfenster mit dem höchsten kumulativen Wert aller Layout Shifts innerhalb dieses Fensters.

Was ist ein guter CLS-Wert?

Für eine gute Nutzerfreundlichkeit sollten Websites einen CLS-Wert von 0,1 oder weniger anstreben. Damit Sie dieses Ziel bei den meisten Nutzern erreichen, eignet sich zur Messung das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobil- und Desktopgeräten.

Weitere Informationen zur Forschung und Methodik hinter dieser Empfehlung finden Sie unter Grenzwerte für Core Web Vitals-Messwerte definieren.

Layout Shifts im Detail

Layout Shifts werden von der Layout Instability API definiert, die layout-shift-Einträge jedes Mal meldet, wenn sich ein im Darstellungsbereich sichtbares Element zwischen zwei Frames seine Startposition ändert (z. B. seine obere und linke Position im standardmäßigen Schreibmodus). Solche Elemente werden als instabile Elemente betrachtet.

Beachten Sie, dass Layoutverschiebungen nur auftreten, wenn vorhandene Elemente ihre Startposition ändern. Wenn dem DOM ein neues Element hinzugefügt oder die Größe eines vorhandenen Elements geändert wird, gilt das nicht als Layoutänderung, sofern die Änderung nicht dazu führt, dass andere sichtbare Elemente ihre Startposition ändern.

Layout-Shift-Ergebnis

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 Wert für die Layoutverschiebung ist das Produkt aus zwei Maßen für diese Bewegung: dem Auswirkungsanteil und dem Abstandsanteil (beide unten definiert).

layout shift score = impact fraction * distance fraction

Anteil der Auswirkungen

Der Auswirkungsanteil gibt an, wie sich instabile Elemente auf den Darstellungsbereich zwischen zwei Frames auswirken.

Der Einflussfaktor für einen bestimmten Frame ist eine Kombination aus den sichtbaren Bereichen aller instabilen Elemente für diesen Frame und den vorherigen Frame als Bruchteil der Gesamtfläche des Darstellungsbereichs.

Auf dem vorherigen Bild ist ein Element zu sehen, das in einem Frame die Hälfte des Darstellungsbereichs einnimmt. Im nächsten Frame wird das Element dann um 25 % der Höhe des Darstellungsbereichs nach unten verschoben. Das rote, gepunktete Rechteck zeigt die Gesamtheit des sichtbaren Bereichs des Elements in beiden Frames an, was in diesem Fall 75% des gesamten Darstellungsbereichs ausmacht. Der Aufschlagsanteil beträgt also 0.75.

Entfernungsanteil

Der andere Teil der Gleichung für den Layout-Shift-Wert misst den Abstand, um den sich instabile Elemente relativ zum Darstellungsbereich verschoben haben. Der Abstandsbruchteil ist der größte horizontale oder vertikale Abstand, den ein instabiles Element im Frame zurückgelegt hat, geteilt durch die größte Dimension des Darstellungsbereichs (Breite oder Höhe, je nachdem, was größer ist).

Im vorherigen Beispiel ist die Höhe die größte Darstellungsbereichsdimension und das instabile Element hat sich um 25 % der Darstellungsbereichshöhe verschoben. Der Abstandsbruchteil beträgt also 0,25.

In diesem Beispiel beträgt der Anteil der betroffenen Elemente also 0.75 und der Anteil der Entfernung 0.25. Der Wert für die Layoutverschiebung ist also 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 Kastens, aber seine Startposition ändert sich nicht. Es handelt sich also nicht um ein instabiles Element.

Die Schaltfläche „Click Me!“ war zuvor nicht im DOM enthalten, sodass sich auch ihre Startposition nicht ändert.

Die Startposition der grünen Box ändert sich jedoch. Da sie jedoch teilweise aus dem Darstellungsbereich verschoben wurde, wird der unsichtbare Bereich bei der Berechnung des Aufschlagsanteils nicht berücksichtigt. Die Vereinigung der sichtbaren Bereiche für das grüne Feld in beiden Frames (dargestellt durch das rote gepunktete Rechteck) entspricht dem Bereich des grünen Felds im ersten Frame – 50% des Darstellungsbereichs. Der Auswirkungsanteil ist 0.5.

Der Entfernungsanteil wird durch den lilafarbenen Pfeil dargestellt. Die grüne Box wurde um etwa 14% des Darstellungsbereichs nach unten verschoben, sodass der Entfernungsanteil 0.14 beträgt.

Das Layout-Shift-Ergebnis ist 0.5 x 0.14 = 0.07.

Im folgenden Beispiel wird gezeigt, wie sich mehrere instabile Elemente auf die Layoutbewertung einer Seite auswirken:

Im ersten Frame des vorherigen Bildes sind vier Ergebnisse einer API-Anfrage für Tiere zu sehen, die in alphabetischer Reihenfolge sortiert sind. Im zweiten Frame werden der sortierten Liste weitere Ergebnisse hinzugefügt.

Die Startposition des ersten Elements in der Liste („Katze“) ändert sich zwischen den Frames nicht, sodass es stabil ist. Die neuen Elemente, die der Liste hinzugefügt wurden, waren zuvor nicht im DOM. Daher ändern sich auch ihre Startpositionen nicht. Die Elemente mit den Labels „Hund“, „Pferd“ und „Zebra“ verschieben sich jedoch von ihrer Startposition, sodass sie instabile Elemente sind.

Die roten gepunkteten Rechtecke stellen wieder die Vereinigung der Vorher- und Nachher-Bereiche dieser drei instabilen Elemente dar, was in diesem Fall etwa 60 % der Fläche des Darstellungsbereichs entspricht (Auswirkungsanteil von 0.60).

Die Pfeile stellen die Entfernungen dar, die instabile Elemente von ihren Startpositionen verschoben haben. Das Element „Zebra“, das durch den blauen Pfeil dargestellt wird, hat sich am meisten bewegt, nämlich um etwa 30 % der Darstellungshöhe. Der Abstandsbruchteil in diesem Beispiel ist also 0.3.

Layout Shift-Wert ist 0.60 x 0.3 = 0.18.

Erwartete und unerwartete Layoutverschiebungen

Nicht alle Layoutänderungen sind schlecht. Tatsächlich ändern viele dynamische Webanwendungen häufig die Startposition von Elementen auf der Seite. Eine Layoutverschiebung ist nur dann schlecht, wenn der Nutzer sie nicht erwartet.

Vom Nutzer initiierte Layoutänderungen

Layoutänderungen, die auf Nutzerinteraktionen zurückzuführen sind (z. B. Klicken oder Tippen auf einen Link, Drücken einer Schaltfläche oder Eingeben in ein Suchfeld), sind in der Regel in Ordnung, solange die Änderung in unmittelbarem Zusammenhang mit der Interaktion steht und der Nutzer den Zusammenhang klar erkennt.

Wenn beispielsweise eine Nutzerinteraktion eine Netzwerkanfrage auslöst, die einige Zeit in Anspruch nimmt, sollten Sie sofort etwas Platz schaffen und einen Ladebalken anzeigen, um unnötige Layoutänderungen zu vermeiden, wenn die Anfrage abgeschlossen ist. Wenn der Nutzer nicht merkt, dass etwas geladen wird, oder nicht weiß, wann die Ressource bereit ist, versucht er möglicherweise, während des Wartens auf etwas anderes zu klicken – etwas, das sich unter Umständen bewegt.

Layoutänderungen, die innerhalb von 500 Millisekunden nach der Nutzereingabe auftreten, werden mit dem Flag hadRecentInput gekennzeichnet, damit sie von den Berechnungen ausgeschlossen werden können.

Animationen und Übergänge

Gut gemachte Animationen und Übergänge sind eine gute Möglichkeit, Inhalte auf der Seite zu aktualisieren, ohne die Nutzer zu überraschen. Inhalte, die sich auf der Seite abrupt und unerwartet bewegen, verursachen fast immer eine schlechte Nutzererfahrung. Inhalte, die sich jedoch allmählich und natürlich von einer Position zur nächsten bewegen, können Nutzern oft helfen, besser zu verstehen, was passiert, und sie zwischen Statusänderungen zu leiten.

Beachten Sie die prefers-reduced-motion-Browsereinstellungen, da einige Websitebesucher durch Animationen gesundheitliche Probleme oder Aufmerksamkeitsstörungen erleiden können.

Mit der CSS-Property transform können Sie Elemente animieren, ohne Layoutänderungen auszulösen:

• Anstatt die Properties height und width zu ändern, verwende transform: scale().
• Wenn du Elemente verschieben möchtest, solltest du die Eigenschaften top, right, bottom oder left nicht ändern und stattdessen transform: translate() verwenden.

CLS messen

Die CLS kann im Lab oder im Feld gemessen werden und ist in den folgenden Tools verfügbar:

Tools für die Arbeit im Außendienst

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals-Bericht)
• web-vitals JavaScript-Bibliothek

Lab-Tools

• Chrome-Entwicklertools
• Leuchtturm
• PageSpeed Insights
• WebPageTest

Layoutverschiebungen in JavaScript messen

Verwenden Sie die Layout Instability API, um Layoutverschiebungen in JavaScript zu messen.

Im folgenden Beispiel wird gezeigt, wie eine PerformanceObserver erstellt wird, um layout-shift-Einträge in der Konsole 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

Wenn Sie den CLS in JavaScript messen möchten, müssen Sie diese unerwarteten layout-shift-Einträge in Sitzungen gruppieren und den maximalen Sitzungswert berechnen. Im Quellcode der web vitals-JavaScript-Bibliothek finden Sie eine Referenzimplementierung zur Berechnung des CLS.

In den meisten Fällen ist der aktuelle CLS-Wert zum Zeitpunkt des Entladens der Seite der endgültige CLS-Wert für diese Seite. Es gibt jedoch einige wichtige Ausnahmen, die im nächsten Abschnitt aufgeführt sind. Die web vitals-JavaScript-Bibliothek berücksichtigt diese so weit wie möglich, innerhalb der Einschränkungen der Web-APIs.

Unterschiede zwischen dem Messwert und der API

• Wenn eine Seite im Hintergrund geladen wird oder in den Hintergrund verschoben wird, bevor der Browser Inhalte darstellt, sollte kein CLS-Wert erfasst werden.
• Wenn eine Seite aus dem Back-Forward-Cache wiederhergestellt wird, sollte der CLS-Wert auf null zurückgesetzt werden, da dies für Nutzer als eigenständiger Seitenaufruf gilt.
• Die API meldet keine layout-shift-Einträge für Verschiebungen innerhalb von Iframes, der Messwert hingegen schon, da sie Teil der Nutzerfreundlichkeit der Seite sind. Dies kann sich als Unterschied zwischen CrUX und RUM zeigen. Um den CLS korrekt zu messen, sollten Sie diese berücksichtigen. Subframes können die API verwenden, um ihre layout-shift-Einträge für die Aggregation an den übergeordneten Frame zu melden.

Zusätzlich zu diesen Ausnahmen ist CLS etwas komplexer, da damit die gesamte Lebensdauer einer Seite gemessen wird:

• Nutzer können einen Tab sehr lange geöffnet lassen – Tage, Wochen oder Monate. Es kann sogar sein, dass ein Nutzer nie einen Tab schließt.
• Unter mobilen Betriebssystemen führen Browser in der Regel keine Rückrufe zum Entladen von Seiten für Tabs im Hintergrund aus. Daher ist es schwierig, den „Endgültigen“ Wert zu erfassen.

In solchen Fällen sollte CLS jedes Mal erfasst werden, wenn eine Seite im Hintergrund ist, und zusätzlich jedes Mal, wenn sie entladen wird. Das visibilitychange-Ereignis deckt beide Szenarien ab. Analysesysteme, die diese Daten empfangen, müssen dann den endgültigen CLS-Wert im Backend berechnen.

Anstatt sich all diese Fälle selbst einzuprägen und damit zu kämpfen, können Entwickler die web-vitals JavaScript-Bibliothek verwenden, um den CLS zu messen. Diese berücksichtigt alle oben genannten Fälle mit Ausnahme des iFrames:

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 Layout Shifts in diesem Bereich identifizieren und diese mithilfe von Labdaten optimieren, finden Sie in unserem Leitfaden zur CLS-Optimierung.

Zusätzliche Ressourcen

• Anleitung zum Minimieren von Layoutverschiebungen
• Cumulative Layout Shift von Annie Sullivan und Steve Kobes bei #PerfMatters (2020)

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs gefunden, die zum Erfassen von Messwerten verwendet werden, und manchmal auch in den Definitionen der Messwerte selbst. Daher müssen manchmal Änderungen vorgenommen werden. Diese Änderungen können sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Rückschritte zeigen.

Alle Änderungen an der Implementierung oder der Definition dieser Messwerte werden in diesem Änderungsprotokoll veröffentlicht, um Ihnen die Verwaltung zu erleichtern.

Wenn Sie Feedback zu diesen Messwerten haben, können Sie es in der Google-Gruppe „web-vitals-feedback“ geben.