CLS (Cumulative Layout Shift) misst, wie sehr sich der Inhalt deiner Seite während des Ladens unerwartet verschiebt. Du kennst das: Du willst auf einen Link klicken, im letzten Moment springt der Text nach unten, weil ein Banner nachgeladen wurde — und du klickst auf etwas Falsches. Der "Gut"-Schwellenwert liegt unter 0,1. Die häufigsten CLS-Killer sind Bilder ohne feste Größenangaben, Werbebanner ohne reservierten Platz und Cookie-Banner, die plötzlich von oben einfahren.
Jedes Bild auf deiner Seite braucht explizite width- und height-Attribute im HTML: <img src="foto.jpg" width="800" height="600" alt="...">. Der Browser kann damit den Platz reservieren, bevor das Bild geladen ist.
Reserviere immer den Platz für Anzeigen und externe Inhalte mit einer festen Höhe im CSS, auch wenn der Inhalt noch nicht geladen ist.
Nutze font-display: swap oder font-display: optional für Web Fonts. Ohne diese Einstellung kann der Wechsel vom Fallback-Font zum Web Font einen Layout Shift verursachen.
Cookie-Banner, die von oben oder unten einfahren, verursachen CLS. Lösung: Platz reservieren oder als Overlay gestalten, das keinen anderen Inhalt verschiebt.
Teil des Vatha-Netzwerks.