Cumulative Layout Shift
Cumulative Layout Shift
CLS ist eine Metrik, die die visuelle Stabilität einer Seite misst. Das heißt, es wird aufgezeichnet, wie oft sich Elemente auf einer Seite bewegen, während die Seite geladen wird.
Als Programmierer oder Webseitenbetreiber weißt du, dass Geschwindigkeit wichtig ist - nicht nur für deine Nutzer, sondern auch für dein Google-Ranking. Deshalb suchst du immer nach Möglichkeiten, die Geschwindigkeit deiner Website zu optimieren, z. B. durch die kumulative Layoutverschiebung (CLS).
Was ist Cumulative Layout Shift?
CLS ist eine Metrik, die die visuelle Stabilität einer Seite misst. Das heißt, es wird aufgezeichnet, wie oft sich Elemente auf einer Seite bewegen, während die Seite geladen wird. Ein hoher CLS-Wert zeigt an, dass sich viele Elemente auf der Seite bewegen, was für die Nutzer/innen frustrierend sein kann. Ein niedriger CLS-Wert bedeutet dagegen, dass die Seite reibungslos und ohne plötzliche Änderungen geladen wird.
Wie wird der CLS-Wert gemessen?
CLS wird gemessen, indem die Summe aller individuellen Layoutverschiebungswerte für jede unerwartete Layoutverschiebung, die während der gesamten Lebensdauer der Seite auftritt, gebildet wird. Die Endpunktzahl wird dann mit 1.000 multipliziert, um eine CLS-Punktzahl zu erhalten, die von 0 (keine unerwarteten Layoutverschiebungen) bis 1 (jedes Element auf der Seite wurde unerwartet verschoben) reicht
Wie kann ich mein CLS-Ergebnis verbessern?
Es gibt verschiedene Möglichkeiten, dein CLS-Ergebnis zu verbessern, z.B.:
Minimiere unerwartete Layoutverschiebungen, indem du z. B. mit CSS Platz für Anzeigenplätze reservierst oder das späte Laden von Widgets von Drittanbietern vermeidest
Wenn du Widgets von Drittanbietern einbinden musst, sorge dafür, dass sie keine plötzlichen Layoutverschiebungen verursachen, indem du sicherstellst, dass sie vor anderen Elementen auf der Seite geladen werden
Quick-Fix: In den meisten Fällen erreicht man durch diese Änderung schon eine deutliche Verbesserung in Googles PageSpeed-Rankings: Achte darauf, dass alle Bilder eindeutige Breiten- und Höhenattribute haben, damit der Browser weiß, wie viel Platz er für sie reservieren muss, bevor sie geladen werden.
Verwende font-display: optional oder font-display: swap, wenn du Webschriften lädst, um sicherzustellen, dass sie kein FOIT/FOUT und damit keine Layout-Verschiebungen verursachen
Wenn du diese Tipps befolgst, kannst du plötzliche Layout-Änderungen minimieren und deinen CLS-Wert - und die Gesamtgeschwindigkeit deiner Website - verbessern.
Die kumulative Layoutverschiebung (CLS) ist eine wichtige Kennzahl, die du bei der Messung der Geschwindigkeit deiner Website berücksichtigen solltest. Und zum Glück gibt es einige einfache Möglichkeiten, deinen Wert zu verbessern. Indem du plötzliche Layout-Änderungen auf ein Minimum reduzierst und Techniken wie die Reservierung von Platz für Anzeigen und die explizite Definition von Bildbreiten- und -höhenattributen einsetzt, kannst du deinen CLS-Wert senken und deine Website benutzerfreundlicher gestalten.
Was ist Google PageSpeed Insights?
PageSpeed Insights ist ein Tool, das den Inhalt einer Webseite analysiert und Vorschläge macht, wie Sie diese Seite schneller machen können. PageSpeed Insights ist als webbasierte Anwendung und als mobile Anwendung für Android- und iOS-Geräte verfügbar. PageSpeed Insights kann die Leistung einer Webseite anhand von zwei Metriken analysieren: Geschwindigkeit und Benutzerfreundlichkeit. Die Geschwindigkeit misst, wie schnell eine Seite geladen wird, während die Benutzerfreundlichkeit misst, wie einfach die Nutzung einer Seite ist. PageSpeed Insights gibt auch Hinweise darauf, wie Sie die Geschwindigkeit und die Benutzerfreundlichkeit einer Webseite verbessern können.