Kumulative Layoutverschiebung (CLS): Was es ist und wie Sie Ihre Website dafür optimieren können

Stellen Sie sich Folgendes vor: Sie laden eine Website und sie sieht aus, als könnte sie einsatzbereit sein. Sie klicken auf ein im Blog vorgestelltes Bild, um den Artikel zu lesen, und plötzlich verschiebt sich die ganze Seite, weil gerade etwas anderes geladen wurde. Und Sie klicken auf etwas ganz anderes und laden eine Seite, die Sie nie beabsichtigt haben. Wenn Sie dieses Problem selbst erlebt haben, wissen Sie, wie sich die kumulative Layoutverschiebung (CLS) negativ auf die Benutzererfahrung (UX) einer Website auswirken kann.

Kumulative Layoutverschiebung ist der Begriff dafür, wie stark sich das Layout einer Seite beim Laden verschiebt, und in diesem Artikel werden wir etwas mehr darauf eingehen, was dies bedeutet. Wir zeigen Ihnen, wie Sie CLS messen und erklären, was ein guter Score ist. Anschließend besprechen wir, wie Sie den CLS-Score Ihrer Website optimieren können. Lass uns zur Arbeit gehen!

Abonnieren Sie unseren Youtube-Kanal

Was ist kumulative Layoutverschiebung (CLS)?

Es gibt keinen besseren Weg, um zu veranschaulichen, was ein hoher CLS-Score (also etwas über 0,10 aus Googles PageSpeed ​​Insights) darstellt, als mit einem visuellen Beispiel. Hier ist eine Website mit einem Layout, das sich beim Laden der Seite ständig ändert. Beachten Sie, dass wir bei der Aufnahme überhaupt nicht scrollen. Unser Viewport bleibt gleich, aber die Seite verschiebt sich von selbst drastisch:

Als Benutzer, der diese Website besucht, sind Sie möglicherweise nicht sicher, wann der Ladevorgang tatsächlich abgeschlossen ist. Sie können versuchen, auf eine Nachricht zu klicken, nur um das Layout drastisch zu ändern. Infolgedessen landen Sie auf der falschen Seite und müssen Zeit damit verschwenden, zurückzugehen. Je nach Seite kann dies mehrmals vorkommen. Wenn dies der Fall ist, besteht eine gute Wahrscheinlichkeit, dass Sie einfach gehen.

Und Ihre Benutzer werden es auch.

Je komplexer eine Website ist, desto wahrscheinlicher ist es, dass sie einen hohen CLS-Score aufweist. Bei einfachen Layouts wie der ikonischen Google-Startseite gibt es kein CLS, weil sie so wenige Elemente enthalten:

Das soll nicht heißen, dass alle komplexen Websites hohe CLS-Werte aufweisen. Betrachten Sie zum Beispiel Amazon. Niemand würde sagen, dass der E-Commerce-Riese ein geradliniges Webdesign verwendet. Beim Durchsuchen des Katalogs ist jedoch wenig bis gar keine Layoutverschiebung zu sehen.

Layoutverschiebungen treten auf, weil Browser dazu neigen, Seitenelemente asynchron zu laden. Noch wichtiger ist, dass sich auf Ihrer Seite möglicherweise Medienelemente mit anfänglich unbekannten Abmessungen befinden. Diese Kombination bedeutet, dass der Browser nicht weiß, wie viel Platz die einzelnen Elemente benötigen, bis sie fertig geladen sind. Daher die drastische Layoutverschiebung.

CLS ist insofern interessant, als es mit verschiedenen Tools objektiv gemessen werden kann, aber es ist auch benutzerzentriert, da das Gerät jedes Benutzers beeinflussen kann, wie sich das Layout Ihrer Website ändern kann. Obwohl Sie diesen Aspekt nicht kontrollieren können, können Sie sicherlich Vorkehrungen treffen, damit er die geringstmöglichen Auswirkungen hat.

CLS ist einer der drei Core Web Vitals, die Google misst, um festzustellen, ob Ihre Website eine starke Benutzererfahrung (UX) bietet. Die anderen Core Web Vitals sind First Input Delay (FID) und Largest Contentful Paint (LCP), die ebenfalls jeden Optimierungsaufwand auf jeden Fall wert sind.

So messen Sie CLS

Es ist relativ einfach herauszufinden, ob Ihre Website deutliche Layoutverschiebungen aufweist. Zunächst empfehlen wir Ihnen, von einer Vielzahl von Geräten aus auf Ihre Website zuzugreifen und andere zu bitten, dasselbe zu tun. Dabei können Sie beobachten, ob das Layout beim Laden der Seiten konsistent bleibt.

Sie werden wahrscheinlich feststellen, dass die CLS-Erfahrung sehr unterschiedlich sein kann . Es hängt nicht nur davon ab, wie optimiert Ihre Website ist, sondern auch, welches Gerät Sie verwenden. Vor diesem Hintergrund ist PageSpeed ​​Insights das beste Tool zum Messen des CLS Ihrer Website. Dies ist direkt mit den Core Web Vitals von Google verbunden, sodass Sie direkt sehen können, wie sich Ihr CLS-Score auf die Sichtweise Ihrer Website durch Google auswirkt.

Mit diesem Dienst können Sie eine URL eingeben und dafür eine Gesamtleistungsbewertung basierend auf den von Google gesammelten Daten der letzten 28 Tage erhalten. Dieser Score berücksichtigt mehrere Metriken, darunter CLS, FCP und LCP.

Für diesen Test haben wir eine Website ohne erkennbares CLS ausgewählt. PageSpeed ​​Insights bestätigte unseren Verdacht, da es überwältigend positive Ergebnisse mit einem starken CLS-Score lieferte.

Beachten Sie, dass PageSpeed ​​Insights für jede Punktzahl eine prozentuale Aufschlüsselung bietet. In diesem Fall erlebten 91 % der Benutzer beim Laden der Testwebsite keine Layoutverschiebung. Die verbleibenden Besucher erlebten jedoch eine gewisse Verschiebung des Layouts.

Das ist zu erwarten, wenn es um CLS und den Rest der Core Web Vitals geht. Die Benutzererfahrung variiert drastisch, je nachdem, von welchem ​​Gerät aus sie besuchen, ihrer Internetverbindung und vielen anderen Faktoren. Es gibt praktisch keine Möglichkeit, zu berücksichtigen, dass kein Benutzer jemals CLS erlebt, aber Sie können definitiv Vorkehrungen treffen, um es zu optimieren, damit der Prozentsatz so niedrig wie möglich ist.

Oben auf Felddaten, Pagespeed Insights auch Angebote , was es nennt Lab Daten. Dies sind Leistungsbewertungen, die auf einem einzigen Test basieren, anstatt auf Daten, die über einen langen Zeitraum gesammelt wurden (die als Felddaten gelten ).

In unserem Test erhielten wir einen CLS-Score von Null, was bedeutet, dass es keine Layoutverschiebung gab. Für diesen einen bestimmten Test. Vergleichen wir dies nun mit einer anderen Website, die keinen so starken CLS-Score erhalten hat.

Um den Google-Standards zu entsprechen, sollte Ihr CLS-Wert unter 0,10 liegen. Alles darüber hinaus bedeutet, dass es zu erheblichen, spürbaren Verschiebungen im Layout kommt, was zu einer schlechten Benutzererfahrung führt.

So identifizieren Sie die Ursachen für Layoutverschiebungen

Wenn Sie feststellen möchten, welche Elemente Layoutverschiebungen auf Ihrer Website verursachen, können Sie dies mit den Chrome Dev Tools tun. Wenn Sie die Tools öffnen (STRG-UMSCHALT-I) und zur Registerkarte " Leistung" wechseln, können Sie Leistungstests aufzeichnen, während Sie im Internet surfen.

Nachdem Sie die Aufnahme beendet haben, gibt Chrome Dev Tools eine Zeitleiste zurück, die Ladezeiten, einzelne Anfragen und Core Web Vitals anzeigt. Aus dieser Zeitleiste können Sie einzelne Layout-Shift- Ereignisse auswählen, die unter Erfahrung aufgelistet sind. Auf diese Weise können Sie sehen, welchen Elementen sie entsprechen.

Sobald Sie wissen, welche Elemente Layoutverschiebungen verursachen, können Sie Schritte unternehmen, um das Problem zu beheben. Darüber werden wir im nächsten Abschnitt sprechen.

Wenn Sie die Core Web Vitals Ihrer Website überwachen möchten, empfehlen wir Ihnen, ein Google Search Console-Konto einzurichten. Sie können Leistungsmetriken und Core Web Vitals von der Search Console aus überwachen, was ein Segen für die Suchmaschinenoptimierung (SEO) ist. Wir sind der Meinung, dass es in Ihrem Interesse ist, die Search Console regelmäßig zu überwachen, aber es schadet nie, einen bestimmten Messwert zu haben, den Sie verfolgen.

So optimieren Sie Ihren CLS-Score

Im Großen und Ganzen gibt es zwei große Schuldige, wenn es um hohe CLS-Werte geht: Mediendateien und Anzeigen. Wenn Sie beispielsweise eine Bilddatei mit hoher Auflösung hochladen, aber ihre Höhe und Breite nicht angeben, kann dies das Layout Ihrer Seite beeinträchtigen.

In Bezug auf die Website-Leistung ist es am besten, Bilder zu verwenden, die bereits die genauen Abmessungen haben, die Sie anzeigen werden. Auf diese Weise muss der Browser keine Rechenleistung (und Zeit) aufwenden, um die Größe entsprechend anzupassen. Das ist jedoch nicht immer möglich. Ist dies nicht der Fall, sollten Sie Breiten- und Höhenattribute für jedes angezeigte Bild festlegen. Auf diese Weise weiß der Browser des Benutzers genau, wo das Bild hingehört und muss das Layout nicht in letzter Sekunde verschieben.

So sehen diese Attribute in HTML aus:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Wenn Sie WordPress verwenden, 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, können Sie sich auf CSS verlassen, anstatt Breite und Höhe manuell anzugeben. Mit CSS können Sie das Attribut max-width verwenden , um Browsern mitzuteilen, welchen Prozentsatz des Darstellungsbereichs das Bild einnehmen soll:

img {
max-width: 90vw;
height: auto;
}

In diesem Beispiel weisen wir den Browser an, das Bild so zu skalieren, dass es 90 % des Darstellungsbereichs des Benutzers einnimmt. Gleichzeitig setzen wir das Height- Attribut auf auto , damit der Browser die ideale Höhe basierend auf der neuen Breite des Bildes und seinem Seitenverhältnis berechnet.

Für Anzeigen gelten die gleichen Grundlagen wie für Bilder. Normalerweise arbeiten Sie mit Iframes und manchmal verwenden Werbenetzwerke Elemente mit dynamischer Größe. Dies kann verheerende Auswirkungen auf das Layout Ihrer Seiten haben.

Anstatt Werbenetzwerken entscheiden zu lassen, wie groß die Anzeigen auf Ihrer Website sein sollen, können Sie Bereiche dafür reservieren. Das bedeutet, Breiten- und Höhenattribute für Anzeigenbereiche zu deklarieren und Fallbacks festzulegen, falls sie nicht geladen werden, damit der leere Raum keine Layoutverschiebung verursacht.

Sie können für jeden beliebigen Anzeigencontainer dieselbe Art von CSS und Inline-Styling verwenden und ihn unabhängig von den gelieferten Anzeigen in Position halten.

Häufig gestellte Fragen zur kumulativen Layoutverschiebung (CLS)

CLS kann etwas komplizierter zu verstehen sein als die LCP- und FCP-Metriken. In diesem Sinne gehen wir einige häufige Fragen durch, die Benutzer zu CLS haben, um sicherzustellen, dass Sie keine wichtigen Informationen verpassen.

Wie wirkt sich CLS auf die Leistung meiner Website aus?

Theoretisch können Sie eine sehr schnelle Website haben, die immer noch einen relativ schlechten CLS-Score erhält. Wie bei anderen Core Web Vitals korrelieren die CLS-Werte möglicherweise nicht direkt mit der Gesamtleistung der Website. Ihre Website mag rasend schnell sein, aber während sie geladen wird, entfaltet sie sich wie ein Akkordeon. Selbst dann haben große Layout-Veränderungen definitiv einen negativen Einfluss auf die UX der Site. Google hält das für unglaublich wichtig. Deshalb gewichtet Google diesen Datenpunkt so stark.

Ist CLS weniger wichtig als FCP- oder LCP-Scores?

Viele Benutzer achten mehr auf FCP- und LCP-Scores als auf CLS. Dies liegt daran, dass diese beiden Metriken einfacher mit der Website-Performance in Beziehung gesetzt werden können. Obwohl FCP auch speziell eine benutzerzentrierte Metrik ist, ist CLS bei einer großen Anzahl von Benutzern schwieriger zu messen.

Alle drei Metriken bilden die Google Core Web Vitals. Das bedeutet, dass Sie, wenn Sie einen von ihnen ignorieren, Gefahr laufen, in relevanten Suchergebnissen niedriger platziert zu werden. Wenn Sie sicherstellen, dass Ihre Site für einen niedrigen CLS optimiert ist, hat dies im Allgemeinen nur einen positiven Einfluss auf die Site-Performance wie LCP und FCP. Wenn die größte Contentful Paint auf den Bildschirm geschoben wird, sobald der Benutzer sie sieht, wie nützlich ist dann diese schnelle Ladezeit?

Was ist ein guter CLS-Score?

Den Zahlen nach betrachtet Google alles unter 0,10 als einen guten CLS-Wert. Wenn Sie jedoch die richtigen Schritte unternehmen, ist ein CLS-Score von 0 nicht ausgeschlossen und bei gut optimierten Websites relativ normal. Beachten Sie jedoch, dass selbst Websites, die regelmäßig 0 Punkte erzielen, einen geringen Prozentsatz an Benutzern haben, die Verschiebungen erfahren. Das liegt außerhalb Ihrer Kontrolle, und Sie können nur berücksichtigen, dass die meisten Ihrer Benutzer 0 CLS haben.

Abschluss

Es gibt viele Faktoren, die dazu beitragen, eine starke UX auf Ihrer Website anzubieten. Idealerweise sollte es schnell geladen werden. Es sollte leicht zu interagieren sein. Es sollte die Layoutposition nicht verschieben, wenn Elemente angezeigt werden. Drastische Layoutverschiebungen führen zu Frustration und Fehlklicks. Diese führen zu einer höheren Absprungrate. Was für keine Website gut ist.

CLS ist eines der Core Web Vitals, das Google verwendet, um die Gesamt-UX Ihrer Website zu messen. Und die Benutzer sind in erster Linie der Grund, warum Sie eine Website haben. Ihre Erfahrung hat Priorität 1. Ein niedriger CLS-Score (unter 0,10) bedeutet, dass Ihre Website flüssig geladen werden sollte und jeder Aspekt ihres Layouts von Anfang an an der richtigen Stelle erscheint.

Haben Sie Fragen zu CLS oder wie Sie Ihre reduzieren können? Lassen Sie uns im Kommentarbereich unten darüber sprechen!

Ausgewähltes Bild über Älterer Bruder / shutterstock.com