Stelle dir Folgendes vor: Du lädst eine Website, und es sieht so aus, als ob sie sofort einsatzbereit wäre. Du klickst auf ein Bild in einem Blog, um den Artikel zu lesen, und plötzlich verschiebt sich die ganze Seite, weil gerade etwas anderes geladen wurde. Und du klickst auf etwas ganz anderes und ladest eine Seite, die du nie beabsichtigt hattest. Wenn du dieses Problem selbst schon einmal erlebt hast, weißt du, wie sich Cumulative Layout Shift (CLS) negativ auf die User Experience (UX) einer Website auswirken kann.
Kumulative Layoutverschiebung ist der Begriff dafür, wie stark sich das Layout einer Seite während des Ladevorgangs verschiebt, und in diesem Artikel gehen wir etwas näher darauf ein. Wir zeigen dir, wie du CLS messen kannst, und erklären, was ein guter Wert ist. Anschließend besprechen wir, wie du den CLS-Wert deiner Website optimieren kannst. Auf geht’s an die Arbeit!
Was ist eine kumulative Layout-Verschiebung (CLS)?
Was ein hoher CLS-Wert (d. h. ein Wert über 0,10 von Google PageSpeed Insights) bedeutet, lässt sich am besten anhand eines visuellen Beispiels verdeutlichen. Hier siehst du eine Website mit einem Layout, das sich beim Laden der Seite ständig verschiebt. Beachte, dass wir bei der Erfassung dieser Daten überhaupt nicht scrollen. Unser Ansichtsfenster bleibt gleich, aber die Seite verschiebt sich drastisch von selbst:
Wenn du diese Website besuchst, bist du vielleicht nicht sicher, wann sie tatsächlich fertig geladen ist. Du versuchst vielleicht, auf eine Nachricht zu klicken, aber dann ändert sich das Layout wieder. Das führt dazu, dass du auf der falschen Seite landest und Zeit mit dem Zurückgehen verschwenden musst. Je nach Seite kann dies mehrmals vorkommen. Wenn das passiert, ist die Wahrscheinlichkeit groß, dass du die Seite einfach verlässt. Und das werden auch deine Nutzer*innen tun. Je komplexer eine Website ist, desto wahrscheinlicher ist es, dass sie einen hohen CLS-Wert hat. Bei einfachen Layouts wie der ikonischen Google-Startseite gibt es keinen CLS, weil sie nur wenige Elemente enthalten:
Das soll nicht heißen, dass alle komplexen Websites hohe CLS-Werte haben. Nehmen wir zum Beispiel Amazon. Niemand würde sagen, dass der E-Commerce-Riese ein einfaches Webdesign verwendet. Dennoch ist beim Durchblättern des Katalogs kaum eine Veränderung des Layouts zu erkennen.
Layout-Verschiebungen treten auf, weil Browser dazu neigen, Seitenelemente asynchron zu laden. Noch wichtiger ist, dass es auf deiner Seite Medienelemente mit zunächst unbekannten Abmessungen geben kann. Diese Kombination bedeutet, dass der Browser nicht weiß, wie viel Platz die einzelnen Elemente einnehmen werden, bis sie fertig geladen sind. Daher die drastische Verschiebung des Layouts.
CLS ist insofern interessant, als es mit verschiedenen Tools objektiv gemessen werden kann, aber es ist auch benutzerorientiert, da das Gerät eines jeden Benutzers Einfluss darauf haben kann, wie sich das Layout deiner Website verschiebt. Diesen Aspekt kannst du zwar nicht kontrollieren, aber du kannst Vorkehrungen treffen, um die Auswirkungen so gering wie möglich zu halten.
CLS ist einer der drei Core Web Vitals, die Google misst, um festzustellen, ob deine Website ein gutes Nutzererlebnis (UX) bietet. Die anderen Core Web Vitals sind First Input Delay (FID) und Largest Contentful Paint (LCP), die ebenfalls jede Mühe wert sind, die du in die Optimierung investierst.
Wie man CLS misst
Es ist relativ einfach herauszufinden, ob deine Website deutliche Layout-Verschiebungen aufweist. Zunächst empfehlen wir dir, deine Website von verschiedenen Geräten aus aufzurufen und andere Personen zu bitten, dies ebenfalls zu tun. Dabei kannst du beobachten, ob das Layout beim Laden der Seiten konsistent bleibt. Wahrscheinlich wirst du feststellen, dass die CLS-Erfahrung sehr unterschiedlich sein kann. Es hängt nicht nur davon ab, wie gut deine Website optimiert ist, sondern auch davon, welches Gerät du verwendest. Aus diesem Grund ist PageSpeed Insights das beste Tool zur Messung des CLS deiner Website. PageSpeed Insights ist direkt mit den Core Web Vitals von Google verknüpft, so dass du direkt sehen kannst, wie sich dein CLS-Wert darauf auswirkt, wie Google deine Website sieht.
Mit diesem Dienst kannst du eine URL eingeben und erhältst eine Gesamtbewertung der Leistung auf der Grundlage der Daten, die Google in den letzten 28 Tagen gesammelt hat. Bei dieser Bewertung werden mehrere Metriken berücksichtigt, darunter CLS, FCP und LCP.
Für diesen Test wählten wir eine Website ohne erkennbare CLS. PageSpeed Insights bestätigte unseren Verdacht, da es überwältigend positive Ergebnisse mit einem starken CLS-Score lieferte. Beachte, dass PageSpeed Insights eine prozentuale Aufschlüsselung für jeden Wert anbietet. In diesem Fall erlebten 91 % der Nutzer*innen keine Layout-Verschiebung beim Laden der Test-Website. Bei den übrigen Besuchern kam es jedoch zu einer gewissen Verschiebung des Layouts. Das ist zu erwarten, wenn es um CLS und die übrigen Core Web Vitals geht. Die Nutzererfahrung variiert drastisch, je nachdem, von welchem Gerät aus sie die Website besuchen, je nach Internetverbindung und vielen anderen Faktoren. Es gibt praktisch keine Möglichkeit, auszuschließen, dass ein Benutzer jemals CLS erfährt, aber du kannst auf jeden Fall Vorkehrungen treffen, um es so zu optimieren, dass dieser Prozentsatz so gering wie möglich ist. Zusätzlich zu den Felddaten bietet PageSpeed Insights auch so genannte Lab-Daten. Dabei handelt es sich um Leistungswerte, die auf einem einzigen Test basieren, und nicht um Daten, die über einen längeren Zeitraum gesammelt wurden (was als Felddaten gilt).
Bei unserem Test erhielten wir eine CLS-Note von Null, was bedeutet, dass es keine Layout-Verschiebung gab. Für diesen einen speziellen Test. Vergleichen wir das nun mit einer anderen Website, die keine so hohe CLS-Bewertung erhielt.
Um die Standards von Google zu erfüllen, sollte dein CLS-Wert unter 0,10 liegen. Alles, was darüber liegt, bedeutet, dass es erhebliche, spürbare Verschiebungen im Layout gibt, was zu einer schlechten Nutzererfahrung führt.
Wie du die Ursachen für Layout-Verschiebungen erkennen kannst
Wenn du herausfinden möchtest, welche Elemente Layoutverschiebungen auf deiner Website verursachen, kannst du dies mit den Chrome Dev Tools tun. Wenn du die Tools öffnest (STRG-SHIFT-I) und zur Registerkarte Leistung wechselst, kannst du Leistungstests aufzeichnen, während du im Web navigierst.
Nachdem du die Aufzeichnung beendet hast, zeigt Chrome Dev Tools eine Zeitleiste mit Ladezeiten, einzelnen Anfragen und Core Web Vitals an. Aus dieser Zeitleiste kannst du einzelne Layoutverschiebungsereignisse auswählen, die unter Erfahrung aufgeführt sind. Auf diese Weise kannst du sehen, welchen Elementen sie entsprechen.
Sobald du weißt, welche Elemente Layoutverschiebungen verursachen, kannst du Schritte unternehmen, um das Problem zu beheben. Wir werden im nächsten Abschnitt darüber sprechen. Wenn du die Core Web Vitals deiner Website überwachen möchtest, empfehlen wir dir, ein Google Search Console-Konto einzurichten. Über die Search Console kannst du Leistungskennzahlen und Core Web Vitals überwachen, was für die Suchmaschinenoptimierung (SEO) von großem Vorteil ist. Wir sind der Meinung, dass es in deinem besten Interesse ist, die Search Console regelmäßig zu überwachen, aber es schadet nie, eine bestimmte Metrik zu haben, die du verfolgst.
Wie du dein CLS-Score optimieren kannst
Im Großen und Ganzen gibt es zwei große Übeltäter, wenn es um hohe CLS-Werte geht: Mediendateien und Anzeigen. Wenn du z. B. eine Bilddatei mit einer hohen Auflösung hochlädst, aber die Höhe und Breite nicht angibst, kann das Layout deiner Seite dadurch beeinträchtigt werden. Im Hinblick auf die Leistung der Website ist es am besten, Bilder zu verwenden, die bereits die genauen Abmessungen haben, die du anzeigen wirst. Auf diese Weise muss der Browser keine Rechenleistung (und Zeit) aufwenden, um die Größe entsprechend anzupassen. Das ist jedoch nicht immer möglich. Wenn dies nicht möglich ist, solltest du für jedes Bild, das du anzeigst, Attribute für Breite und Höhe festlegen. Auf diese Weise weiß der Browser des Benutzers genau, wo das Bild hinpasst, und muss das Layout nicht in letzter Sekunde verschieben.
So sehen diese Attribute in HTML aus:
Wenn du WordPress verwendest, können einige Bildoptimierungs-Plugins die Größe von Dateien beim Hochladen automatisch ändern, wodurch die erforderlichen Breiten- und Höhenattribute festgelegt werden. Wenn es um responsive Bilder geht, kannst du dich auf CSS verlassen, anstatt Breite und Höhe manuell zu deklarieren. Mit CSS kannst du das Attribut max-width verwenden, um Browsern mitzuteilen, welchen Prozentsatz des Viewports das Bild einnehmen soll:
In diesem Beispiel weisen wir den Browser an, das Bild so zu skalieren, dass es 90 % des Viewports des Benutzers einnimmt. Gleichzeitig setzen wir das Attribut height auf auto, so dass der Browser die ideale Höhe auf der Grundlage der neuen Breite des Bildes und seines Seitenverhältnisses errechnet.
Für Anzeigen gelten die gleichen Grundsätze wie für Bilder. In der Regel arbeitest du mit iframes, und manchmal verwenden Werbenetzwerke Elemente mit dynamischer Größe. Das kann das Layout deiner Seiten durcheinanderbringen. Anstatt die Anzeigennetzwerke entscheiden zu lassen, wie groß die Anzeigen auf deiner Website sein sollen, kannst du Bereiche für sie reservieren. Das bedeutet, dass du Breiten- und Höhenattribute für Anzeigenbereiche deklarierst und Fallbacks für den Fall festlegen, dass sie nicht geladen werden, damit der leere Platz keine Layoutverschiebung verursacht. Du kannst dieselbe Art von CSS und Inline-Styling für jeden beliebigen Anzeigencontainer verwenden, sodass er unabhängig von den geschalteten Anzeigen in seiner Position fixiert bleibt.
Häufig gestellte Fragen zu Cumulative Layout Shift (CLS)
CLS kann etwas komplizierter zu verstehen sein als die LCP- und FCP-Metriken. Aus diesem Grund gehen wir im Folgenden auf einige häufig gestellte Fragen zu CLS ein, um sicherzustellen, dass du keine wichtigen Informationen übersiehst.
Wie wirkt sich CLS auf die Leistung meiner Website aus?
Theoretisch kannst du eine sehr schnelle Website haben, die dennoch eine relativ schlechte CLS-Bewertung erhält. Wie bei anderen Core Web Vitals korreliert die CLS-Bewertung nicht unbedingt direkt mit der Gesamtleistung der Website. Deine Website kann zwar rasend schnell sein, aber beim Laden entfaltet sie sich wie eine Ziehharmonika. Selbst dann haben große Layoutveränderungen definitiv negative Auswirkungen auf die UX der Website. Google hält das für unglaublich wichtig. Aus diesem Grund gewichtet Google diesen Datenpunkt so stark.
Ist CLS weniger wichtig als FCP- oder LCP-Bewertungen?
Viele Nutzer*innen achten mehr auf FCP- und LCP-Bewertungen als auf CLS. Das liegt daran, dass diese beiden Messgrößen leichter mit der Leistung einer Website in Verbindung gebracht werden können. Obwohl FCP ebenfalls eine nutzerzentrierte Kennzahl ist, ist CLS schwieriger über eine große Anzahl von Nutzern hinweg zu messen. Alle drei Metriken bilden die Google Core Web Vitals. Das heißt, wenn du eine davon ignorierst, läufst du Gefahr, in den relevanten Suchergebnissen schlechter platziert zu werden. Wenn du sicherstellst, dass deine Website für einen niedrigen CLS-Wert optimiert ist, hat dies in der Regel nur positive Auswirkungen auf die Leistung der Website, wie LCP und FCP. Wenn das Bild mit dem größten Inhalt auf dem Bildschirm verschwindet, sobald der Benutzer es sieht, wie nützlich ist dann die schnelle Ladezeit?
Was ist ein guter CLS-Wert?
Nach den Zahlen betrachtet Google alles unter 0,10 als einen guten CLS-Wert. Wenn du jedoch die richtigen Maßnahmen ergreifst, ist ein CLS-Wert von 0 nicht unmöglich, sondern bei gut optimierten Websites sogar relativ normal. Bedenke jedoch, dass auch bei Websites, die regelmäßig mit 0 Punkten bewertet werden, ein geringer Prozentsatz von Nutzern mit Verschiebungen konfrontiert sein kann. Darauf hast du keinen Einfluss, und du kannst nur dafür sorgen, dass die meisten deiner Nutzer einen CLS-Wert von 0 haben.
Fazit
Es gibt viele Faktoren, die zu einer guten UX auf deiner Website beitragen. Idealerweise sollte sie schnell laden. Sie sollte einfach zu bedienen sein. Die Position des Layouts sollte sich beim Auftauchen von Elementen nicht verschieben. Drastische Layout-Verschiebungen führen zu Frustration und Fehlklicks. Diese führen zu einer höheren Absprungrate. Und das ist nicht gut für jede Website. CLS ist einer der Core Web Vitals, die Google verwendet, um die Gesamt-UX Ihrer Website zu messen. Und die Nutzer*innen sind der Grund, warum du überhaupt eine Website hast. Ihre Erfahrung hat 1. Priorität. Ein niedriger CLS-Wert (unter 0,10) bedeutet, dass deine Website flüssig geladen wird und jeder Aspekt des Layouts von Anfang an an der richtigen Stelle erscheint.
Übersetzt von Sarah van der Linden
von Website Freiburg
Quelle, unser Divi Websoftware Partner Elegant Themes:
www.elegantthemes.com/blog/wordpress/cumulative-layout-shift-cls-what-it-is-how-to-optimize-your-website-for-it
