Was ist CLS (Cumulative Layout Shift) und warum ist es so lästig?

Sie öffnen eine Website, wollen auf einen Button klicken, und im letzten Moment verschiebt sich alles, weil darüber eine Anzeige oder ein Bild nachlädt. Jetzt haben Sie versehentlich auf etwas anderes geklickt. Frust. Genau dieses Problem misst Google mit CLS: Cumulative Layout Shift.

Welche CLS-Werte sind gut?

• Unter 0,1: gut. Die Seite bleibt beim Laden stabil.
• 0,1 bis 0,25: mäßig. Besucher merken es.
• Über 0,25: schlecht. Ärgerlich, und Google straft Ihre Rankings ab.

Was verursacht einen hohen CLS?

1. Bilder ohne Größenangaben: Wenn Ihr HTML nicht angibt, wie groß ein Bild wird, lässt der Browser eine leere Lücke und füllt sie erst, wenn das Bild geladen ist. Alles darunter springt dann nach unten.
2. Anzeigen, die erst später laden: beliebt bei Nachrichtenseiten, oft der größte Übeltäter.
3. Schriften, die später nachladen: Text erscheint zuerst in einer Systemschrift und wird dann auf Ihre eigene Schrift umgestellt. Ist die Größe anders, verspringt der Text.
4. Eingebettete Videos oder iframes ohne feste Größe

Was kann Ihr Webentwickler tun?

Konkrete Maßnahmen:

• Immer width und height bei Bildern und iframes angeben
• Platz für Anzeigen mit einer festen Containerhöhe reservieren
• font-display: swap mit einer guten Ersatzschrift verwenden
• Inhalte im sichtbaren Bereich (above the fold) zuerst und ohne Unterbrechung laden

Warum ist das ein Rankingfaktor?

Google zählt CLS zu den „Core Web Vitals“. Seit 2021 fließt es offiziell ins Ranking ein. Bei zwei inhaltlich identischen Websites gewinnt die mit CLS 0,05 gegen die mit CLS 0,4.