Cumulative Layout Shift (CLS) verbessern

Was ist Cumulative Layout Shift (CLS)?
1. Layout Shift nervt die User
2. Wann und wie entsteht Layout Shift?
Wie vermeidet man Cumulative Layout Shift (CLS)?
Drei Methoden, um den Cumulative Layout Shift (CLS) Ihrer Website zu messen
Schlussfolgerung

1. Was ist Cumulative Layout Shift (CLS)?

Beim Cumulative Layout Shift (CLS) handelt es sich um einen wichtigen Messwert der Core Web Vitals, welcher in den Leistungsbericht von Google PageSpeed Insights einfliesst. Gemessen wird die visuelle Stabilität des Layouts im oberen Bereich, welcher ohne Scrollen sichtbar ist (Above the Fold). Nicht gemessen wird der Layout Shift im unteren Bereich, welcher erst durch Scrollen sichtbar wird (Below the fold).

1.1. Layout Shift nervt die User

Wer kennt es nicht, ein Button oder ein ganzer Textabschnitt verrutscht ganz plötzlich und unerwartet. Kaum etwas nervt die Nutzer mehr und führt zu höheren Abbruchraten.

Oft bleibt Cumulative Layout Shift (CLS) von Seitenhalter lange unentdeckt. Vielleicht ist es ihnen bei Ihrer Website auch noch nicht aufgefallen? Das könnte daran liegen, dass Ihre Seite bereits gecacht wurde. Wie Sie den Layout Shift Ihrer Website prüfen können, finden Sie unter Punkt 3.

Nachfolgend sieht man den Ladevorgang einer Website mit viel und keinem Layout Shift. Die Ladezeit ist bei beiden Versionen genau gleich. Da sich jedoch während dem Ladevorgang das Layout auf der linken Seite stark verschiebt, verrutscht der CTA. Das Ziel wird auf der rechten Seite ohne Cumulative Layout Shift (CLS) somit wesentlich schneller erreicht – und dies bei gleicher Ladezeit!

GIF Animation mit Darstellung von Layout Shift auf mobilen Geräten — Vergleich Ladevorgang: **viel vs kein CLS**, bei genau **gleicher Ladezeit**.

1.2. Wann und wie entsteht Layout Shift?

Hauptsächlich entsteht Layout Shift beim ersten Ladevorgang einer Website, wenn die Daten noch nicht im Cache sind. Also genau bei den wichtigen möglichen Neukunden! Manchmal kommt es auch vor, dass eine Werbeanzeige plötzlich eingeblendet oder durch eine andere ersetzt wird. Solche Layout Shift führen zu höheren Abbruchraten und weniger zufriedenen und wiederkehrenden Kunde.

2. Wie vermeidet man Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) verbessern oder komplett entfernen gehört zum aufwändigeren Teil der Google PageSpeed Insights Optimierung. Um den maximalen Wert zu erreichen, ist oft eine Aufteilung der CSS und JavaScript Files pro Seite und sichtbar/unsichtbar erforderlich. Gewisse Anforderungen lassen sich manchmal mit den vorhandenen technischen Applikationen nicht oder nur teilweise umsetzen. Trotzdem lohnt sich der Aufwand. Besonders, wenn Ihre Website Umsatz erzielen und gefunden werden soll.

Mit dem PageSpeed Insights Test werden die Probleme aufgelistet und sehr genau beschrieben. Ich empfehle diese genau durchzugehen und eines nach dem anderen zu beheben. Auf einige besonders wichtige Punkte möchte ich trotzdem kurz eingehen:

2.1. Above the Fold und Below the Fold

Wir teilen die Darstellung auf. Der obere Bereich, welcher ohne Scrollen sichtbar ist, nennt man Above the Fold. Und das Layout weiter unten, welches erst nach aktivem Scrollen sichtbar wird, Below the Fold.

Es ist wichtig zu wissen, dass der Messwert Cumulative Layout Shift (CLS) nur den sichtbaren Bereich Above the Fold betrifft. Alle Layout Shifts weiter unten, also Below the Fold, fliessen nicht in den Messwert ein und stören auch niemanden. Denn bis der Nutzer scrollt, hat sich auch dieser Bereich längst aufgebaut. Somit gilt es, sich auf den sichtbaren Bereich Above the Fold zu konzentrieren.

Ich teile somit das CSS Seitenbezogen in zwei Teile auf. Alle Styles für den sichtbaren Bereich werden im header Inline eingefügt (Above the Fold). Alle restlichen Styles kurz vor dem body Ende verlinkt (Below the Fold). Die kritischen CSS Styles im Header müssen Inline positioniert werden, um jegliche Verzögerung und die Flaschenhalsproblematik zu vermeiden.

Damit das einfach zu handhaben ist, verwende ich Sass und unterteile es in möglichst viele Files, welche bei Bedarf zusammengezogen werden. Dadurch wird auf jeder einzelnen Seite immer nur der CSS Code geladen, welcher auch wirklich verwendet wird.

Darstellung CLS Above the Fold und Below the Fold — **CLS** wird nur im sichtbaren Bereich gemessen **Above the Fold**.

2.2. Auf Fonts verzichten oder nach Best Practice einbetten

Eingebettete Webfonts verursachen oft einen starken Layout Shift. Ich empfehle auf Webfonts, wenn möglich zu verzichten. Dadurch kann auf viel Ärger und Aufwand bei der PageSpeed Optimierung verzichtet werden.

Kann nicht auf Webfonts verzichtet werden, sollten zumindest nur die auch wirklich verwendeten Schriftschnitte geladen werden. Also falls zum Beispiel kursiv nicht gebraucht wird, sollten auch keine kursiven Zeichen geladen werden. Ich gehe sogar so weit, dass ich einzelne nicht verwendete Zeichen aus den Schriften entferne, um die Dateigrösse zu reduzieren.

Im HTML Header sollten die Schriften, welche Above the Fold sichtbar sind, vorgeladen werden. Und zwar in einem komprimierten modernen Webfont Format.

Prüfen Sie die aktuellen Best Practice anforder an das einbetten von Schriften. Im Moment ändern die diesbezüglichen Anforderungen sehr schnell.

2.3. Grössen bei Bildern angeben und kein Lazy Loading Above the Fold

Bei den Bildern müssen immer height und width im HTML Code angegeben werden. Dadurch kennt der Browser das Seitenverhältnis und kann den Raum für das sich aufbauende Bild reservieren. Dies ist bei der CLS Optimierung eine der einfachste aber wirkungsvollste Massnahmen.

Zudem ganz wichtig: Bilder, welche Above the Fold erscheinen, dürfen auf keinen Fall mit lazy Loading geladen werden. Dies würde zu starkem Layout Shift führen.

Darstellung Seitenaufbau CSS und loading lazy Below the Fold — **Lazy Loading** und **externe CSS Files** dürfen **nur Below the Fold** verwendet werden.

2.4. SVG Sprites für Icons statt Icon Fonts

Es ist ratsam, Icons nicht als Font zu einzubetten, um Layout Shift zu reduzieren. Ich habe mehrere Methoden ausprobiert und die besten Erfahrungen mit SVG Sprites gemacht. Die für die jeweilige Seite benötigten Icons werden in den HTML-Code integriert und können dann beliebig oft an unterschiedlichen Stellen eingefügt werden. Um Layout Shift zu vermeiden, sollte height und width immer angegeben werden. Den SVG Code komprimiere ich zusätzlich mit einem SVG Compressor.

3. Drei Methoden, um den Cumulative Layout Shift (CLS) Ihrer Website zu messen

3.1. PageSpeed Insights

Bei Google PageSpeed Insights wird der offizielle CLS Wert ausgegeben. Dieser Test gilt als Grundlage bei der Optimierung und fliesst als ein Core Web Vital in die Gesamtwertung im Bereich Performance ein.

3.2. Darstellung Layout Shift mit animiertem GIF

Mit diesem GIF Generator werden die Verschiebungen des Layouts optisch dargestellt. Diese Animation kann bei der Behebung von CLS hilfreich sein.

3.3. Langsamer Ladevorgang ohne Cache simulieren

So kann man mit den Google Dev Tools von Chrome einen langsamen Ladevorgang ohne Cache simulieren:

Öffnen Sie in Chrome ein neues Inkognitofenster. Dadurch wird sichergestellt, dass keine Dateien aus dem Cache abgerufen werden.
Mit der Tastenkombination Befehlstaste + Option + C (Mac) oder Strg + Umschalttaste + C (Windows) werden die Dev Tools geöffnet. Alternativ klicken Sie mit der rechten Maustaste auf die Website und wählen Untersuchen.
Klicken Sie auf Network
Bei No throttling Slow 3G wählen.
Website URL eingeben und Enter drücken. Die Seite wird nun langsam geladen.
Um die mobile Darstellung zu simulieren, das zweite Icon von links auswählen (Toggle device toolbar)
Oben das gewünschte Device auswählen
Neben die URL klicken und Enter drücken. Nun sehen Sie den verlangsamten Ladevorgang auf dem gewünschten Gerät.

Schlussfolgerung

Je nach Applikation kann die CLS Optimierung ziemlich aufwändig werden. Zumal man Seiten bezogene Test und Anpassungen vornehmen muss. Es empfiehlt sich, die Anpassungen Schritt für Schritt vorzunehmen.

Warum schnelle Ladezeiten wichtig sind, haben wir bereits hier beschrieben. Die CLS Optimierung lohnt sich, wenn:

Sie besser gefunden werden möchten
Mehr Transaktionen erzielt werden sollen
Die Abbruchraten gesenkt werden sollen
Bessere Rezensionen und zufriedenere Kunden gewünscht sind
Die Zahl der wiederkehrenden Nutzer erhöht werden soll

Benötigen Sie Hilfe bei der CLS Optimierung? Dafür ist meine Webagentur da. Wir bieten systemunabhängige PageSpeed Insights Optimierung bestehender Websites an und verbessern dabei Ihren HTML und CSS Code.

PageSpeed Optimierung