Cumulative Layout Shift (CLS) misst, wie stark sich Inhalte beim Laden einer Seite unerwartet verschieben. Ein hoher CLS-Wert entsteht meist durch Bilder ohne feste Abmessungen, spät ladende Schriftarten, dynamisch eingebundene Werbung oder Banner sowie Skripte, die Inhalte nach unten drücken. Indem du Abmessungen vorab reservierst, Fonts intelligent lädst und dynamische Elemente kontrollierst, senkst du CLS nachhaltig und verhinderst frustrierende Klicks auf das falsche Element.
Was ist CLS und warum ist es wichtig
CLS ist einer der Core Web Vitals, mit denen Google die Nutzererfahrung einer Website bewertet. Er zeigt, wie stabil die visuelle Darstellung einer Seite während des Ladens ist. Verschiebt sich ein Button genau in dem Moment, in dem ein Besucher darauf klicken möchte, zählt das als negative Erfahrung. Neben dem Einfluss auf die Suchergebnisse sorgt ein niedriger CLS-Wert vor allem für eine angenehmere, zuverlässigere Website, auf der Besucher nicht versehentlich auf den falschen Link klicken.
Häufige Ursachen für Layout-Verschiebungen
Die häufigsten Ursachen für einen hohen CLS-Wert sind gut erkennbar:
- Bilder und Videos ohne width- und height-Attribute, wodurch der Browser erst nach dem Laden Platz reserviert.
- Webfonts, die sichtbar gegen eine Systemschrift ausgetauscht werden (Flash oder Invisible Text), wodurch sich die Breite von Textzeilen ändert.
- Werbung, Banner oder Embeds, die ohne reservierten Platz nachgeladen werden.
- Inhalte, die per JavaScript oberhalb bestehender Inhalte eingefügt werden, wie Cookie-Hinweise oder Benachrichtigungen.
- Animationen, die andere Elemente verschieben, statt ausschließlich transform zu verwenden.
CLS Schritt für Schritt verbessern
Gib Bildern und Videos feste Abmessungen
Füge Bildern und Videos immer width- und height-Attribute hinzu oder nutze CSS aspect-ratio. So reserviert der Browser sofort den richtigen Platz, noch bevor die Datei geladen ist.
Lade Schriftarten intelligent
Nutze font-display: swap oder optional in deinem CSS und erwäge, kritische Fonts lokal zu hosten statt über ein externes Schriftarten-Netzwerk. So verhinderst du große Verschiebungen beim Schriftwechsel.
Reserviere Platz für Werbung und Embeds
Gib Containern für Werbung, iFrames und Embeds in CSS eine feste Mindesthöhe, damit sie beim Laden keine anderen Inhalte verdrängen.
Platziere dynamische Inhalte bewusst
Zeige Benachrichtigungen, Pop-ups oder Cookie-Banner vorzugsweise als Overlay an, statt sie oben in die Seite einzufügen. So drängen sie bestehende Inhalte nicht nach unten.
Nutze transform für Animationen
Animiere Elemente mit CSS transform und opacity statt mit Eigenschaften wie top, left oder margin, damit sich das Layout anderer Elemente nicht ändert.
CLS messen und überprüfen
Überprüfe regelmäßig, ob deine Verbesserungen Wirkung zeigen. Browser-Tools mit Leistungsmessungen zeigen pro Seite, welche Elemente für Layout-Verschiebungen verantwortlich sind, sodass du gezielt nachjustieren kannst. Beachte, dass auch Caching und Serverleistung beeinflussen, wie schnell Inhalte laden: Ein langsamer Server erhöht die Wahrscheinlichkeit, dass Bilder oder Schriftarten später eintreffen und dadurch weiterhin Verschiebungen verursachen. Bei Tandata läuft das Webhosting auf NVMe-Speicher mit LiteSpeed-Servern, was für schnelle Reaktionszeiten sorgt; über Plesk findest du zudem einfach Einstellungen für Caching und SSL, die zu einem stabileren Ladeerlebnis beitragen. Mehr Hintergrundwissen zu Servereinstellungen und Optimierung findest du in der Wissensdatenbank.
Häufig gestellte Fragen
Was ist ein guter CLS-Wert?
Ein niedriger Wert, nahe null, bedeutet, dass sich deine Seite beim Laden kaum verschiebt. Strebe möglichst wenige unerwartete Verschiebungen in den ersten Sekunden nach dem Laden an.
Verursacht ein Cookie-Banner immer CLS?
Nur, wenn der Banner bestehende Inhalte nach unten drückt. Zeigst du den Banner als Overlay über der Seite an, hat er keinen Einfluss auf das Layout des restlichen Inhalts.
Hilft ein schnellerer Server gegen CLS?
Ja, indirekt. Ein schnellerer Server sorgt dafür, dass Bilder, Schriftarten und Skripte schneller eintreffen, wodurch die Wahrscheinlichkeit sinkt, dass sich Inhalte später noch verschieben.
Muss ich CLS für jede Seite einzeln beheben?
Die meisten Ursachen, etwa fehlende Abmessungen bei Bildern oder falsch geladene Schriftarten, treten oft websiteweit auf. Behebst du sie in einem Theme oder einer Vorlage, verbesserst du sofort mehrere Seiten gleichzeitig.
Fazit
CLS verbesserst du, indem du Bildern und Videos feste Abmessungen gibst, Schriftarten intelligent lädst, Platz für dynamische Inhalte reservierst und Animationen mit transform umsetzt. Kombiniere diese Anpassungen mit einer schnellen, zuverlässigen Hosting-Umgebung für das beste Ergebnis.