CLS steht für Cumulative Layout Shift und gehört zu den drei Core Web Vitals, die Google seit 2021 als Ranking-Faktor nutzt. CLS misst, wie sehr sich der Inhalt einer Seite während des Ladens unerwartet verschiebt. Wer kennt das nicht: Man tippt auf einen Button, im selben Moment lädt ein Bild und der Button rutscht nach unten, der Tap landet im falschen Element. Genau das misst CLS. Ein guter CLS-Wert liegt unter 0,1, schlecht ist alles über 0,25. Für professionelles Webdesign in Bielefeld und SEO-Erfolg ist CLS-Optimierung Pflicht, nicht Kür.
Was CLS konkret misst
CLS ist eine dimensionslose Zahl, berechnet als Produkt aus zwei Werten: Impact Fraction (Anteil des Viewports, der sich verschiebt) und Distance Fraction (wie weit sich das Element verschiebt). Der Score wird kumulativ über die gesamte Session berechnet, jeder einzelne Shift addiert. Google misst den Wert am 75. Perzentil der Nutzer und gewichtet seit 2022 Shifts in Sessions-Fenstern, damit lange Sessions nicht künstlich schlechter werden als kurze.
Die häufigsten CLS-Ursachen
Erstens: Bilder ohne explizite Dimensionen. Wenn ein Bild kein width und height hat, weiß der Browser nicht, wieviel Platz er reservieren soll. Sobald das Bild lädt, springt der Inhalt darunter nach unten. Lösung: <img width="800" height="600"> oder CSS aspect-ratio: 16 / 9. Zweitens: Web-Fonts. Wenn der Browser zuerst eine Fallback-Schriftart anzeigt und dann auf die geladene Web-Font wechselt, verschieben sich Zeilenumbrüche. Lösung: font-display: swap und size-adjust in @font-face. Drittens: Dynamisch eingefügte Inhalte. Cookie-Banner, Newsletter-Popups, Ads. Wenn diese den Document-Flow beeinflussen, gibt es einen Shift. Lösung: Overlays mit position: fixed statt Inline-Einfügung.
CLS messen und debuggen
In Google Search Console unter Core Web Vitals findet sich der CLS-Wert mit URL-Liste der schlechtesten Performer. Chrome DevTools im Performance-Tab markiert Layout-Shifts mit roten Bändern. Lighthouse in den DevTools liefert pro-URL einen CLS-Score plus konkrete Fix-Vorschläge. Für kontinuierliches Monitoring lohnt sich die web-vitals JavaScript-Library, die CLS aus echten Nutzer-Sessions an ein Analytics-Tool sendet.
CLS-Optimierung in Next.js-Projekten
Das next/image-Component erzwingt explizite width und height, was CLS automatisch reduziert. Bei next/font werden Web-Fonts mit size-adjust-Metriken ausgeliefert, die Layout-Shifts beim Font-Load minimieren. Skeleton-Loader für lazy-loaded Komponenten verhindern Shifts beim Daten-Nachladen. Bei professionellen Webdesign-Projekten in Bielefeld erreichen wir CLS-Werte unter 0,05 als Standard, gemessen über CrUX nach 4 Wochen Live-Betrieb.
CLS und Conversion-Rate
CLS ist nicht nur ein SEO-Faktor, sondern direkt ein Conversion-Killer. Studien zeigen: Bei CLS über 0,25 sinkt die Conversion-Rate um bis zu 15 Prozent. Nutzer brechen ab, wenn Buttons im Moment des Tippens wegspringen oder Formulare sich beim Ausfüllen verschieben. Wer eine Landingpage erstellt, die verkauft, darf CLS nicht als technisches Detail abtun, sondern als Conversion-Hebel verstehen.