Cumulative Layout Shift (CLS) optimieren: So geht’s

Der Cumulative Layout Shift (CLS), zu Deutsch „kumulative Layoutverschiebung“ oder „angehäufte Layoutverschiebung“, ist eine der fünf Metriken der Core Web Vitals, die laut Google das Ranking einer Seite in den Suchergebnissen beeinflussen. Angehäuft deshalb, weil alle Layoutverschiebungen für diese Metrik summiert und dann in einer Zahl ausgedrückt werden. Für mich ist der Cumulative Layout Shift eine der wichtigsten Metriken gegenüber den Nutzer*innen einer Website, da der CLS das Nutzererlebnis maßgeblich negativ beeinflussen kann.

Was es mit dem CLS auf sich hat, wie Du ihn mit relativ einfachen Mitteln analysieren, beseitigen und verhindern kannst, zeige ich Dir in diesem Artikel.

Inhaltsverschiebungen bei Websites sind ärgerlich

Der CLS im Detail erklärt

Wie immer beginne ich mit dem Urschleim einer Herausforderung:

Du kennst das sicher auch. Du hast Deine Website gelauncht, überarbeitet oder überprüfst einfach mal, wie es um die Performance Deiner Website steht. Dazu nutzt Du ein Tool wie zum Beispiel Pagespeed Insights von Google (PSI) und dabei fallen Dir direkt die Core Web Vitals zu Beginn des Reports auf. Deine Metriken für die Ladezeiten passen alle sehr gut, nur der Wert für den Cumulative Layout Shift übersteigt leider die von Google vorgegebene Marke von 0,2 und somit ist der Core-Web-Vital-Test nicht bestanden.

Abbildung 1: Core Web Vitals im Google-Report der Pagespeed Insights

Jetzt geht es an die Spurensuche. Wo Dir der PSI-Test von Google konkrete Hinweise gibt, was Du für die Ladeperformance optimieren solltest, erhältst Du beim CLS höchstens die Klassen oder IDs der HTML-Elemente, die den CLS verursachen. Aber auch hier musst Du bei der Interpretation der Hinweise vorsichtig sein. Denn hier wird eher das Symptom beschrieben und nicht die Ursache. Optimieren solltest Du aber die Ursache, sonst wirst Du das Problem nicht beheben können.

Wie entsteht der Cumulative Layout Shift?

Ein Layout Shift entsteht immer dann, wenn ein Element auf der Website verzögert oder in der falschen Reihenfolge geladen wird und sich dadurch der gesamte Content auf einmal wie von Geisterhand verschiebt. Das kann ein Banner, ein Teaser- oder Bilderkarussell oder bei Publisher-Websites gerne auch eine Werbeeinbindungen sein. Aber auch CSS-Formatierungen, die verzögert auf das Layout angewendet wurden, haben diesen hervorgerufen.

Ich erinnere mich noch sehr gut an die frühen 2020er Jahre. Auf News-Seiten führten durch dynamisch nachgeladene Werbebanner dazu, dass der Content permanent nach ob oder unten sprang. Das machte das Lesen von interessanten Artikeln teils zu einer Farce. Google erkannte dieses Problem und führte die Metrik für den Cumulative Layout Shift ein – zusammen mit weiteren Performance-Metriken. Ziel war es, den Fokus auf die Nutzbarkeit von Websites zu legen. Und das war meiner Meinung nach längst überfällig.

Wie wird der CLS gemessen?

Google berechnet den Cumulative Layout Shift mithilfe einer einfachen Formel, die sowohl horizontale als auch vertikale Verschiebungen berücksichtigt.

Für die vertikale Berechnung misst Google zwei Werte:

1. Impact Fraction: der Anteil des Bildschirms, der betroffen von der Verschiebung betroffen ist.
2. Distance Fraction: die Distanz, um die sich das betroffene Element verschiebt.

Ein Beispiel, das Google bei sich auf der Website aufführt, veranschaulicht dieses Konzept noch deutlicher.

Abbildung 2: Darstellung der Layoutverschiebung

Schauen wir uns das obige Bild einmal genauer an. Links sehen wir die Seite vor dem Shift: Das Content-Element nimmt 50 % der Bildschirmbreite ein. Rechts, nach dem Shift hat sich das Content-Element um 25 % nach unten verschoben. Dadurch nimmt die betroffen Fläche nun 75 % des Bildschirms ein.

Definition laut Google:

layout shift score = impact fraction * distance fraction

Übersetzt heißt das:

Der Wert für den Layout Shift ergibt sich aus dem Produkt aus der betroffenen Fläche (75 %) und der tatsächlichen Verschiebung (25 %). Umgerechnet in Dezimalzahlen: 75 % = 0,75 und 25 % = 0,25. Daraus ergibt sich folgende Formel:

CLS = 0,75 x 0,25 = 0,1875

Lesetipp: Google erklärt den CLS und seine Berechnung ausführlich auf der Developer-Seite sehr gut. Ein Blick lohnt sich!

Die Berechnung der horizontalen Verschiebung unterscheidet sich in einigen Details, beruht aber im Wesentlichen auf dem gleichen Prinzip.

Was sind die Auswirkungen?

Warum sollte Dich das überhaupt interessieren? Ob Du nun einen Onlineshop betreibst oder Deine Seite ausschließlich Leseartikel anbietet – sobald Nutzer*innen mit der Seite interagieren wollen, hinterlassen verzögerte Layout Shifts einen faden Beigeschmack bei der Nutzung.

Klassische Beispiele:

• Du möchtest in einem Onlineshop den „Kaufen“-Button klicken. Der verschiebt sich aber plötzlich und Du klickst ungewollt auf eine Werbung.
• Du liest einen Artikel, aber der Text springt munter hoch oder runter. Und das sogar mehrfach.

Nutzer*innen sind von solchen Störungen schnell genervt – im schlimmsten Fall meiden sie die Seite ganz. Das kann direkte Umsatzeinbußen zur Folge haben.

Cumulative Layout Shift in den Core Web Vitals: Wichtig bei der SEO!

Ich möchte darauf eingehen, warum der Cumulative Layout Shift in der SEO meiner Meinung nach eine der wichtigsten Metriken innerhalb der Core Web Vitals ist.

Natürlich sind alle Metriken der Core Web Vitals relevant, um eine optimale Nutzererfahrung zu gewährleisten. Jedoch treten die Verschiebung selbst bei gutem Caching weiterhin auf – oft wie bereits beschrieben asynchron, dynamisch und unerwartet. Sie sind zudem stark nutzungsabhängig und können sich wiederholen. Besonders News-Publisher hatten in der Vergangenheit große Probleme mit diesem Phänomen. Durch zahlreiche Werbeeinblendungen verschob sich der Content ständig. Das hat das Lesen eines Artikel deutlich erschwert.

Kombiniert sich dieses Verhalten dann noch mit anderen negativen Metriken, wie einem schlechten Wert für die Interaction to Next Paint, also einer Verzögerung, bis man mit der Seite interagieren kann, steigt die Frustration der Nutzer*innen schnell.

Wann tritt der CLS besonders häufig auf?

Am häufigsten habe ich hohe CLS-Werte gesehen, wenn Website-Inhalte dynamisch manipuliert werden. Das passiert vor allem, wenn Java Script Elemente wie Buttons, Banner, Werbeanzeigen, Slider oder Teaser nachgeladen und eingebunden werden, ohne im Vorfeld den benötigten Platz zu reservieren.

Ich liste Dir einmal Fälle auf, bei denen ich häufig Layout Shifts gesehen habe:

• Dynamische Werbeeinbindungen – häufig auf News- und Publisher-Websites.
• Plugins wie Artikel-Slider oder Bilderkarussells – häufig ein Problem bei Websites, die nicht optimierte Plugins einbinden.
• Falsche Priorisierung beim Rendern eines Webseitendokuments – weit verbreitetes Phänomen.

Besonders hervorheben möchte ich Extensions und Plugins für Content-Management-Systeme. Viele davon basieren auf Java Script und beeinflussen das Ladeverhalten von Elementen erheblich. Leider wird dieser Faktor oft nicht ausreichend berücksichtigt.

So analysierst und optimierst Du Deinen CLS – plus konkretes Beispiel

Nun aber genug der theoretischen Beschreibungen. Ich zeige Dir Schritt für Schritt, wie Du Cumulative Layout Shifts analysierst und optimierst.

1.   Nutze die Google Search Console

Die Search Console ist ja praktisch das Brot-und-Butter-Tool für uns SEOs. Ob Du ein Problem mit den Core Web Vitals hast, wird Dir hier übersichtlich angezeigt.

So findest Du die CLS-Daten:

• Klicke in der GSC im linken Menü auf den Navigationspunkt „Core Web Vitals“.
• Wähle zwischen Desktop oder mobil.

Auch wenn nur noch die mobilen Daten fürs Ranking relevant sind, solltest Du besonders im B2B-Bereich die Desktop-Werte nicht vernachlässigen.

Abbildung 3: Screenshot Google Search Console

Fehlerquellen erkennen:

Unterhalb des Charts siehst Du die Punkte, die die Core Web Vitals verschlechtern. Hier erhältst Du von Google direkt Hinweise, wo Du mit der Optimierung ansetzen solltest.

Wählst Du hier einen Punkt aus, siehst Du eine Liste von URLs, bei denen Google schlechte Werte gemessen hat.

Wundere Dich nicht, dass hier teilweise nur ein Bruchteil der URLs Deiner gesamten Website angezeigt werden. Das Tool zeigt hier nur einen Ausschnitt Deiner Domain, nicht alle URLs.

Abbildung 4: Google Search Console

Jetzt, da Du einige URLs mit hohem Cumulative Layout Shift gefunden hast, kannst Du sie direkt aufrufen und das Problem genauer untersuchen. Oft sind Layout Shifts jedoch sehr schnell und kaum mit bloßem Auge wahrnehmbar – besonders auf leistungsstarken Rechnern und bei schnellen Internetverbindungen. Wie Du diese sichtbar machst, erkläre ich Dir etwas weiter unten in diesem Absatz.

2. Verwende Googles PageSpeed Insights (PSI)

Mit dem Google Tool PageSpeed Insights kannst Du schnell überprüfen, ob Deine URL die Core Web Vitals besteht und wie es um den CLS-Wert steht. Der Vorteil des PSI-Tests ist, dass Du hier auch Felddaten siehst. Google verrät Dir, ob echte Nutzer*innen beim Besuch Deiner Seite tatsächlich CLS-Probleme erlebt haben.

Abbildung 5: Pagespeed Insights Ergebnisse der Felddaten

3.  Nutze die CrUX-Daten

Wenn Du wissen möchtest, ob Google Dein CLS-Problem bereits in der Vergangenheit wahrgenommen hat, kommst Du nicht drum herum, die Chrome-User-Experience-Daten anzuschauen.

Dafür gibt es zwei Möglichkeiten:

1. Google Big Query: Hier kannst Du die CLS-Werte für (D)eine Website tiefgehend untersuchen.
2. Chrome Extensions: Einfacher und schneller geht es mit Browser-Erweiterungen, die Dir die betroffenen Elemente direkt auf der Seite

Zwei Plugins möchte ich Dir hier direkt ans Herz legen:

• Chrome Extensions für CrUX-Daten: RUM
• Chrome Extensions zur Visualisierung der betroffenen HTML-Elemente: CLS Visualizer

Mit diesen Tools kannst Du Layout Shifts auf Deiner Seite gezielt analysieren und optimieren.

Abbildung 6: CLS-Werte mit der CLS Visualizer-Extension darstellen.

4. Das beste Tool zur Analyse: Die Chrome Developer Toolbar

Jetzt weißt Du bereits, ob Deine Website ein Problem mit dem Cumulative Layout Shift hat. Doch um gezielt zu optimieren, musst Du genau bestimmen, welche HTML-Elemente (<div>, <span>, <p> etc.) mit welcher ID oder Klasse für die Verschiebung verantwortlich sind.

Warum ist das wichtig? Wenn Du mit Entwicklern zusammenarbeitest, möchtest Du wahrscheinlich nicht nur sagen: „Der CLS ist schlecht, optimiert das mal!”. Stattdessen solltest Du genau benennen können, welche Elemente das Problem verursachen.

Hier kommt nun das Schweizer Taschenmesser für die Web-Entwicklung und mein Favorit zur Auswertung der Ladeperformance ins Spiel: die Chrome Web Developer Toolbar.

Schritt für Schritt: CLS mit der Chrome Developer Toolbar analysieren

Anhand eines konkreten Beispiels zeige ich Dir auf, wie Du den CLS auswertest. Ich betrachte dafür die Website gymshark.com.

• Ich rufe die entsprechende Domain im Browser auf und aktiviere die Web Developer Toolbar.
• Das kannst Du mit dem Kontextmenü machen oder einfach über Tastenkombination: Befehlstaste + Option + C (Mac) oder Strg + Umschalttaste + C (Windows)
• Klicke nun im horizontalen Menü auf den Punkt „Leistung“.
• Was Du hier siehst:
  • Den CLS-Wert, der direkt in Deinem Browser gemessen wurde.
  • Eine Übersicht der betroffenen HTML-Elemente, inklusive Klassen und IDs, die für den Shift verantwortlich sind.

Abbildung 7: Web Developer Toolbar – Leistungsanzeigen

Nun siehst Du direkt, welche Elemente betroffen sind – aber noch nicht, welches Element konkret den Layout Shift verursacht.

• Dazu wechselst Du im horizontalen Menü auf den Punkt „Netzwerk“. Und genau dies ist die Schweizer Taschenmesser-Funktion. Hier kannst Du das Ladeverhalten der Seite im Detail beobachten.
• Problem: Da Seiten oft relativ schnell laden, vorausgesetzt Du hast eine gute Internetverbindung, wird Dir der Layout Shift wahrscheinlich gar nicht auffallen.
• Lösung: Um den Shift zu sehen, drossele die Ladegeschwindigkeit. Wähle dafür in dem sehr schmalen horizontalen Menü die Drosselung aus. In der Regel reicht eine Beschränkung auf langsames 4G.
• Aktiviere außerdem die Konsolenleiste. Das machst Du über das kleine Zahnrad auf der rechten Seite oder Du drückst einfach ESC.
• Im Konsolenmenü findest Du den Punkt „Rendering“, um Layout-Shift-Bereiche sichtbar zu machen. Damit kannst Du genau erkennen, welche Elemente sich unerwartet verschieben.

Abbildung 8: Web Developers Toolbar: Einstellungen für die Visualisierung des CLS

Achtung: Je nach gewählter Drosselung kann der Seitenaufbau einige Minuten in Anspruch nehmen.

Nun musst Du die Seite neu laden und kannst Dir in Ruhe anschauen, wie sich die Seite langsam aufbaut. Dabei werden Dir die Elemente, die einen CLS verursachen, farblich hervorgehoben und Du siehst direkt, wie sich die Elemente hoch oder runterschieben.

Für langsame Augen und zur Dokumentation werden Dir zudem Screenshots der einzelnen Ladezustände angezeigt. So kannst Du noch besser analysieren, wie der CLS entsteht.

Abbildung 9: Snapshot des Ladeverhaltens.

Abbildung 10: Ein weiterer Snapshot des Ladeverhaltens mit einem Layout Shift der Beispiel-Website gymshark.com.

Achte bei den Screenshots genau auf den rot markierten Bereich! In dem gezeigten Beispiel siehst Du, wie ein Banner, der auf die App verweist, nachgeladen wird und den gesamten Content nach unten verschiebt. Im zweiten Screenshot erscheint der betroffene Bereich (Banner) lila, da in den Chrome Developer Tools die Option „Layout Shift Bereiche“ aktiviert wurde.

Nun siehst Du den Übertäter! Mit dem Inspector der Web Developers Toolbar kannst Du nun das genaue Element benennen, das den Layout Shift verursacht.

Wie optimierst Du den CLS und vermeidest ihn in Zukunft?

Jetzt weißt Du, wie Du den CLS analysierst und betroffene Elemente identifizierst. Doch was machst Du mit dieser Information? Im besten Fall hast Du eine*n Entwickler*in an Deiner Seite, der*dem Du nun genau sagen kannst, welches Element betroffen ist und wo er oder sie ansetzen muss. Willst Du jedoch selbst Hand an den Code anlegen, gebe ich Dir die folgenden Tipps:

1. Verwende für Wrapper, also umschließende Divs in Deinem Layout, fix definierte Höhen und Weiten. So verhinderst Du das nervige Hoch- und Runterspringen. Besonders bei dynamischen Werbeeinbindungen war und ist das die Lösung. Nachteil: Es können unschöne Freiräume entstehen.
2. Achte darauf, dass die nachgeladenen Inhaltselemente exakt in den „reservierten“ Freiraum passen.
3. Priorisiere das Laden von Inhaltselementen sinnvoll. Stelle sicher, dass sich der Inhalt von oben nach unten stabil aufbaut und das notwendige CSS auch direkt passt.
4. Priorisiere das Ladeverhalten von Java Script-Elementen so, dass diese an der richtigen Stelle und zur richtigen Zeit geladen werden.

Wie Du das Ladeverhalten von Java Script analysierst und beeinflussen kannst, zeige ich Dir in meinem Guide zur Analyse und Optimierung der Page Performance auf.

Cumulative Layout Shift entlarvt

Wie Du siehst, ist die Auswertung des Cumulative Layout Shift kein Hexenwerk. Du musst natürlich  die richtigen Tools und Funktionen kennen. Und das für mich wichtigste und mächtigste Tool nutzt Du wahrscheinlich ungeahnt schon: den Chrome Browsers.

Hast Du noch Fragen oder brauchst Unterstützung bei der Behebung von schlechten CLS-Werten? Komm gern auf uns zu!

Bildnachweis: Titelbild: ; Bild 2: Screenshot Seokratie GmbH / Google Pagespeed Insights, Bild 3: Screenshot Seokratie GmbH / Google web.dev CLS, Bild 4: Screenshot Seokratie GmbH / Google Search Console, Bild 5: Screenshot Seokratie GmbH / Google Search Console, Bild 6: Screenshot Seokratie GmbH / Google Pagespeed Insights gymshark.com, Bild 7: Screenshot Seokratie GmbH / Screenshot gymshark.com , Bild 8: Screenshot Seokratie GmbH /, Web Developer Toolbar: gymshark.com, Bild 9: Screenshot Seokratie GmbH / Web Developer Toolbar: gymshark.com, Bild 10: Screenshot Seokratie GmbH / Web Developer Toolbar: gymshark.com, Bild 11: Screenshot Seokratie GmbH / Web Developer Toolbar: gymshark.com