Cumulative Layout Shift (CLS)

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 führt 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 dynamisch vor vorhandenem Inhalt zur Seite hinzugefügt werden. Die Ursache für Layoutverschiebungen können Bilder oder Videos mit unbekannten Abmessungen, Schriftarten, die größer oder kleiner als das ursprüngliche Fallback gerendert werden, oder Anzeigen oder Widgets von Drittanbietern, deren Größe sich dynamisch ändert, sein.

Unterschiede zwischen der Funktionsweise einer Website bei der Entwicklung und der Art und Weise, wie sie von den Nutzern wahrgenommen wird, verschlimmern dieses Problem. Beispiel:

• Personalisierte Inhalte oder Inhalte von Dritten verhalten sich in der Entwicklung und in der Produktion oft unterschiedlich.
• Testbilder befinden sich oft bereits im Browser-Cache des Entwicklers, das Laden dauert jedoch länger.
• Lokal ausgeführte API-Aufrufe verlaufen häufig so schnell, dass unbemerkte Verzögerungen bei der Entwicklung in der Produktion erheblich beeinträchtigt werden können.

Mit dem Messwert Cumulative Layout Shift (CLS) können Sie dieses Problem beheben, da Sie sehen, wie oft das Problem bei echten Nutzern auftritt.

Was ist CLS?

CLS gibt den größten Anstieg von Layoutverschiebungswerten für jede unerwartete Layoutverschiebung während des gesamten Lebenszyklus einer Seite an.

Ein Layoutwechsel tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten wechselt. Wie genau die einzelnen Layout Shift-Werte berechnet werden, erfahren Sie weiter unten in diesem Leitfaden.

Ein Burst von Layout Shifts, der als Sitzungsfenster bezeichnet wird, tritt auf, wenn eine oder mehrere einzelne Layoutverschiebungen in kurzer Folge mit weniger als einer Sekunde zwischen den einzelnen Schichten und maximal 5 Sekunden für die Gesamtfensterdauer auftreten.

Der größte Burst ist das Sitzungsfenster mit der maximalen kumulativen Punktzahl aller Layoutverschiebungen innerhalb dieses Fensters.

Was ist ein guter CLS-Wert?

Im Interesse einer guten Nutzerfreundlichkeit sollten Websites einen CLS-Wert von 0, 1 oder weniger anstreben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, sollten Sie das 75. Perzentil der Seitenaufbauvorgänge, aufgeschlüsselt nach Mobilgeräten und Desktop-Geräten, messen.

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). Solche Elemente werden als instabile Elemente betrachtet.

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

Layout Shift-Wert

Um den Layout Shift Score zu berechnen, 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 (beide unten definiert).

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 Frame und den vorherigen Frame, als Anteil der Gesamtfläche des Darstellungsbereichs.

Im vorherigen Bild gibt es ein Element, das die Hälfte des Darstellungsbereichs in einem Frame 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 Einheit des sichtbaren Bereichs des Elements in beiden Frames an, was in diesem Fall 75% des gesamten Darstellungsbereichs ausmacht, also beträgt der Auswirkungsanteil 0.75.

Entfernungsanteil

Der andere Teil der Layout-Shift-Punktgleichung misst die Entfernung, um die instabile Elemente relativ zum Darstellungsbereich verschoben wurden. Der Abstand ist der größte horizontale oder vertikale Abstand, den sich ein instabiles Element im Frame bewegt hat, geteilt durch die größte Dimension des Darstellungsbereichs (Breite oder Höhe, je nachdem, welcher Wert größer ist).

Im vorherigen Beispiel ist die größte Dimension des Darstellungsbereichs die Höhe und das instabile Element wurde um 25% der Höhe des Darstellungsbereichs verschoben, sodass der Distanz-Anteil 0,25 beträgt.

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

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

Die Startposition des grünen Felds ändert sich zwar, aber da es teilweise aus dem Darstellungsbereich verschoben wurde, wird der unsichtbare Bereich bei der Berechnung des Auswirkungsanteils nicht berücksichtigt. Die Einheit der sichtbaren Bereiche für den grünen Rahmen in beiden Frames (dargestellt durch das rote, gepunktete Rechteck) entspricht der Fläche des grünen Rahmens im ersten Frame, d. h. 50% des Darstellungsbereichs. Der Auswirkungsanteil ist 0.5.

Der Distanzanteil wird durch einen lila Pfeil veranschaulicht. Das grüne Feld wurde um etwa 14% des Darstellungsbereichs nach unten verschoben, sodass der Anteil für die Entfernung 0.14 beträgt.

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:

Im ersten Frame im vorherigen Bild befinden sich vier Ergebnisse einer API-Anfrage für Tiere, die in alphabetischer Reihenfolge sortiert sind. Im zweiten Frame werden der sortierten Liste weitere Ergebnisse hinzugefügt.

Das erste Element in der Liste ("Cat") ändert seine Startposition zwischen den Frames nicht. Daher ist es stabil. Ebenso waren die neuen Elemente, die der Liste hinzugefügt wurden, zuvor nicht im DOM enthalten, sodass sich ihre Startpositionen auch nicht ändern. Die Elemente mit den Bezeichnungen „Hund“, „Pferd“ und „Zebra“ verschieben jedoch ihre Startpositionen, was sie zu instabilen Elementen führt.

Die roten, gepunkteten Rechtecke stellen die Gesamtheit der drei instabilen Elemente vor und nach den Bereichen dar, was 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 dargestellte Element „Zebra“ wurde am stärksten verschoben (etwa 30% der Höhe des Darstellungsbereichs). Damit wird der Distanzanteil in diesem Beispiel zu 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 der Nutzer es nicht erwartet.

Vom Nutzer initiierte Layout Shifts

Layoutänderungen, die als Reaktion auf Nutzerinteraktionen auftreten (z. B. Klicken oder Tippen auf einen Link, Drücken einer Schaltfläche oder Eingabe in ein Suchfeld), sind im Allgemeinen zulässig, solange die Verschiebung nah genug an der Interaktion erfolgt, dass die Beziehung für den Nutzer klar ist.

Wenn beispielsweise eine Nutzerinteraktion eine Netzwerkanfrage auslöst, deren Abschluss einige Zeit in Anspruch nehmen kann, ist es am besten, sofort ein wenig Platz zu schaffen und eine Ladeanzeige einzublenden. So vermeiden Sie unangenehme Layoutverschiebungen nach Abschluss der Anfrage. Wenn der Nutzer nicht merkt, dass etwas geladen wird, oder er nicht weiß, wann die Ressource bereit ist, versucht er, währenddessen auf etwas anderes zu klicken – etwas, das sich unter der Ressource verschwinden könnte.

Für Layoutverschiebungen, die innerhalb von 500 Millisekunden nach der Nutzereingabe auftreten, wird das Flag hadRecentInput festgelegt. Sie können also von den Berechnungen ausgeschlossen werden.

Animationen und Übergänge

Animationen und Übergänge sind, wenn sie gut gemacht sind, eine großartige Möglichkeit, Inhalte auf der Seite zu aktualisieren, ohne den Nutzer zu überraschen. Inhalte, die sich abrupt 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 nächsten bewegen, können den Nutzenden häufig helfen, den Geschehen besser zu verstehen und sie zwischen Statusänderungen zu führen.

Beachten Sie unbedingt die prefers-reduced-motion-Browsereinstellungen, da Animationen für manche Websitebesucher negative Auswirkungen oder Aufmerksamkeitsprobleme haben können.

Mit der CSS-Eigenschaft transform können Sie Elemente animieren, ohne Layoutverschiebungen auszulösen:

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

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

• Chrome-Entwicklertools
• Leuchtturm
• PageSpeed Insights
• WebPageTest

Layoutverschiebungen in JavaScript messen

Mit der Layout Instability API können Sie Layoutverschiebungen in JavaScript messen.

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

Um CLS in JavaScript zu messen, müssen Sie diese unerwarteten layout-shift-Einträge in Sitzungen gruppieren und den Wert für die maximale Sitzung berechnen. Im Quellcode der JavaScript-Bibliothek für web vitals finden Sie eine Referenzimplementierung zur Berechnung der CLS-Werte.

In den meisten Fällen ist der aktuelle CLS-Wert beim Entladen der Seite der endgültige CLS-Wert für diese Seite. Es gibt jedoch einige wichtige Ausnahmen, die im nächsten Abschnitt beschrieben werden. 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 abruft, 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 als eigenständiger Seitenbesuch gewertet wird.
• Die API meldet keine layout-shift-Einträge für Verschiebungen, die innerhalb von iFrames auftreten, aber der Messwert enthält diese Informationen, da sie Teil der Nutzererfahrung auf der Seite sind. Das kann sich als Unterschied zwischen CrUX und RUM anzeigen lassen. Um CLS richtig zu messen, sollten Sie sie berücksichtigen. Subframes können die API verwenden, um ihre layout-shift-Einträge zur Aggregation an den übergeordneten Frame zu melden.

Neben diesen Ausnahmen ist CLS etwas komplexer, da es die gesamte Lebensdauer einer Seite misst:

• Es kann vorkommen, dass Nutzer einen Tab sehr lange geöffnet lassen – Tage, Wochen oder 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, sodass es schwierig ist, den „endgültigen“ Wert zu melden.

Aus diesem Grund sollte CLS immer dann gemeldet werden, wenn eine Seite im Hintergrund ist und nicht nur, wenn sie entladen wird. Das visibilitychange-Ereignis 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 den CLS-Wert zu messen. Dabei werden alle oben genannten Elemente 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.

Zusätzliche Ressourcen

• Anleitung zum Minimieren von Layout Shifts für Google Publisher-Tags
• Understanding Cumulative Layout Shift von Annie Sullivan und Steve Kobes, #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 gelegentlich Ä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 angezeigt.

Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.