Der CLS beschreibt die unerwartete Verschiebung des Contents während des Ladevorgangs und ist somit ein Indikator für die Usability einer Website. Falls Google PageSpeed Insights ein oranges oder gar rotes Ergebnis liefert, besteht Handlungsbedarf. Wie Sie den Wert messen und gegebenenfalls verbessern können, erfahren Sie hier!
Die eigene Website testen
Am Anfang steht natürlich ein Test mit Hilfe von Google PageSpeed Insights an. Öffnen Sie hierfür das Tool von Google und geben Sie die zu testende URL an. Nach ein paar Sekunden bekommen Sie eine Übersicht der wichtigsten Faktoren, die so genannten Web Vitals. Einer davon ist der „Cumulative Layout Shift“, kurz „CLS“.
Das Ergebnis interpretieren
Liegt der CLS unter 0,1, ist alles in Ordnung und Sie müssen keine Optimierung vornehmen. Liegt der Wert jedoch darüber, sollten Sie auf jeden Fall Maßnahmen ergreifen um den Wert, welcher mittlerweile rankingrelevant für Google ist, zu verbessern.
Analyse 1: Beobachten
Ist der CLS zu hoch, gilt es herauszufinden, welche Elemente auf der Webseite schuld daran sind. Im ersten Schritt gilt es also mit freiem Auge zu beobachten, welche Elemente sich während des Ladevorgangs verschieben.
Um die möglichen Verschiebungen gut sichtbar zu machen, kann man in Chrome die Developer-Tools nutzen. Um diese zu öffnen, nutzt man einfach den Shortcut Shift + CTRL + J oder F12 unter Windows oder Option + ⌘ + J am Mac. Einmal geöffnet, kann man im Tab „Netzwerk“ im Throttling-Bereich „Slow 3G“ auswählen und die Seite neu laden.
Diese Einstellung simuliert eine sehr langsame Internetverbindung unter welcher die Layoutverschiebung meistens besonders gut sichtbar wird. Ist hier zum Beispiel ersichtlich, dass die Hauptnavigation sich während des Ladevorgangs verschiebt oder erst aufbaut, kann man an diesem Element ansetzen und ggf. die CSS-Anweisungen für dieses Element above-the-fold, also vor dem Inhalt, auslagern.
Analyse 2: Layout Shift Regions
Sind die Verschiebungen nicht freiem Auge sichtbar, gibt es noch eine weitere Möglichkeit mit den Developer-Tools die verursachenden Elemente zu finden. Hierfür öffnet man erneut die Developer-Tools in Chrome und drückt die Escape-Taste. Ein neues Menü erscheint und man wählt den Reiter „Rendering“ aus. Setzt man dann den Haken beim Feld Layout Shift Regions, werden die betroffenen Elemente bei einem Seitenreload farblich hinterlegt.
Analyse 3: PageSpeed Insights
Weitere Hinweise auf die Position der Layoutverschiebung, liefern uns die Goolge PageSpeed Insights. Dieses Tool von Google zeigt nicht nur auf, dass es Probleme mit dem CLS gibt, sondern gibt auch konkrete Hinweise auf die Position. Nach dem Check gibt es ein Akkordeon mit dem Titel „Umfangreiche Layoutverschiebungen vermeiden“. Klappt man dieses auf, werden konkrete problematische Elemente auf der Webseite aufgelistet.
CLS Optimierung
Hat man die Fehler gefunden, kann man sich an die Behebung machen. Dafür gibt es ein paar Grundregeln, die man im besten Falle schon bereits während der Entwicklung beachten sollte. Aber auch im Nachhinein, kann der CLS immer noch verbessert werden.
- CSS für Elemente im Viewport "Above-the-fold" laden
- Schriften mit "preload" vorladen
- Breite und Höhe von Bildern im Image-Tag mitgeben
- Iframes und Einbettungen (wenn möglich) vermeiden
- Platzhalter für Popups oder Cookie-Banner einplanen
Flexibilität
Wir beraten produktoffen und setzen Projekte mit verschiedenen Technologien um. Dabei passen wir uns den jeweiligen Projektsettings und Kundenbedürfnissen an.
Qualität
Mit hohen Ansprüchen, Qualitätsbewusstsein und unter ganzheitlicher Betrachtung, möchten wir die bestmögliche Lösung entwickeln.
Innovation & Kreativität
Wir setzen auf Technologien am neuesten Stand der Technik. In unseren Projekten verwenden wir gerne Kreativmethoden um innovative Lösungen zu finden.
Erfahrung
Wir haben langjährige Erfahrung in der Beratung und Betreuung von Projekten für Kunden aller Größen und Branchen. Außerdem bilden wir uns ständig weiter.
Unverbindlich anfragen