Was ist Cumulative Layout Shift (CLS)?

CLS misst die visuelle Stabilität – also wie stark sich der Seiteninhalt während des Ladens verschiebt. Halten Sie den Wert unter 0.1, indem Sie Bildabmessungen angeben, eingefügte Inhalte vermeiden und CSS-Transformationen anstelle von Eigenschaftsänderungen verwenden.

Was ist Cumulative Layout Shift (CLS)?

CLS ist einer der Core Web Vitals von Google und dient der Quantifizierung visuelle Stabilität auf einer Seite. Es verfolgt Fälle, in denen sich Inhalte während des Ladens einer Seite unerwartet verschieben, beispielsweise wenn sich Text, Bilder oder Schaltflächen plötzlich bewegen.

Wenn Sie beispielsweise auf eine Schaltfläche klicken und darüber eine Anzeige geladen wird, wodurch die Schaltfläche verschoben wird, zählt dies als Layoutverschiebung. Seiten mit hohem CLS führen zu einer schlechten Benutzererfahrung, höheren Absprungraten und können in den Suchergebnissen schlechter platziert werden.

Durch die Überwachung und Verbesserung von CLS schaffen Sie ein reibungsloseres und vorhersehbareres Browsererlebnis, das sowohl den Benutzern als auch der SEO-Leistung zugutekommt.

CLS in verschiedenen CMS-Plattformen

WordPress

WordPress-Websites haben häufig mit CLS-Problemen aufgrund schwerer Plugins, langsam ladender Bilder oder nicht optimierter Designs zu kämpfen. Durch die Optimierung der Bildgröße, Lazy Loading und die Verwendung leichter Designs lassen sich Layoutverschiebungen reduzieren.

Shopify

In Shopify-Shops kann es aufgrund dynamischer Produktbilder, Popups oder Werbebanner zu CLS kommen. Die Implementierung geeigneter Bildabmessungen und die Minimierung von Drittanbieter-Skripten tragen zur Stabilisierung des Layouts bei.

Wix

Wix-Benutzer sollten sich auf die Größenänderung von Bildern konzentrieren, automatisch geladene Banner vermeiden und auf responsives Design achten, um Layoutverschiebungen zu minimieren.

Webfluss

Webflow ermöglicht eine präzise Kontrolle über die Positionierung und Größe von Elementen und erleichtert so die Vermeidung CLS. Einheitliche Abstände, statische Abmessungen und kontrollierte Animationen sind entscheidend.

Benutzerdefiniertes CMS

Große benutzerdefinierte CMS-Plattformen erfordern strenge Tests, CSS-Optimierung und sorgfältiges Skriptmanagement, um einen niedrigen CLS auf allen Seiten sicherzustellen, insbesondere auf Zielseiten mit hohem Datenverkehr.

CLS branchenübergreifend

E-Commerce

Ein hoher CLS kann Käufer frustrieren, insbesondere auf Produktseiten. Stabile Bilder, Preisschilder und Call-to-Action-Buttons verbessern die Conversion-Rate.

Lokale Unternehmen

Sogar kleine Service-Websites profitieren von einem niedrigen CLS, da unvorhersehbare Layoutänderungen Benutzer davon abhalten können, Kontakt mit der Site aufzunehmen oder auf ihr zu navigieren.

SaaS

Bei SaaS-Plattformen verhindern stabile Dashboards, Funktionsbeschreibungen und Anmeldeformulare Benutzerfrustration und verbessern das Onboarding-Erlebnis.

Blogs & Verlage

Blogger müssen sicherstellen, dass sich Bilder, Anzeigen und eingebettete Medien nicht unerwartet bewegen, um die Aufmerksamkeit der Leser aufrechtzuerhalten und die Absprungraten zu senken.

Gebote und Verbote von CLS

DOS

• Legen Sie für Bilder und Videos eine explizite Breite und Höhe fest.

• Reservieren Sie Platz für Anzeigen, Banner und dynamische Inhalte.

• Testen Sie Seiten mit Tools wie Google PageSpeed ​​Insights oder Lighthouse.

• Implementieren Sie stabile Schriftarten und vermeiden Sie Layoutverschiebungen während des Seitenladevorgangs.

Don'ts

• Erlauben Sie nicht, dass Inhalte ohne reservierten Speicherplatz asynchron geladen werden.

• Verlassen Sie sich bei der Behebung von CLS nicht ausschließlich auf Plugins.

• Fügen Sie keine Popups oder Banner hinzu, die plötzlich erscheinen.

• Ignorieren Sie nicht die Reaktionsfähigkeit von Mobilgeräten. CLS-Probleme sind auf Mobilgeräten oft schlimmer.

Häufige zu vermeidende Fehler

• Die Abmessungen für Bilder, Videos oder Einbettungen konnten nicht definiert werden.

• Spätes Laden von Drittanbieterskripten ohne reservierten Speicherplatz.

• Übersehen von Animationen, die Layoutverschiebungen auslösen.

• Ignorieren der mobilen Optimierung für inhaltsreiche Seiten.

Häufig gestellte Fragen

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) ist eine Metrik, die unerwartete Layoutverschiebungen während der Ladephase einer Webseite quantifiziert. Sie misst die visuelle Stabilität einer Seite, indem sie berechnet, wie stark sich sichtbare Inhalte im Ansichtsfenster verschieben, während die Seite geladen wird.

Warum ist CLS für SEO wichtig?

CLS ist eine von Google verwendete Kennzahl der Core Web Vitals zur Bewertung der Nutzererfahrung. Ein hoher CLS-Wert kann zu einer schlechten Nutzererfahrung führen, was sich negativ auf das Suchmaschinenranking auswirken kann.

Was sind die Ursachen für hohe CLS-Werte?

Häufige Ursachen sind:

• Bilder oder Videos ohne angegebene Abmessungen

• Anzeigen, Einbettungen oder Iframes ohne reservierten Platz

• Dynamisch injizierter Inhalt

• Webfonts verursachen beim Laden unsichtbaren Text

• Skripte von Drittanbietern, die das DOM ändern

Was gilt als gutes CLS-Ergebnis?

Ein CLS-Wert von 0.1 oder weniger gilt als gut und weist auf minimale unerwartete Layoutverschiebungen hin. Werte zwischen 0.1 und 0.25 sind verbesserungswürdig, Werte über 0.25 sind schlecht und sollten korrigiert werden.

Wie können Sie CLS verbessern?

So verbessern Sie CLS:

• Breite und Höhe für alle Bilder und Videos festlegen

• Reservieren Sie Platz für Anzeigen und Einbettungen

• Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten

• Verwenden Sie „font-display: swap“ für Web-Schriftarten

• Stellen Sie sicher, dass Skripte von Drittanbietern asynchron geladen werden