Comulative Layout Shift

« Back to Glossary Index

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 die kumulative Layoutverschiebung?

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 kumulative Layoutverschiebung 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

Keine Angabe von Breite und Höhe für Bilder

Werbeanzeigen, iFrames und eingebettete Elemente ohne Größenangabe

Einfügen von dynamischen Inhalten auf der Seite

Webfonts, die ein Aufblitzen von ungestyltem Text (FOUT) und/oder ein Aufblitzen von unsichtbarem Text (FOIT) verursachen

Aktionen, die auf eine Netzwerkantwort warten, bevor sie das DOM aktualisieren

Wie kannst du dein CLS-Ergebnis verbessern?

Hier sind ein paar Empfehlungen, um instabile Elemente/verschiebendes Verhalten zu reduzieren:

  • Je nachdem, wie deine Website strukturiert ist, können verschiedene Webseiten unterschiedliche CLS-Werte erhalten. Zum Beispiel können deine Artikelseiten einen besseren CLS-Wert haben als die Startseite. Beginne damit, den CLS-Wert aller wichtigen Seitenvorlagen auf deiner Website zu messen.
  • Lege immer die Größenattribute Breite und Höhe für Bilder und Videos fest. Lege Seitenverhältnisse für responsive Bilder fest. Alternativ kannst du den benötigten Platz für die Elemente mit Hilfe von CSS-Seitenverhältnis-Boxen reservieren. Auf diese Weise wird sichergestellt, dass der Browser den richtigen Platz im Dokument zuweisen kann, während die Elemente geladen werden.
  • Die Anzeigenschaltung kann erheblich zu Layoutverschiebungen beitragen, wenn die Platzierung nicht richtig optimiert ist. Beginne damit, statisch Platz für Anzeigenplätze zu reservieren und vermeide es, diesen reservierten Platz durch die Verwendung eines Platzhalters zu verkleinern, wenn keine Anzeige zurückgegeben wird. Sei außerdem vorsichtig, wenn du nicht haftende Anzeigen am oberen Rand des Viewports platzierst, da diese den Inhalt nach unten drücken können.
  • Vermeide es, dynamische Inhalte über bereits geladene Inhalte einzublenden, es sei denn, es handelt sich um eine Reaktion auf eine Nutzerinteraktion – in diesem Fall wird die Verschiebung des Layouts erwartet.
  • Optimiere Webschriftarten, indem du font:display-Werte einstellst, vorlädst oder die Font Loading API verwendest.
  • Wenn du Animationen verwendest, bevorzuge Umwandlungen gegenüber Typen, die Layoutänderungen auslösen können.

Je nachdem, wie viele dieser Best Practices du bereits befolgst, musst du vielleicht eine Menge Änderungen vornehmen, um Layoutverschiebungen zu reduzieren. Anstatt zu versuchen, alles auf einmal zu machen, ist es eine gute Idee, alles aufzuschlüsseln und den schrittweisen Effekt jeder Optimierung zu messen.

« Back to Glossary Index

Mit Spitzenpositionen zum neuen Umsatzkanal.

Lass Google für Dich arbeiten, denn aus Besuchern werden Kunden.

Über den Autor

Dein kostenfreies Geschenk!

Das SEO Praxisbuch
2022

Du willst mehr Besucher und bessere Google Rankings?

Lad dir jetzt kostenlos das SEO Praxisbuch
“Die 7 SEO Sünden” herunter.