Cumulative Layout Shift (CLS)

Was ist Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift (CLS) ist eine Metrik in Lighthouse für die Ladegeschwindigkeit einer Website.

Der CLS-Wert misst die visuelle Stabilität. CLS quantifiziert, wie stark sich der Inhalt einer Seite visuell verschiebt. Verschiebungen (dynamisches Einfügen von Inhalten, Bilder, Laden von Schriftarten…) können zu einer schlechten Benutzererfahrung führen.

Warum ist CLS wichtig?

Ein hoher CLS-Wert kann darauf hindeuten, dass Nutzer Schwierigkeiten haben, mit einer Seite zu interagieren, weil sich Inhalte unerwartet bewegen. Dies kann zu Frustration führen und die User Experience verschlechtern.

Was ist ein guter CLS-Wert?

Laut Google sollte der CLS-Wert einer Seite unter 0,1 liegen, um als “gut” eingestuft zu werden.

Welche Faktoren können zu einem hohen CLS beitragen?

Zu den Hauptursachen für unerwartete Layout-Verschiebungen gehören:

• Bilder oder Videos ohne Abmessungen
• Dynamisch injizierter Inhalt
• Webfonts, die nachträglich geladen werden
• Elemente, die beim Laden nachträglich hinzugefügt werden
• Widgets und eingebettete Inhalte, die in Größe oder Position variieren

Wie kann ich den CLS meiner Webseite überprüfen?

Sie können Tools wie Google PageSpeed Insights, Lighthouse oder den Chrome DevTools verwenden, um den CLS-Wert Ihrer Webseite zu überprüfen.

Wie kann ich den CLS-Wert meiner Webseite verbessern?

Einige Vorschläge zur Verbesserung des CLS umfassen:

• Geben Sie Bilder und Videos immer feste Größenangaben.
• Vermeiden Sie es, Inhalte dynamisch oberhalb des bereits sichtbaren Inhalts hinzuzufügen.
• Laden Sie Webfonts mit font-display: optional oder verwenden Sie das preload-Attribut.
• Reservieren Sie Platz für Werbeanzeigen oder eingebettete Inhalte.

Spielt CLS eine Rolle bei SEO?

Ja, CLS gehört zu den Core Web Vitals, welche von Google als Rankingfaktoren für die Suchmaschinenoptimierung verwendet werden. Ein schlechter CLS-Wert kann also potenziell die Position Ihrer Seite in den Suchergebnissen beeinträchtigen.

Hat CLS Auswirkungen auf mobile Geräte und Desktop-Geräte gleichermaßen?

Ja, CLS kann sich sowohl auf mobilen als auch auf Desktop-Geräten auswirken. Es ist wichtig, beide Erfahrungen zu optimieren, da die visuelle Stabilität auf beiden Gerätetypen wichtig ist.