Cumulative Layout Shift (CLS)

Stabilität des Layouts einer Website

Anderer Begriff für Cumulative Layout Shift

StabilitätCLS

Was ist Cumulative Layout Shift (CLS)?

Kurze Erklärung zu First Input Delay

Verschieben sich ungewollt Elemente bei einer Aktion des Website-Besuchers? Das Cumulative Layout Shift misst das Ausmaß.

Detailierte Erläuterung zu First Input Delay

Nach einer Aktion, die ein Besucher auf der Website ausgelöst hat, sollten sich Elemente nicht verschieben. Stattdessen sollte das Layout stabil bleiben. Ein unnötiges Verschieben der Elemente würde lediglich irritieren und die Aufmerksamkeit des Besuchers von seinem Suchinteresse oder seiner Kaufintention ablenken.

Welche Mängel misst das Cumulative Layout Shift?

Vielsurfer im Internet haben es bereits einmal erlebt: Bei den Inhalten von Pulldown-Menüs überlagert sich beim Öffnen mit Mouseover die Schrift mehrerer Inhalte oder die Unterpunkte des Menüs sind nicht stabil und nur schwer anklickbar. Dies ist durch einen geduldigen Besucher noch lösbar.

Umständlicher wird es, wenn sich kurz vor oder während des Klicks auf einen Button die Buttons verschieben. Dann wird durch den Klick auf den falschen Button ein unerwünschter Ladevorgang ausgelöst.

Vereinfach gesagt wird durch das Cumulative Layout Shift gemessen, wie weit sich das Layout verschiebt. Je weiter dieser Shift - auf deutsch: die Verlagerung - ausufert, desto unangenehmer ist es für den Besucher, mit dieser Website zu interagieren.

Wie wirkt sich fehlende Stabilität auf den Website-Besucher aus?

Bei der Website sind zwei Punkte wesentlich für den Besucher, um mit einer Website angenehm arbeiten zu können. Das sind die Wahrnehmung und die Interaktion. Bei der Wahrnehmung nimmt der Besucher Informationen oder Werbung auf oder sieht, an welcher Stelle sich Buttons und Links befinden, die ihn zum Ziel führen. Bei der Interaktion gibt der Besucher Kommandos an die Website, um zu weiteren Informationen zu gelangen oder um Artikel in den Warenkorb zu legen.

Das Interesse des Webseiteninhabers und des Besuchers sind gleich: Die Website muss dabei stabil bleiben. Zusätzlich fließt das Cumulative Layout Shift bei Google in den Rankingfaktor ein.

Wie kann man die Stabilität verbessern?

Fix geht das nicht. Dies gelingt über die Qualität der Programmierung. Elemente werden mit Höhen- und Breitenangaben versehen. Kritische Elemente sollten zuerst geladen werden. Auf das Einfügen von Werbe-Bannern sollte ggf. verzichtet werden.

Erfahrene Webagenturen haben bereits ihre Lernphase hinter sich und bringen die Erfahrung mit, welche Elemente Unruhe in das Layout bringen. Für einen Web-Programmierer ist es allerdings oft einfacher, eine Website neu zu programmieren als den Code des vorherigen Programmierers zu optimieren. Dies liegt daran, dass langjährige Programmierer bereits ihren eigenen Werkzeugkasten entwickelt haben und wissen, worauf sie sich verlassen können und was funktioniert.

Weitere Aspekte von Core Web Vitals

Über die Stabilität hinaus gibt es zwei noch die Ladezeit und die Reaktionszeit. Beide beschäftigen sich nicht mit dem Layout, sondern mit der Geschwindigkeit, die eine Website bietet. Wir haben zu jedem der beiden Aspekte im Glossar eine Erklärung hinterlegt. Einen Einstieg in das Google-Update bietet unser Artikel Core Web Vitals: entscheidend für das SEO?

Webseiten, Onepager und Landingages planen, strukturieren und Ziele definieren

Mythen zur Barrierefreiheit von Webseiten

Was ist dran an den Mythen zur Barrierefreiheit? Lediglich die Pflicht gegenüber dem Gesetz oder beinhaltet ein barrierefreies Webdesign auch Chancen?

TYPO3 Webseiten Redaktion

Gezielte Benutzerführung auf der Website

Steurern Sie mit einer übersichtliche Navigationsstruktur die Besucher Ihrer Website dirket zum Ziel.

Internetdienste von Google

Google Webfonts und die DSGVO Webfonts sicher einbinden

Google Webfonts sind eine schnelle Möglichkeit, beliebte Schriften auf der eigenen Website einzubinden jedoch ist dies nicht immer DSGVO-komform.

Erstcheck Webseite