Metrik Kumulative Layoutverschiebung (CLS): Wie man unerwünschte Seitenverschiebungen findet und behebt

Stört es Sie auch, wenn eine Werbung auf einer Webseite den Text, den Sie gerade lesen, verschiebt? Sind Sie genervt, wenn der Inhalt kurz vor dem Klicken wegspringt und Sie versehentlich woanders klicken?

Diese unerwünschten Situationen beim Surfen nennt man Layoutverschiebungen. Alle Verschiebungen auf einer Seite werden zur Metrik Kumulative Layoutverschiebung, kurz CLS, zusammengefasst.

Lassen Sie uns diese Metrik genauer unter die Lupe nehmen.

Lernen Sie die Metrik CLS kennen#

Das Ziel bei der Optimierung von CLS ist es, während des Seitenaufbaus und auch bei der späteren Nutzung durch den Benutzer die visuelle Stabilität zu maximieren. Dies erleichtert den Menschen das Konsumieren der Webseiteninhalte.

Technisch gesehen ist die Definition etwas komplizierter: CLS gibt die Summe der Layoutverschiebungen innerhalb des schlechtesten Fünf-Sekunden-Fensters während der Nutzung der Seite an.

Diese Metrik ist Teil der Core Web Vitals, die von Google zur Bewertung der Qualität von Webseiten verwendet werden. Die Core Web Vitals sind auch ein Signal für das Ranking der Suchmaschinenergebnisse.

Der Grenzwert für die CLS-Metrik ist 0,1#

Wenn Sie die Kumulative Layoutverschiebung im grünen Bereich halten möchten, muss der Wert der Metrik unter 0,1 liegen. Wenn Ihnen das gelingt, haben Sie gewonnen.

Liegt Ihr CLS zwischen 0,1 und 0,25, befinden Sie sich im orangenen Bereich und es besteht Verbesserungsbedarf.

Sollte der Wert bei Ihren Nutzern über 0,25 liegen, stuft Google Ihr CLS als unzureichend ein.

	Gut	Verbesserungswürdig	Schlecht
CLS	< 0,1	0,1 - 0,25	> 0,25

Die Bedeutung eines guten CLS-Scores#

Die Metrik Kumulative Layoutverschiebung (CLS) kann auch für Ihre Webseite wichtig sein:

• CLS beeinflusst SEO und Werbekosten durch ihre Rolle in den Core Web Vitals.
• Die Optimierung von CLS erhöhte die Seitenansichten pro Sitzung bei Yahoo! JAPAN News um 15 %. Mehr dazu in der Fallstudie auf Web.dev.
• Eine Steigerung der Konversionsrate um 10 % erreichte Mail.ru ebenfalls durch die Optimierung dieser Metrik, siehe Studie.
• CLS hat auch Einfluss auf das Lighthouse-Score. In den Tools von Lighthouse fließt die Metrik CLS seit Version 10 mit einem Gewicht von 25 % in die Gesamtbewertung (LPS) ein, ähnlich wie die Metrik LCP.

Einige unserer Kunden haben nach der Optimierung von CLS neben anderen Vorteilen auch eine erhöhte Besucherzahl festgestellt.

Auf einer Content-Seite erreichten wir nach der Optimierung „grüne Core Web Vitals“. Nach dem Page Experience Update von Google kam es zu einem signifikanten Anstieg der Besucherzahlen.

Wie wird CLS genau berechnet?#

Zunächst erklären wir, was eine einzelne Layoutverschiebung beinhaltet.

Kumulative Layoutverschiebung

1. Einzelne Layoutverschiebungen werden aus der Gesamtgröße des betroffenen Bereichs (Impact Fraction) und der Verschiebungsdistanz des instabilen Elements (Distance Fraction) in der X- und Y-Achse berechnet.
2. Im Beispiel unten nimmt das instabile Element etwa 90 % des Viewports ein.
3. Das Element verschob sich um 4 % der gesamten Höhe des Viewports. Die Verschiebungsdistanz beträgt also 0,04.
4. In diesem Beispiel beträgt die Gesamtgröße des betroffenen Bereichs 0,9 und die Verschiebungsdistanz 0,04.
5. Die Layoutverschiebung beträgt in diesem Fall 0,04 * 0,9 = 0,036.

Solche Elemente können jedoch auf einer Seite mehrfach auftreten, daher der Begriff „Kumulative“ in der Metrik.

„Session window“ kommt ins Spiel#

Es ist wichtig zu verstehen, dass der Chrome UX Report das CLS für den gesamten Aufenthaltszeitraum eines Nutzers auf der Seite berechnet.

Derzeit wird das gesamte CLS-Score jedoch auf das maximale CLS beschränkt, das in einem auf 5 Sekunden begrenzten Sitzungsfenster mit einer Sekunde Pause gemessen wird. Es werden einfach die schlechtesten fünf Sekunden genommen:

Berechnung der CLS-Metrik. Es wird nur ein, das schlechteste Fenster herangezogen. Hier Session Window 1.

1. Unerwünschte Verschiebungen (Layout Shifts), siehe oben, werden immer in Sitzungsfenstern von maximal fünf Sekunden berechnet.
2. Wenn eine Sekunde ohne Verschiebungen vergeht, endet das Fenster früher als nach fünf Sekunden.
3. Während des gesamten Aufenthalts auf einer bestimmten URL wird dann nur das schlechteste Fenster ausgewählt (im Bild sofort das erste). Dies wird als CLS-Score für diese Seite angegeben.

Die Berechnung während der einzelnen Sitzungen soll unnötig hohe CLS-Werte bei Besuchen verhindern, bei denen der Nutzer lange auf einer URL verweilt.

Mehr Informationen zur CLS-Messung finden Sie auf web.dev.

Wie entsteht CLS eigentlich#

In der Praxis werden unerwünschte Verschiebungen meist durch diese allgemeinen Ursachen hervorgerufen:

1. Verschiebungen durch das sukzessive Laden von Elementen innerhalb des Inhalts. Es handelt sich um Elemente, die keine vordefinierten Abmessungen haben, wie Bilder oder JS-Komponenten.
2. Schlechte Animationen und Verschiebungen von Elementen durch CSS-Eigenschaften. Vermeiden Sie CSS-Animationen, die keine Transformationen unterstützen.
3. Nichterreichen der angeforderten Verschiebung innerhalb von 500 ms. Wenn Sie den Inhalt nicht rechtzeitig umgestalten können, müssen Sie zumindest Platz für den neuen Inhalt schaffen. Dies betrifft beispielsweise AJAX-Paginierung.

Vorsicht bei asynchron geladenen Elementen wie Bildern. Sie verschieben gerne.

Wir messen CLS#

Chrome UX Report#

Idealerweise sammeln Sie Daten über CLS von fast allen Ihren Besuchern mithilfe des Chrome UX Reports. Dieser liefert für Ihre Domain den 75. Perzentilwert des CLS über alle Seitenaufrufe. Eine detailliertere Ansicht der Werteverteilung finden Sie im Histogramm.

Diese Daten beinhalten Messungen von Nutzern mit dem Chrome-Browser, sowohl auf dem Desktop als auch auf mobilen Geräten. Messungen von Nutzern mit Apple-Produkten sind nicht enthalten.

Daten aus dem Chrome UX Report sind in Tools wie unserem Webspeed-Test, PageSpeed Insight oder der Google Search Console verfügbar.

Chrome DevTools#

Eine hervorragende Möglichkeit für Entwickler und Fortgeschrittene ist es, das CLS Ihrer Webseite lokal zu messen. Wir messen jede einzelne Seite separat. Ein idealer Helfer ist Chrome, wo Sie die Web Vitals-Erweiterung aktivieren und sofort mit dem Messen beginnen können.

Beginnen Sie mit dem Messen des ersten CLS im ersten Viewport und fahren Sie fort mit Interaktionen wie Scrollen und Klicken auf Elemente der Webseite.

PageSpeed Insights oder Lighthouse#

PageSpeed Insights oder Lighthouse messen den CLS auf einzelnen Seiten Ihrer Webseite im ersten Viewport. Dies ist ein guter Ausgangspunkt, zum Beispiel um grundlegende Layout-Elemente, Menüverschiebungen, Mobilkopfleisten, Werbebanner um die Webseite herum usw. zu optimieren.

Der Nachteil ist, dass sie nur den CLS im ersten Viewport messen, während wir kumulativ alle Verschiebungen messen möchten.

Konkrete Empfehlungen, wie man Layoutverschiebungen vermeidet#

Aus der Praxis unserer Beratung zur Webgeschwindigkeit haben wir einige häufig wiederkehrende Probleme ausgewählt:

Bildern und asynchronen Elementen immer Größe zuweisen#

Achten Sie darauf, dass alle Bilder auf der Webseite mit der Breite und Höhe über die Attribute width und height definiert sind. Asynchrone Elemente wie JS-Komponenten oder Werbung dann mit Hilfe der CSS-Eigenschaft aspect-ratio.

Keine fremden Komponenten ohne Platzhalter einfügen#

Bereiten Sie immer vor der Initialisierung von Werbesystemen oder Social-Media-Plugins (Facebook, Instagram, TikTok) zunächst Platz vor mit einem Platzhalter oder erneut mit der Eigenschaft aspect-ratio. Wählen Sie die Maße des Platzhalters so, dass sie eine ähnliche Fläche reservieren wie der vom Plugin generierte Inhalt.

BFcache nutzen#

Ermöglichen Sie dem Browser die Nutzung von BFcache und reduzieren Sie dadurch das CLS-Score auf Ihrer Webseite. Der Browser muss die Seite bei der Navigation durch den Verlauf nicht erneut rendern und zeigt sie aus dem Speicher an, wodurch alle Verschiebungen beim Rendern vermieden werden. Dieser Cache existiert seit vielen Jahren, aber seit 2023 wird er auch von Chrome auf Mobilgeräten und Desktops unterstützt.

Eigene Schriftarten optimieren#

Der Ersatz von Systemschriftarten durch eigene verursacht oft unerwünschte Verschiebungen.

Hier sind einige Empfehlungen:

• Je weniger individuelle Schnitte und Varianten, desto besser.
• Beginnen Sie so früh wie möglich mit dem Herunterladen der Schriftarten.
• Nutzen Sie preload zur Priorisierung des Downloads.
• Verwenden Sie ausschließlich das moderne Format WOFF2.
• Stellen Sie über die Eigenschaft font-display sicher, dass der Text lesbar ist, bevor die externe Schriftart vollständig geladen ist.
• Passen Sie die externe Schriftart und die Ersatz-Systemschriftart mit size-adjust an.

Auf angeforderte Verschiebung innerhalb von 500 ms reagieren#

Wenn Sie nach einem Klick mit JavaScript einen Teil der Seite neu darstellen und der neue Inhalt andere Maße hat als der ursprüngliche, kommt es zu einer Verschiebung der umliegenden Elemente. Diese Verschiebung muss innerhalb von 500 ms erfolgen.

Dies betrifft z.B. AJAX-Paginierung. Wenn Sie nicht in der Lage sind, den neuen Inhalt sicher innerhalb dieser Zeit auch auf langsameren Geräten zu liefern, müssen die umliegenden Elemente sofort nach dem Klick verschoben und der eigentliche Inhalt später in den vorbereiteten Raum eingefügt werden.

CSS in den <head> einfügen#

CSS-Stile sollten, wenn möglich, im Kopfbereich sein. Sie werden zu Beginn des Seitenladens verarbeitet und alle auf einmal. Das Hinzufügen weiterer CSS-Eigenschaften innerhalb des HTML-Dokuments kann zu weiteren Layoutverschiebungen durch die schrittweise Verarbeitung dieser Stile führen.

Platz für Icons reservieren#

Wenn Sie IconFonts oder SVG-Sprites mit vielen Icons verwenden, kann das Herunterladen dieser Datei eine Weile dauern. Erst nach dem Laden dieser umfangreichen Dateien erscheinen die Icons auf der Webseite und können den Inhalt verschieben. Definieren Sie immer die Abmessungen der Icons, bevor sie geladen werden.

Animationen nur mit transform#

Die CSS-Eigenschaft transform ermöglicht es, Elemente zu animieren, ohne dass es zu Layoutverschiebungen kommt. Verwenden Sie transform: scale(), anstatt die Eigenschaften Höhe und Breite zu ändern. Wenn Sie Elemente verschieben möchten, vermeiden Sie die Änderung der Eigenschaften top, right, bottom oder left und verwenden Sie stattdessen transform: translate().

Bonus: Achtung auf Scrollbars#

Wenn Sie einen CLS von 1,00 direkt nach dem Laden der Seite messen und nicht wissen, was Sie noch optimieren könnten, versuchen Sie overflow-y: scroll. Durch die schrittweise Verarbeitung der HTML- und CSS Dateien kann es zum Ein- und Ausschalten der seitlichen Scrollbar auf der Seite kommen.

Fügen Sie diesen Ausschnitt zu den CSS-Stilen hinzu, möglicherweise erspart Ihnen das viele Nerven bei der Suche nach weiteren CLS.

html { height: 100%; overflow-y: scroll; }

Die Metrik CLS ist Teil unserer einheitlichen Geschwindigkeitsmetrik, PageSpeed.ONE Score (SPS).

Mehr zur Optimierung von CLS finden Sie in einem separaten Artikel.

Wir können Ihnen bei CLS helfen#

Auf der Webseite von SIKO ist es uns gelungen, die Layoutstabilität um das Siebenfache zu verbessern. Die Geschwindigkeit der Webseite ist für SIKO entscheidend, doch das neue, auf JavaScript basierende Frontend zeigte erhebliche Probleme mit den Metriken der Benutzererfahrung Core Web Vitals.