Kumulative Layout-Verschiebung (CLS)

Was ist die kumulative Layout-Verschiebung (CLS)?

Cumulative Layout Shift (CLS) ist eine von Google entwickelte Core Web Vitals-Metrik zur Messung der visuellen Stabilität einer Webseite. Sie quantifiziert die Summe aller unerwarteten Layoutverschiebungen, die während der gesamten Lebensdauer der Seite auftreten. Layoutverschiebungen treten auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.

Wie das CLS gemessen wird

Die CLS-Bewertungen reichen von 0, d. h. keine Verschiebung, bis zu Werten über 0, die unterschiedliche Grade der Instabilität anzeigen. Die Formel berücksichtigt den Auswirkungsanteil und den Entfernungsanteil jeder Verschiebung und berechnet, wie stark sich die Elemente bewegen und wie viel des Ansichtsfensters sie abdecken.

Interpretation des CLS-Ergebnisses

• Gut: 0 - 0,1
• Verbesserungsbedürftig: 0.1 - 0.25
• Schlecht: über 0,25

Warum ist CLS wichtig?

CLS ist für die Benutzerfreundlichkeit von entscheidender Bedeutung, da unerwartete Layoutverschiebungen zur Frustration der Benutzer führen können. Wenn ein Nutzer beispielsweise gerade auf eine Schaltfläche klicken will und das Layout sich verschiebt, so dass er unbeabsichtigt auf etwas anderes klickt, kann dies zu einer schlechten Nutzererfahrung und einem potenziellen Verlust von Konversionen führen.

Häufige Ursachen für ein schlechtes CLS

1. Bilder ohne Abmessungen:

   • Wenn Sie Bilder in Ihren HTML-Code einfügen, ohne deren Breite und Höhe anzugeben, kann dies zu Layout-Verschiebungen führen, da der Browser nicht weiß, wie viel Platz er zunächst zuweisen soll.

2. Anzeigen, Einbettungen und Iframes ohne Abmessungen:

   • Diese Elemente können dynamisch geladen werden und Layoutverschiebungen verursachen, wenn ihre Abmessungen nicht im Voraus festgelegt werden.

3. Dynamisch eingefügter Inhalt:

   • Das Hinzufügen von Inhalten über bestehenden Inhalten im DOM kann Elemente nach unten verschieben, was zu Verschiebungen führt.

4. Web-Schriften, die FOIT/FOUT verursachen:

   • Flash of Invisible Text (FOIT) und Flash of Unstyled Text (FOUT) können Layout-Verschiebungen verursachen, wenn der Browser Web-Schriften lädt.

Bewährte Praktiken zur Minimierung von CLS

1. Größenattribute für Bilder und Videos einfügen:

   • Definieren Sie immer die Breite und Höhe von Bildern und Videos im HTML-Code, um Platz im Layout zu reservieren, bevor sie geladen werden.

2. Platz für Anzeigen und Einbettungen reservieren:

   • Verwenden Sie CSS, um die Abmessungen für Anzeigenplätze, Iframes und Einbettungen festzulegen, damit sich das Layout beim Laden nicht verschiebt.

3. Vermeiden Sie die dynamische Einfügung von Inhalten über bereits vorhandene Inhalte:

   • Fügen Sie neue Inhalte unterhalb des Falzes oder in Containern ein, die bereits einen reservierten Platz haben.

4. Verwenden Sie Strategien zum Laden von Schriften:

   • Verwenden Sie die CSS-Eigenschaft font-display, um die Anzeige von Web-Schriften zu steuern und Verschiebungen aufgrund von FOIT/FOUT zu minimieren.

5. Verwenden Sie CSS Transform für Animationen:

   • Verwenden Sie die Eigenschaft "transform" anstelle von "oben", "unten", "links" oder "rechts", um Elemente zu animieren, ohne Layoutverschiebungen zu verursachen.

Schlussfolgerung

Die kumulative Layoutverschiebung (CLS) ist eine wichtige Kennzahl zur Gewährleistung einer stabilen und optisch ansprechenden Benutzererfahrung. Wenn Sie die Faktoren verstehen, die zu Layoutverschiebungen beitragen, und Best Practices zur Minimierung dieser Faktoren implementieren, können Sie den CLS-Wert Ihrer Website verbessern und die allgemeine Nutzerzufriedenheit steigern.

Weitere Informationen zur Verbesserung von CLS und anderen Core Web Vitals finden Sie in der Web Vitals-Dokumentation von Google.