Zum Inhalt springen

Der CLS beschreibt die unerwartete Verschie­bung des Contents während des Lade­vorgangs und ist somit ein Indi­kator für die Usability einer Web­site. Falls Google Page­Speed Insights ein oranges oder gar rotes Ergebnis liefert, besteht Hand­lungs­bedarf. Wie Sie den Wert messen und gege­ben­en­falls ver­bes­sern können, erfahren Sie hier!

Die eigene Website testen

Am Anfang steht natürlich ein Test mit Hilfe von Google Page­Speed Insights an. Öffnen Sie hierfür das Tool von Google und geben Sie die zu testende URL an. Nach ein paar Se­kunden bekom­men Sie eine Übersicht der wichtigsten Faktoren, die so genan­nten Web Vitals. Einer davon ist der „Cumulative Layout Shift“, kurz „CLS“.

Pagespeed Insights Test

Das Ergebnis interpretieren

Liegt der CLS unter 0,1, ist alles in Ordnung und Sie müssen keine Optimierung vor­nehmen. Liegt der Wert jedoch darüber, sollten Sie auf jeden Fall Maß­nah­men ergreifen um den Wert, welcher mittler­weile ranking­relevant für Google ist, zu verbessern.

CLS testen

Analyse 1: Beobachten

Ist der CLS zu hoch, gilt es heraus­zufinden, welche Elemente auf der Web­seite schuld daran sind. Im ersten Schritt gilt es also mit freiem Auge zu beo­bachten, welche Elemente sich während des Lade­vorgangs 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 unter Windows oder Option + ⌘ + J am Mac. Einmal geöffnet, kann man im Tab „Netz­werk“ im Throttling-Bereich „Slow 3G“ auswählen und die Seite neu laden.

Diese Einstellung simuliert eine sehr langsame Internet­verbin­dung unter welcher die Layout­ver­schie­bung meistens besonders gut sichtbar wird. Ist hier zum Beispiel ersicht­lich, dass die Haupt­navi­gation sich während des Lade­vorgangs 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öglich­keit mit den Developer-Tools die verur­sach­enden 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 Seiten­reload farblich hinterlegt.

Analyse 3: PageSpeed Insights

Weitere Hinweise auf die Position der Layout­verschiebung, 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 Akkor­deon mit dem Titel „Umfang­reiche Layout­ver­schie­bungen ver­meiden“. Klappt man dieses auf, werden konkrete proble­ma­tische Elemente auf der Web­seite aufgelistet.

CLS Optimierung: Analyse 1CLS Optimierung: Analyse 1
CLS Optimierung: Analyse 2CLS Optimierung: Analyse 2
CLS Optimierung: Analyse 3CLS Optimierung: Analyse 3
Vorheriges Bild
01
Nächstes Bild

CLS Optimierung

Hat man die Fehler gefunden, kann man sich an die Behe­bung machen. Dafür gibt es ein paar Grund­regeln, die man im besten Falle schon bereits während der Ent­wick­lung beachten sollte. Aber auch im Nach­hinein, kann der CLS immer noch verbessert werden.

Optimierungs­möglich­keiten
  • 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
Warum MUEVO

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

Ihre Daten werden verschlüsselt übertragen und zur Beantwortung Ihrer Anfrage verarbeitet. Nähere Hinweise finden Sie in unserer Datenschutzerklärung.