Beim Cumulative Layout Shift (CLS) handelt es sich um eine Kennziffer im Bereich der Suchmaschinen-Optimierung, welche das Risiko unerwarteter Layoutverschiebungen beschreibt. Dies kann die Nutzererfahrung beeinträchtigen und zur Abwertung einer Site im Ranking bei Suchmaschinen führen.
Wir zeigen, worauf Sie bei der Programmierung und dem Design von Websites besonders achten müssen und welche Lösungen es gibt.
Was ist der Cumulative Layout Shift (CLS) eigentlich?
Der Cumulative Layout Shift (CLS), auf deutsch etwa „summierende Layoutverschiebung“ beschreibt das lästige Phänomen von während der Nutzung einer Website sich plötzlich verschiebenden Inhalten.
Bestes Beispiel sind hier Online-Shops, wenn dort Navigationselemente unerwarteterweise durch eingeblendete Benachrichtigungen verschoben werden, sodass sich der Nutzer erst wieder neu auf der Seite orientieren muss – und versehentlich ein unerwünschtes Produkt in den Warenkorb legt.
Manche Suchmaschinen nutzen den CLS als Rankingfaktor bei der Beurteilung von Websites:
Je schlechter der CLS (also je mehr Layoutverschiebungen), desto niedriger das Ranking. Allerdings handelt es sich beim CLS nur um einen Faktor von vielen, der die Bewertung beeinflusst.
So oder so lohnt es sich für Webdesigner, ein Auge auf mögliche Inhaltsverschiebungen zu werfen und den CLS zu optimieren. Schon allein, um die vielgepriesene User Experience (sprich Bedienerfreundlichkeit) der Website auf ein möglichst hohes Niveau zu bringen.
Ursachen für einen schlechten CLS
Folgende Elemente beeinflussen den Cumulative Layout Shift negativ:
- Bilder und Grafiken ohne festgelegte Abmessungen (Höhe und Breite)
- Bestimmte eingebettete Schriftarten
- Dynamisch erzeugter Content, Inhalte von Dritten (einschließlich Werbebanner)
- Bestimmte mit CSS erzeugte Animationen
Tipps zur Optimierung des Cumulative Layout Shifts
CLS bei Bildern und „div“-Boxen
Im responsiven Webdesign ist es nicht unüblich, Inhaltselemente (z.B. Bilder und DIVs) ohne Angaben von Höhe und Breite aufzurufen.
Der Entwickler verlässt sich darauf, dass der Webbrowser den Platzbedarf aller Inhalte mit den für das Endgerät des Nutzers passenden Abmessungen eigenständig berechnet.
Bei nachträglich geladenen Elementen bedeutet dies fast immer ein Verschieben der folgenden Inhalte. Schlicht, weil der Webbrowser beim Aufbau der Seite keinen Platz dafür vorgesehen hat.
Glücklicherweise können Sie diesen häufig auftretenden Fehler relativ einfach beheben, indem Sie jedes auf der Webseite vorhandene Bild oder „div“-Box mit Angaben für Höhe (height) und Breite (width) im HTML-Code versehen. So weit, so gut.
Das ist jedoch nicht immer möglich, denn ein responsives Seitenlayout erfordert in manchen Situationen nun einmal auf das jeweilige Endgerät des Nutzers angepasste Inhalte. Doch auch hier bietet sich mit „CSS Aspect Ratio Boxen“ eine mögliche Lösung an:
Bei diesem Trick gehen wir von der Annahme aus, dass das Seitenverhältnis von Inhalten auf unterschiedlich großen Bildschirmen (z.B. Desktop, Notebook, Smartphone) gleich bleibt. Unter Seitenverhältnis versteht man übrigens das Verhältnis zwischen Höhe und Breite, also meist 4:3 oder 16:9.
Wenn also zumindest eine der beiden Dimensionen – Höhe oder Breite – bekannt sind, kann der Browser anhand des vorgegebenen Seitenverhältnisses den anderen Wert berechnen.
Beispiele für Bilder mit Größenangabe
<img src="https://www.14all-magazin.com/foto.jpg" height="100" width="400">
<img src="https://www.14all-magazin.com/foto.jpg" height="255">So funktioniert’s:
Das erste Bild wird in den Abmessungen 100 Pixel * 400 Pixel angezeigt (Höhe*Breite), unabhängig von seinen tatsächlichen Maßen.
Für das zweite Bild wird eine Höhe von 255 Pixel festgelegt. Die Breite berechnet der Browser selbst (unter Beibehaltung des Seitenverhältnisses, sofern übergeordnete Elemente nichts anderes bestimmen).
Beispiel für CSS Aspect Ratio Boxen
<div style="aspect-ratio: 16 / 9;">Hier steht der Inhalt!></div>So funktioniert’s:
Für die „div“-Box wird ein Seitenverhältnis von 16:9 festgelegt. Die tatsächlichen Abmessungen werden von den übergeordneten Elementen bestimmt.
Geladene Schriften
Viele Websites begnügen sich nicht mit den Standardfonts der Webbrowser, sondern laden externe Fonts entweder vom eigenen Server oder von Drittanbietern.
Je nach Performance des ausliefernden Servers stehen die zu nutzenden Schriftarten während des Seitenaufbaus aber noch gar nicht zur Verfügung. Um die Seite trotzdem erzeugen zu können, nutzen Webbrowser eine der beiden folgenden Möglichkeiten:
- FOUT (flash of unstyled text): Der Webbrowser verwendet eine Standardschriftart und wandelt den Text automatisch um, sobald der externe Font vollständig geladen wurde.
- FOIT (flash of invisible text): Der Webbrowser unterdrückt die Erzeugung der jeweiligen Texte und zeigt diese erst an nach dem vollständigen Laden des externen Fonts.
Beide Methoden führen fast unweigerlich zu sich verschiebenden Inhalten, was den Nutzer verwirren kann.
Die Lösung besteht darin, die CSS-Eigenschaft „font-display“ des betreffenden Fonts auf den Wert „optional“ zu setzen und generell externe Fonts vorab zu laden.
Beispiel für eine CLS-freundliche Integration von Fonts
<html>
<head>
<link rel="preload" href="myfont.woff" as="font">
<style type="text/css" media="screen">
@font-face { font-family: ofaFont1; src: url(myfont.woff); font-display: optional; }
body { font-family: ofaFont1; }
</style>
</head>
<body>
<div>Hier steht ein Text in der Schriftart ofaFont1!</div>
</body>
</html>Im Kopfbereich der Seite wird der Font „ofaFont1“ spezifiziert und geladen (Zeile 3). Dies geschieht vor dem ersten Paint des Browsers (als „Paint“ bezeichnet man das „Zeichnen“ von Inhalten auf dem Bildschirm des Betrachters). Auf diese Weise reduziert sich die Gefahr einer Layoutverschiebung.
Das Attribut „font-display: optional;“ in der font-face-Deklaration (Zeile 5) ist eigentlich überflüssig. Es besteht bei einer langsamen Netzanbindung sogar die Gefahr, dass der eingebundene Font permanent durch eine alternative Schriftart ersetzt wird.
Eingebettete Elemente, iFrames und Werbebanner
Egal ob Social Media oder Werbenetzwerke – viele Websites verwenden eingebettete Elemente Dritter und nur in den seltensten Fällen werden Sie als Entwickler darauf verzichten wollen (oder können).
Hier sollten Sie bei Problemen mit nachträglichen Layoutverschiebungen als erstes den technischen Support des Anbieters kontaktieren und dessen Empfehlungen folgen.
Als letztes Mittel können Sie die externen Inhalte in „div“-Boxen mit festgelegten Abmessungen bzw. Seitenverhältnissen zu packen, um im Fall der Fälle deren Platzbedarf zu begrenzen.
Animationen via CSS
Bei mit CSS-Eigenschaften generierten Animationen besteht grundsätzlich die Gefahr von Layoutverschiebungen. Als Entwickler sollten Sie daher Animationen nur bei Bedarf und gezielt einsetzen.
Ausführliche Tests mit verschiedenen Bildschirmformaten helfen, das Risiko unerwarteter Layout Shifts aufzudecken, sodass Sie entsprechende Maßnahmen treffen können (z.B. durch Verzicht der Animation auf kleinen Bildschirmen).
Fazit und Zusammenfassung
Webdesigner und -entwickler sollten Auswirkungen des Cumulative Layout Shift im Blick behalten. Das gilt vor allem für nachträglich in eine Seite eingefügte Inhalte wie Pop-Ups, Hinweistexte oder sich automatisch aktualisierende bzw. nachladende Inhalte Dritter.
Nicht immer ist eine Optimierung mit vertretbarem Aufwand machbar, das betrifft vor allem das erstmalige Laden einer Seite. Aber zumindest in diesem Fall sollten Layoutverschiebungen für den Betrachter kaum zu negativen Auswirkungen führen.
Autor: Tobias Eichner | Datum der Veröffentlichung: September 2022
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
