Commulative Layout Shift in Gambio – Gründe und Fehlerbehebung

CLS ist ein Faktor in den sogenannten Web Vitals von Google, die vermutlich ab Mai 2021 auch mit Rankingfaktor werden.

Kurz gesagt gibt der CLS Wert an, wie stark sich Elemente der Seite während des Ladens verschieben. Ein Ärgernis, welches jeder kennt. Man will etwas anklicken und just in dem Moment „springt“ das Element weg und man klickt etwas ganz anderes an. Das sollte nicht sein und wird von Google ab 2021 vermutlich konsequent bestraft.

Dabei gilt aktuell die Regel, dass CLS Werte um 0,1 noch tolerabel sind, alles darüber hinaus ein Problem sein kann. Werte um 1,0 oder höher sind absolut indiskutabel.

Die Ursachen für CLS können ganz unterschiedlich sein und es ist eine eher schwierige (weil sehr kleinteilige) Aufgabe diese zu finden. PageSpeed Insights und Lighthouse geben nur den Wert, nicht aber die Ursache für CLS aus.

Daher ein Tipp von uns: Seit neusten macht dies das Tool GTMetrix. Dies hat Lighthouse integriert und gibt zumindest grob die Elemente aus, welche CLS verursachen. Das ist schon einmal eine große Hilfe.

Ebenfalls eine große Hilfe und im Endeffekt das gleiche machen die WebDev-Tools in aktuellen Versionen des Google Browsers Chrome. Dort hat man die Option „Layout Shift Regions“, welche während des Ladens der Seite die Bereiche markieren, die sich verschieben. Stellt man via Netzwerkdrosselung die Geschwindigkeit nach unten, bleibt die Markierung etwas länger.

Ursache 1: Probleme in der Programmierung

Gambio ist ein komplexes System und solche Systeme sind nie perfekt. Wären sie es, würde es keiner Updates bedürfen. Es ist nicht ausgeschlossen, dass einzelne Elemente in Gambio selbst Probleme verursachen können.

So scheinen die Swiper, welche man für Produkte (Angebote, Neuerscheinungen usw.) einstellen kann CLS zu verursachen. Dazu gibt es in diesem Gambio Foren Thread eine Diskussion: Schlechte CLS (Cumulative Layout Shift) Werte bei Google Search Console

Gambio wird tendenziell solche Probleme suchen und mit Updates beheben.

Ursache 2: nutzlose Codeelemente und Spegetticodes

Spagetticodes sind nie eine gute Idee. Als Spagetticode wird der Teil im Code bezeichnet, der erzeugt wird wenn man Textstyling mit dem WYSIWYG-Editor bearbeitet. Also statt die Textgröße von Überschriften, Texten usw. im Styleedit bzw. via eigenem CSS festzulegen, auf jeder Seite die Texte in Größe, Form und Farbe selbst zurechtbastelt.

Darüber hinaus können in Shops, vor allem da wo schon viele Hände dran waren, Codefragmente vergessen „rumliegen“, die nicht sofort sichtbar sind. Es lohnt sich also danach zu suchen. So hatte ein Kunde folgenden Code in mehrere Footerspalten und einigen Inhaltsbereichen:

Im Frontend nicht sichtbar, aber beim Laden hat dieser Code eine Verschiebung der Elemente nach dem Hauptladevorgang erzeugt. Nicht sichtbar für das Auge, aber sehr wohl messbar von Google.

Ursache 3: Bilder in DIV-Containern

Ein weiteres Element, welches CLS verursacht sind häufig Bilder, die über DIV-Container angeordnet sind. Das macht man z.B. da wo die Bilder als Raster oder Masonary besonders angeordnet werden sollen. Hier entsteht das Problem, dass die Bilder häufig nach Breite geladen werden und dann die Höhe erst berechnet wird. Die Höhe wird aber erst berechnet, wenn der Rest auch schon geladen wurden, womit alle Elemente nach unten springen.

Wie man das verhindert ist einfach:

1. In der CSS die Bildhöhe mit height:auto absichern. Bei height:auto wird die maximale Bildgröße vorreserviert und es kommt so zu keiner Verschiebung. Achtung: Mit max-height funktioniert dies nicht
2. Die tatsächliche Größe der Bilder beim Einfügen in die Seite festlegen. Ist das Bild also 500×200 Pixel groß, diese Werte auch fest angeben

Nun entsteht aber folgendes Problem speziell in Gambio. Zwar hat man jetzt keinen CLS mehr, aber die Bilder sind nicht responsive. Bei Smartphone entsteht also ggf. horizontales Scrollen, was natürlich ein no go ist.

Das verhindert man, indem man beim Bild das Feld „Formatvorlagenklassen“ mit img-responsive ausfüllt. Nun werden die Bilder in der Breite an den Bildschirm angepasst.

Was nun passiert ist aber leider eine Verzerrung des Bildes. Denn wir haben ja die totale Größe des Bildes definiert und bei der Höhe „auto“ angelegt, womit der Browser aufs maximal mögliche in der Höhe geht.

Hier einen großen Dank an unseren Kollegen Dominik Späte von werbe-markt.de, der eine gute Idee zur Lösung hatte: Aspect Ratio.

Dazu braucht es aber ein paar kleine Anpassungen.

Zunächst muss man ins eigene CSS diesen Wert hinzufügen. Das ist vorsorglich. In der Regel sollten die Aspect Ratio auch ohne diesen Code-Schnipsel funktionieren, da es Browser-Standard ist. Wir hatten jedoch bei Tests vereinzelt das Problem, dass vereinzelt abweichendes Verhalten beobachtet wurde.

Dann muss man im Quelltext des Contents ändern, wie Gambio die Größe des Bildes festlegt. Standardmäßig sieht der IMG-Tag bei Gambio so aus:

Das muss nun geändert werden und so aussehen:

Dies sind die uns derzeit bekannten Ursachen für CLS in Gambio. Dieser Beitrag wird erweitert, wenn weitere bekannt werden.

Letzter Stand: 17.12.2020