Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

Unerwartete Layoutänderungen können die Nutzerfreundlichkeit 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 während 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 Browsercache des Entwicklers, dauern aber beim Endnutzer länger, bis sie geladen werden.
• 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?

Der CLS gibt die größte Zunahme der Layout-Shift-Ergebnisse für jeden unerwarteten Layout Shift an, der 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 für die meisten Nutzer erreichen, ist der 75. Perzentilwert der Seitenladezeiten, segmentiert nach Mobilgeräten und Computern, ein guter Messwert.

Weitere Informationen zu den Studien und der Methodik, die dieser Empfehlung zugrunde liegen, finden Sie unter Mindestanforderungen für Core Web Vitals-Messwerte festlegen.

Layout Shifts im Detail

Layoutverschiebungen werden von der Layout Instability API definiert. Diese API meldet layout-shift-Einträge, wenn ein Element, das im Viewport sichtbar ist, seine Startposition (z. B. seine Position oben und links im standardmäßigen Schreibmodus) zwischen zwei Frames ändert. Solche Elemente werden als instabile Elemente betrachtet.

Layoutänderungen treten nur auf, wenn sich die Startposition vorhandener Elemente ändert. 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

Aufprallbruchteil

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 gibt die Vereinigung des sichtbaren Bereichs des Elements in beiden Frames an. In diesem Fall entspricht dies 75% des gesamten Darstellungsbereichs. Der Auswirkungsanteil 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

Im nächsten Beispiel wird veranschaulicht, wie sich das Hinzufügen von Inhalten zu einem vorhandenen Element auf den Wert für die Layoutverschiebung auswirkt:

In diesem Beispiel ändert sich die Größe des grauen Felds, seine Startposition bleibt jedoch gleich. Es ist also kein instabiles Element.

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

Die Startposition des grünen Felds ändert sich jedoch. Da es teilweise außerhalb des Darstellungsbereichs verschoben wurde, wird der unsichtbare Bereich bei der Berechnung des Anteils an der Auswirkung 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. Das grüne Feld ist um etwa 14% des Darstellungsbereichs nach unten verschoben, sodass der Abstandsbruchteil 0.14 ist.

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 in 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 geben die Entfernungen an, die sich instabile Elemente von ihren Ausgangspositionen entfernt 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.

Das Layout-Shift-Ergebnis 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 verschieben, führen fast immer zu einer schlechten 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 Sie Elemente verschieben möchten, ändern Sie nicht die Properties top, right, bottom oder left, sondern verwenden Sie stattdessen transform: translate().

CLS messen

Der Farbabstand kann im Labor 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 ihr CLS-Wert auf null zurückgesetzt werden, da Nutzer dies als separaten Seitenbesuch wahrnehmen.
• 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. Untergeordnete Frames können die API verwenden, um ihre layout-shift-Einträge zur 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 offen lassen – Tage, Wochen, 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 zum Identifizieren von Layoutverschiebungen im Feld und zur Verwendung von Lab-Daten zur Optimierung 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 auf der #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 Definition dieser Messwerte werden in diesem Changelog aufgeführt.

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