Letzte Änderung: Uhr

CLS optimieren: Darauf müssen Sie achten!

Ruckartige Layout-Verschiebungen vermeiden & User Experience verbessern

Die Cumulative Layout Shift-Werte schlagen Alarm? Wir stellen die üblichen “Verdächtigen” vor und wie man den CLS optimieren kann.

CLS optimieren - Titelbild

Bestimmt haben Sie schon einmal ungewollt auf einen Button oder Link geklickt, weil er plötzlich seine Position verändert hat. Oder den Faden beim Lesen eines Textes verloren, weil die restlichen Elemente nachgeladen wurden.

Derartige Layout-Verschiebungen (auch CLS genannt) sind leider keine Seltenheit und dazu auch noch ziemlich ärgerlich. Nicht umsonst gelten sie als ziemliche “Dämpfer” der User Experience. Kein Wunder also, dass sie Google seit seinem Core Update im Mai 2020 verstärkt ins Visier genommen hat. Und Websites mit einem schlechten CLS-Wert durch die Abstufung im Ranking bestraft. Ein Grund mehr für Suchmaschinenoptimierer CLS optimieren zur Routine zu machen.

Ab welchem Wert sollte man CLS optimieren?

Die nachfolgende Grafik verdeutlicht, ab wann der Parameter Cumulative Layout Shift einer Optimierung bedarf und ab wann Sie dringend Hand anlegen sollten. Der Messwert gibt an, wie viel an sichtbaren Content sich im Sichtfenster verschoben hat sowie die Entfernung, um die sich die Elemente verschoben haben.

CLS optimieren - Werte

Quelle: web.dev

Die häufigsten Ursachen für einen schlechten CLS

CLS optimieren durch Festsetzung von Größenattributen

Medienelemente sollten stets mit den Größenattributen Breite (width) und Höhe (height) versehen sein. Falls die konkreten Inhalte noch nicht bekannt sind, empfiehlt es sich den nötigen Platz mithilfe von CSS-Seitenverhältnis-Boxen zu reservieren. Auf diese Weise geht man sicher, dass der Browser ausreichend Platz im Dokument bereithält, noch während das Bild bzw. Video lädt.

Denn moderne Browser legen das Seitenverhältnis von Bildern basierend auf den hinterlegten Breiten- und Höhenattributen eines Bildes fest (siehe Beispiel darunter). Fehlen diese, treten Layout-Verschiebungen auf. Ein möglicher Grund, der die CLS-Optimierung notwendig macht.

CLS optimieren - Bild Größenattribute im HTML

Quelle: web.dev

Befindet sich das Bild hingegen in einem Container, können Sie CSS verwenden, um die Bildgröße an die Breite des Containers anzupassen. Dabei stellt man die Höhe auf auto; – um zu verhindern, dass die Bildhöhe einen fixen Wert zugeordnet bekommt. Dies könnte im CSS so aussehen:

CLS optimieren - Bild Größenattreibute im CSS

Quelle: web.dev

CLS-Wert durch richtige Element-Platzierung verbessern

Vermeiden Sie die Platzierung des Werbebanners in der Nähe des oberen Randes. Diese tendieren nämlich stärker dazu, Layout-Verschiebungen zu verursachen als mittig platzierte Banner. Dies hat mit der Menge an Inhalten zu tun, die im Anschluss an den Werbebanner kommen.

Häufig verursachen Werbebanner bzw. andere Inhalte in iframes solche Sprünge. Erstere mögen die Umsätze aufgrund höherer Klickraten in die Höhe schnellen lassen. Dennoch geht dies auf Kosten der User Experience, da die Werbebanner im Zuge des Größen-Anpassungsvorgangs den bestehenden Content verschieben. In diesem Fall können Sie den CLS optimieren, indem:

  • der Platzhalter für den Werbebanner eine fixe Größenzuordnung bekommt
  • man den reservierten Platz nicht entfernt, wenn keine Werbung ausgespielt wird (belassen Sie den leeren Platzhalter)
  • der größtmögliche Platz für den Werbebanner reserviert wird, auch auf die Gefahr hin, dass bei kleineren Werbebannern ein weißer Rand zu sehen ist
  • Sie die wahrscheinlichste Größe anhand vergangener Daten für den Banner auswählen

In der nachfolgenden Abbildung sehen Sie, wie sich die CLS-Werte ändern, nachdem dem Werbebanner eine fixe bzw. ausreichende Größe zugeordnet wurde:

CLS optimieren - Werbebanner Optimierung

Quelle: web.dev

Wie Embeds & iframes-Inhalte den CLS beeinflussen

Dasselbe gilt für Embeds sowie iframes-Inhalte. Dank solcher Widgets ist es möglich, portablen Online-Content auf Ihrer Website zu integrieren (z.B. Karte von Google Maps, YouTube-Videos). Allerdings kommt es häufig vor, dass Plattformen, die Embeds anbieten, nicht genug Platz dafür reservieren. Und diese können dann eben ruckartige Verschiebungen des Layouts verursachen.

Auch hier müssen Sie wieder den CLS optimieren. Dabei gilt dieselbe Herangehensweise wie bei Bannern: Reservieren Sie ausreichend Platz für Ihren eingebettenen Inhalt mithilfe eines Platzhalters oder eines Fallbacks. Bei der Findung der optimalen Maße für das embed-Element können Browser-Entwicklertools helfen. Wenn dann der eingebettete Inhalt lädt, passt sich das iframe samt seinem Content den Größenvorgaben an.

Richtiger Umgang mit Pop-ups

Wie auch bei ganz oben platzierten Bannern, sollte man das Hinzufügen neuer Inhalte oberhalb bestehender Inhalte vermeiden. Mit einer Ausnahme: die User-Interaktion erfordert es. Dadurch fällt das CLS optimieren gleich um einiges leichter. Denn gerne wird das nach wie vor mit Pop-ups wie “Jetzt für unseren Newsletter anmelden!”, “Installieren Sie unsere App” oder etwa dem Datenschutzhinweis gemacht.

Daher gilt auch in diesem Fall: Reservieren Sie im Vorfeld ausreichend Platz für solche Anzeigen im Sichtfeld. Wenn dann so ein Pop-up lädt, verschiebt es nicht überraschend die restlichen Inhalte der Seite.

Lösungen für FOUT/FOIT verursachende Web-Fonts

Kaum zu glauben, dass so etwas Unscheinbares wie Fonts beim Downloaden oder Rendern maßgeblich zu Layout-Verschiebungen führen können. Und dennoch kann dies auf zweierlei Art passieren:

  • wenn der eigentliche Font eine Reserveschrift ersetzt (FOUT – Flash of Unstyled Text)
  • oder ein “unsichtbarer” Text angezeigt wird, bevor der eigentliche Font gerendert ist (FOIT – Flash of Invisible Text)

In diesem konkreten Fall können Sie den CLS optimieren, indem Sie auf folgende Tools zurückgreifen:

  • Dank des HTML-Befehls ist es möglich Werte wie auto, swap, block, fallback und optional festzulegen und damit das Rendering-Verhalten gängiger Schriftarten zu beeinflussen
  • darüber hinaus kann auch eine sog. Font Loading API die Ladezeit des eigentlichen Fonts verkürzen

CLS-Wert verbessern durch Wahl der richtigen Animations-Property

Gewiss sind Animationen eine gute Möglichkeit die Aufmerksamkeit der Seitenbesucher effektiver zu fesseln als Bilder. Trotzdem sollte man dabei mit der transform- oder opacity-Property arbeiten. Weil eben Angaben wie box-shadow oder box-sizing zu Re-Layouts führen können.

Fazit: CLS optimieren leicht gemacht

Auf den ersten Blick kann die CLS-Optimierung einschüchternd wirken. Dennoch ist das Ganze gar nicht so schwer, wenn man weiß, worauf zu achten ist. Und welche Elemente den CLS-Wert verschlechtern können. Zudem kann man mit diesem Wissen den Seiten-Content bereits vorab CLS-gerecht aufbereiten.

Wie Sie sehen konnten, dreht sich alles prinzipiell um die Festsetzung von Größenattributen, die Reservierung des nötigen Platzes für Banner und Co sowie den richtigen Umgang mit Web-Fonts und Animationen. Hat man den Dreh einmal raus, fällt CLS optimieren gar nicht mal mehr so schwer.

Schlechte CLS-Werte, aber Sie wissen nicht so recht, woran es liegt? Wir helfen bei der Lösung.

 

Quellen: web.dev