Comulative Layout Shift

Ist es nicht ärgerlich, wenn du versehentlich auf das falsche Element auf einer Webseite klickst, weil sich die Elemente auf der Seite beim Laden plötzlich verschoben haben?

Layoutverschiebungen sorgen für ein schlechtes Nutzererlebnis, kommen aber dennoch häufig vor, vor allem auf mobilen Geräten, wo der Viewport durch kleinere Bildschirmgrößen und Auflösungen begrenzt ist.

Google möchte, dass die Verlage auf dieses Verhalten auf der Seite achten und es reduzieren. Um dies zu erreichen, hat Google eine Metrik namens Cumulative Layout Shift (CLS) entwickelt, die Verlage objektiv messen und optimieren können.

In diesem Artikel erfahren wir, was der CLS-Score bedeutet, warum er wichtig ist, wie er gemessen wird, welche Faktoren zu einem schlechten CLS-Score führen und schließlich einige Best Practices, mit denen sich der Score verbessern lässt.

Was ist der CLS Wert?

CLS misst, wie stark sich der Inhalt einer Webseite während des gesamten Rendering-Zyklus verschiebt – oder anders gesagt, es misst die visuelle Stabilität der Webseite.

Als Internetnutzer hast du wahrscheinlich schon einmal erlebt, wie frustrierend es ist, wenn sich der Inhalt einer Webseite mitten in einer Interaktion verschiebt, z. B. wenn du versuchst, auf einen Menüpunkt zu klicken, aber versehentlich auf eine Anzeige klickst, die dich dann auf eine Website eines Drittanbieters führt. Abgesehen davon, dass sie für die Nutzer/innen lästig sind, können Layout-Verschiebungen auch zu größeren Problemen für Web-Publisher/innen führen, z. B. zu hohen Absprungraten und Verstößen gegen die Anzeigenrichtlinien aufgrund von versehentlichen Klicks.

Da Google CLS zu den drei “Core Web Vitals” zählt, kann eine niedrige CLS-Punktzahl die gesamte CWV-Punktzahl nach unten ziehen und zu einer schlechten Note führen. Die jüngsten Aktualisierungen des Google-Suchalgorithmus bevorzugen Websites, die bei der CWV-Bewertung eine gute Note erreichen.

Um es zusammenzufassen: Die Verbesserung der CLS-Bewertung führt nicht nur zu einem besseren Nutzererlebnis, sondern möglicherweise auch zu besseren Suchergebnissen und mehr organischem Traffic von Google.

Wie wird die CLS gemessen?

Immer wenn ein Element, das im Viewport sichtbar ist, seine Startposition ändert, wird die Verschiebung aufgezeichnet und das Element als instabil eingestuft. Es ist wichtig zu wissen, dass eine Layoutverschiebung nur erfasst wird, wenn sichtbare Elemente ihre Startposition auf der Seite ändern, nicht aber, wenn ein neues Element zum DOM hinzugefügt wird oder ein bestehendes Element seine Größe ändert.

Die CLS-Punktzahl setzt sich aus zwei verschiedenen Maßzahlen zusammen, die Layoutverschiebungen erfassen: dem Einflussanteil und dem Abstandsanteil. Der Impact Fraction misst, wie instabil Elemente den Viewport zwischen zwei Frames beeinflussen, indem er die Summe aus dem ursprünglichen Element und der Verschiebung als Verhältnis zur gesamten sichtbaren Fläche misst. Der Abstandsanteil ist der größte Abstand, den ein instabiles Element im Verhältnis zum Ansichtsfenster (entweder horizontal oder vertikal) verschoben hat.

Kumulative Layout-Verschiebung = Auswirkungsanteil * Abstandsanteil

Was ist ein guter CLS-Wert?

Der CLS-Wert wächst proportional zu der Verschiebung, die von instabilen Elementen auf der Seite verursacht wird. Je niedriger der CLS-Wert ist, desto besser für die Benutzerfreundlichkeit.

• Sehr gut: Weniger als 0,1
• Verbesserungsbedürftig: Zwischen 0,1 und 0,25
• Schlecht: Mehr als 0,25

Faktoren, die zu einer schlechten CLS-Bewertung beitragen

Eine schlechte CLS-Bewertung kann richtig nervig für deine Besucher sein. Stell dir vor, du willst gerade auf einen Button klicken und plötzlich rutscht der ganze Inhalt nach unten, weil ein Bild nachgeladen wurde. Nicht cool, oder? Hier einige Faktoren, die zu einer schlechten CLS-Bewertung beitragen können:

Unreservierter Platz für Medienelemente

Wenn du Bilder, Videos oder andere Medienelemente in deine Website einbindest, ohne den Platz dafür im Voraus zu reservieren, kann das den Inhalt nachträglich verschieben. Zum Beispiel kannst du mit CSS die Größe im Voraus festlegen:

img {
aspect-ratio: 16/9;
width: 100%;
}

Webfonts

Webfonts können auch ein Problem sein, vor allem, wenn sie erst spät geladen werden und den bereits angezeigten Text verschieben. Lösung: font-display: swap im CSS verwenden.

Dynamische Inhalte

Beim Nachladen von Werbung oder anderen Inhalten kann der Platz auf der Seite plötzlich für diese neuen Elemente verschoben werden. Das passiert oft bei schlecht integrierten Ad-Slots.

Modale Fenster oder Pop-ups

Wenn ein Pop-up oder ein modales Fenster erscheint und den Hauptinhalt verschiebt, wirkt sich das negativ auf die CLS aus.

Mehrere Aktionen pro Seite

Zum Beispiel ein Accordion-Menü, das sich ausklappt und den Rest des Inhalts verschiebt. Das kann zwar nützlich sein, sollte aber so gestaltet werden, dass es den CLS-Wert nicht negativ beeinflusst.

Buttons oder Links, die nachträglich hinzugefügt werden

Wenn du zum Beispiel einen “Jetzt kaufen”-Button nachlädst und der schiebt den Content weg, ist das auch ein Faktor, der deine CLS-Bewertung verschlechtern kann.

JavaScript, das Layout verschiebt

Manchmal ist es das JavaScript auf der Seite, das nach dem Laden Elemente verschiebt. Hier musst du besonders vorsichtig sein, wenn du Dinge wie AJAX oder dynamische Inhalte verwendest.

Es gibt noch viele andere Faktoren, aber das sind so die häufigsten Übeltäter. Am besten ist es, deine Seite regelmäßig mit Tools wie Google’s Lighthouse oder PageSpeed Insights zu prüfen und speziell auf die CLS-Werte zu achten.

Wie kannst du dein CLS-Ergebnis verbessern?

Eine gute CLS-Bewertung ist Gold wert, nicht nur für das Ranking, sondern auch für die User Experience. Hier sind ein paar Tipps, wie du den CLS-Wert deiner Website verbessern kannst:

Verwende “font-display: swap”

Reserviere Platz für Medienelemente

Stelle sicher, dass du den Raum für Bilder und Videos im Voraus reservierst. Durch die Angabe von Breite und Höhe im HTML oder CSS wird der Browser wissen, wie viel Platz reserviert werden muss. Beispiel:

<img src="bild.jpg" width="300" height="200" alt="Beispielbild">

oder in CSS:

img {
  aspect-ratio: 16/9;
  width: 100%;
}

Das sagt dem Browser, dass er einen Ersatz-Font nutzen soll, bis der Webfont geladen ist. Das vermeidet, dass der Text hin und her springt.

Vermeide unerwartete Pop-ups

Wenn du modale Fenster oder Pop-ups verwendest, versuche, diese so zu gestalten, dass sie den Inhalt nicht verschieben. Oft ist es besser, sie über dem Inhalt anzuzeigen, statt die Seite darunter zu verschieben.

Optimiere dynamischen Content

Wenn du Inhalte wie Werbung oder Forenbeiträge nachlädst, reserviere auch hierfür Platz. Das verhindert, dass der restliche Content verrutscht. Werbeslots sollten also immer eine feste Größe haben.

Nutze CSS-Transitions

Ein sanfter Übergang kann manchmal auch schon helfen. Zum Beispiel könntest du ein Menü oder einen Sidebar sanft ein- und ausfahren, statt es abrupt zu tun.

Reduziere die Anzahl an interaktiven Elementen

Je mehr Dinge sich auf der Seite bewegen, desto mehr Gelegenheiten gibt es für Layout-Verschiebungen. Klar, Interaktion ist wichtig, aber alles in Maßen.

Vermeide JavaScript, das das Layout verschiebt

Dies ist ein großes Thema und es hängt sehr vom individuellen Code ab. Grundregel: JavaScript sollte keine Elemente so verändern oder hinzufügen, dass es den Content verschiebt.

Insgesamt ist es wichtig, dass du deine Website regelmäßig mit Tools wie Google’s Lighthouse oder PageSpeed Insights testest. Achte auf die CLS-Werte und schraube dann an den oben genannten Stellschrauben, um die Bewertung zu verbessern.

Fazit

Der CLS-Wert (Cumulative Layout Shift) ist nicht nur eine SEO-Kennzahl, sondern er hat auch massiven Einfluss auf die User Experience. Wenn deine Seite herumzappelt wie ein Flummi, dann werden die User schneller abspringen, als du “Bounce Rate” sagen kannst. Und wenn sie abspringen, kann das auch negative Auswirkungen auf deine SEO haben. Es ist also ein Teufelskreis.

Denk an dieses nervige Beispiel, bei dem du gerade auf “Kaufen” klicken willst und dann plötzlich eine Werbung nachlädt und du stattdessen auf “Anmelden für unseren Newsletter” klickst. Super frustrierend, oder? Genau solche Erlebnisse misst der CLS-Wert.

Also, in der SEO-Welt gilt: Je niedriger der CLS, desto besser. Du solltest dafür sorgen, dass alle Bilder und Medienelemente eine feste Größe haben, Pop-ups und modale Fenster so wenig wie möglich den Content verschieben und Texte nicht springen, weil plötzlich ein Webfont geladen wird. Setze auf Techniken wie “font-display: swap” im CSS oder reserviere Platz für nachgeladenen Content wie Werbungen und Social-Media-Feeds.

Insgesamt, je stabiler und vorhersehbarer das Layout deiner Seite ist, desto besser für alle: die User, die Suchmaschinen und letztlich auch für dich, weil zufriedene Besucher eher konvertieren oder wiederkommen. Also, schnapp dir Tools wie Google’s Lighthouse und fang an, deinen CLS-Wert zu optimieren. Es lohnt sich!

Hoffentlich hilft dir das Fazit, um die Bedeutung und die Maßnahmen für einen guten CLS-Wert besser zu verstehen. Bei weiteren Fragen, immer her damit!