SEO-Glossar

Cumulative Layout Shift

Fachdefinition, Bedeutung und Best Practices — kompakt und ohne Marketing-Sprech.

Cumulative Layout Shift (CLS) ist eine Metrik innerhalb der Core Web Vitals, die die visuelle Stabilität einer Webseite während des Ladevorgangs quantifiziert. Sie misst die Summe aller unerwarteten Layout-Verschiebungen, die während der gesamten Lebensdauer einer Seite auftreten. Ein hoher CLS-Wert indiziert, dass Elemente auf der Seite nach dem initialen Rendern ihre Position unerwartet ändern, was zu einer beeinträchtigten Nutzererfahrung führt. Diese Metrik ist entscheidend für die Bewertung der Benutzerfreundlichkeit und der wahrgenommenen Qualität einer Webressource.

Definition und Einordnung

Der Cumulative Layout Shift (CLS) erfasst das Ausmaß, in dem sich sichtbare Elemente innerhalb des Viewports verschieben. Eine Verschiebung wird als unerwartet klassifiziert, wenn sie ohne explizite Benutzerinteraktion (z.B. Klick oder Scrollen) auftritt. Die Berechnung des CLS-Wertes erfolgt durch Multiplikation von zwei Faktoren: dem Impact Fraction und dem Distance Fraction. Der Impact Fraction misst den Bereich des Viewports, der von instabilen Elementen betroffen ist, während der Distance Fraction die größte Bewegungsdistanz eines instabilen Elements relativ zur Viewport-Größe quantifiziert. Ein niedriger CLS-Wert, idealerweise unter 0.1, signalisiert eine stabile Seitenstruktur. CLS ist eine der drei zentralen Metriken der Core Web Vitals, neben Largest Contentful Paint (LCP) und First Input Delay (FID), die von Google zur Bewertung der Nutzererfahrung herangezogen werden. Im Gegensatz zu LCP, das die Ladezeit des größten Inhaltselements misst, oder FID, das die Reaktionsfähigkeit auf Benutzereingaben bewertet, konzentriert sich CLS ausschließlich auf die visuelle Stabilität. Es ist wichtig zu beachten, dass CLS nicht nur einmalig beim Laden gemessen wird, sondern die kumulative Summe aller Verschiebungen über die gesamte Lebensdauer der Seite bis zur Entladung.

Warum Cumulative Layout Shift für SEO wichtig ist

Die Bedeutung des Cumulative Layout Shift für SEO resultiert aus seiner direkten Korrelation mit der Nutzererfahrung. Suchmaschinen wie Google integrieren die Core Web Vitals als Ranking-Faktor. Eine Webseite mit einem schlechten CLS-Wert signalisiert eine suboptimale Benutzerfreundlichkeit, was sich negativ auf die Positionierung in den Suchergebnissen auswirken kann. Nutzer, die unerwartete Layout-Verschiebungen erleben, sind eher geneigt, die Seite frühzeitig zu verlassen (hohe Absprungrate), was wiederum als negatives Nutzersignal interpretiert wird.

Ein hoher CLS-Wert kann die Interaktion mit der Seite erschweren, da Benutzer versehentlich auf falsche Elemente klicken oder die Orientierung verlieren. Dies beeinträchtigt nicht nur die direkte Nutzung, sondern kann auch die Konversionsraten mindern, beispielsweise bei Online-Shops oder Lead-Generierungsformularen. Suchmaschinen zielen darauf ab, Nutzern die bestmöglichen Ergebnisse zu präsentieren, und eine visuell instabile Seite entspricht diesem Qualitätsanspruch nicht.

Darüber hinaus kann ein schlechter CLS-Wert indirekt die Crawling- und Indexierungsraten beeinflussen. Obwohl es keine direkte Korrelation gibt, legen Suchmaschinen Wert auf eine performante und nutzerfreundliche Website. Eine Seite, die als qualitativ minderwertig eingestuft wird, könnte seltener gecrawlt werden, was die Aktualität des Index und somit die Sichtbarkeit neuer Inhalte beeinträchtigt. Die Optimierung des CLS ist somit ein integraler Bestandteil einer umfassenden SEO-Strategie, die über die reine Keyword-Optimierung hinausgeht und die gesamte User Journey berücksichtigt.

Typische Anwendungsfälle

Bilder oder Videos ohne explizite Größenangaben, die nach dem Laden des restlichen Inhalts ihren Platz beanspruchen.
Dynamisch eingefügte Inhalte wie Werbebanner oder Pop-ups, die ohne vorherige Platzreservierung erscheinen.
Webfonts, die später geladen werden und zu einem „Flash of Unstyled Text“ (FOUT) oder „Flash of Invisible Text“ (FOIT) führen, wodurch sich Textblöcke verschieben.
Inhalte, die serverseitig gerendert werden und clientseitig durch JavaScript modifiziert werden, ohne den benötigten Platz vorzuhalten.
Einbettungen von Drittanbietern (z.B. Social Media Feeds, Karten), die ihre Größe erst nach dem Laden bestimmen.
CSS- oder JavaScript-Dateien, die verzögert geladen werden und das Layout nachträglich beeinflussen.

Fehlerbilder und Diagnose

Fehlerbilder im Zusammenhang mit Cumulative Layout Shift manifestieren sich als plötzliche, unerwartete Bewegungen von Seitenelementen. Dies kann dazu führen, dass Benutzer auf andere Elemente klicken als beabsichtigt oder den Lesefluss verlieren. Die Diagnose erfolgt primär über Tools, die die Core Web Vitals messen. Die Google Search Console bietet einen dedizierten Bericht für Core Web Vitals, der URLs mit schlechten CLS-Werten identifiziert. PageSpeed Insights liefert detaillierte Informationen zu den einzelnen Metriken und schlägt konkrete Optimierungsmaßnahmen vor. Im Browser können Entwicklertools (z.B. Chrome DevTools) genutzt werden, um Layout-Verschiebungen in Echtzeit zu visualisieren und die verursachenden Elemente zu identifizieren. Der Performance-Tab oder das Layout Shift Debugger-Feature in den DevTools sind hierfür besonders nützlich. Auch Lighthouse-Audits, die in den DevTools integriert sind, bewerten den CLS-Wert und geben Empfehlungen. Eine Analyse der Serverlogs ist für CLS-Probleme weniger relevant, da diese clientseitig auftreten. Es ist wichtig, sowohl Felddaten (reale Nutzerdaten) als auch Labordaten (simulierte Tests) zu berücksichtigen, da diese unterschiedliche Perspektiven auf die CLS-Performance bieten können.

Best Practices

Bilder und Videos immer mit expliziten Breiten- und Höhenattributen versehen oder CSS-Aspect-Ratio-Boxen verwenden, um den benötigten Platz vorab zu reservieren.
Für dynamisch eingefügte Inhalte wie Anzeigen oder Widgets den benötigten Platz im Voraus reservieren, beispielsweise durch CSS-Min-Height-Eigenschaften.
Webfonts optimieren, indem man font-display: swap; verwendet und kritische Schriftarten vorab lädt (Preload), um FOUT oder FOIT zu minimieren.
Inhalte, die nach dem initialen Laden eingefügt werden, nur unterhalb des sichtbaren Viewports platzieren oder durch Benutzerinteraktion auslösen.
Transformationen und Animationen, die Layout-Verschiebungen verursachen könnten, vermeiden und stattdessen CSS-Eigenschaften wie transform oder opacity nutzen, die keine Layout-Änderungen auslösen.
Kritische CSS- und JavaScript-Ressourcen frühzeitig laden und nicht-kritische Ressourcen verzögern, um das initiale Rendering nicht zu blockieren.

Häufige Fragen

Was ist ein guter CLS-Wert?

Ein guter CLS-Wert liegt unter 0.1. Werte zwischen 0.1 und 0.25 werden als verbesserungswürdig eingestuft, während Werte über 0.25 als schlecht gelten und dringend optimiert werden sollten.

Wie kann ich den CLS-Wert meiner Webseite messen?

Der CLS-Wert kann mit Tools wie Google PageSpeed Insights, dem Lighthouse-Audit in den Chrome DevTools oder dem Core Web Vitals Bericht in der Google Search Console gemessen werden.

Welche Elemente verursachen am häufigsten Layout-Verschiebungen?

Häufige Verursacher sind Bilder und Videos ohne Größenangaben, dynamisch eingefügte Anzeigen oder Pop-ups, Webfonts, die zu einem Reflow führen, und Inhalte, die durch JavaScript nachträglich in das DOM eingefügt werden.

Beeinflusst CLS direkt mein Google Ranking?

Ja, CLS ist eine der drei Metriken der Core Web Vitals, die seit 2021 als Ranking-Faktor von Google berücksichtigt werden. Ein schlechter CLS-Wert kann sich negativ auf die Sichtbarkeit in den Suchergebnissen auswirken.