Orange Raven Chemnitz
  • Startseite
  • Blog
  • Portfolio
    • SEO
    • SEO Analyse
    • Gambio Online Shop
    • Gambio Shop Hosting
    • WordPress Website
    • SEA / Google Ads
    • WoltLab Suite CMS Website
    • Marketingberatung
  • Kontakt
  • Über uns
  • Suche
  • Menü Menü
Zurück zum Blog

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:

<p data-pm-slice="1 1 ["></p>
<div id="UMS_TOOLTIP" style="position: absolute; cursor: pointer; z-index: 2147483647; background-color: transparent; top: -100000px; left: -100000px; background-position: initial initial; background-repeat: initial initial;"></div>

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.

img {
aspect-ratio: attr(width) / attr(height);
}

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:

<img style="height: 500px; width: 500px;" src="templates/Honeygrid/img/gutscheinbild.jpg" class="img-responsive" alt="Gutscheine" />

Das muss nun geändert werden und so aussehen:

<img src="templates/Honeygrid/img/startseite008.jpg" class="img-responsive" alt="Gutscheine" width="500" height="500" />

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

Zurück zum Blog

Rico Stodolka - Inhaber und Gründer
Rico Stodolka

Rico ist Gründer und Inhaber von Orange Raven. Er ist seit über 10 Jahren als Marketing Experte (Studium Uni) speziell für Gambio und WordPress unterwegs.

Google Reviews

Always great quality work. In conversations, you always notice that what he explains and carries out has a hand. I can only recommend.

Google Logo
thumb D. Rie.
9. Juli 2020

Kontakt zu Orange Raven

E-Mail: info@orange-raven.de

Tel.: +49 371 26 23 27 69

WhatsApp: 0371 26 23 27 69

Mo. – Fr.: 10:00 – 17:00 Uhr

Fun Facts über Raben

Einige Rabenarten (z.B. Kolkraben) können bis zu 30 Jahren alt werden.

© Copyright - Orange Raven 2008 - - Enfold WordPress Theme by Kriesi
  • Dokumente
  • Datenschutzerklärung
  • Impressum
  • Anleitungen
Warum es 2020 im Blog stiller istStille im Blog 032020Übersicht Google Suchergebnisse - Wo ist die Meta DescriptionMeta Description – Warum wird sie abgeschnitten oder nicht verwendet?
Nach oben scrollen

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung: Datenschutzerklärung

OK, ich akzeptiere die CookiesCookies aktivieren/deaktivieren

Cookie- und Datenschutzeinstellungen



Wie wir Cookies verwenden

Wir können Cookies anfordern, die auf Ihrem Gerät eingestellt werden. Wir verwenden Cookies, um uns mitzuteilen, wenn Sie unsere Websites besuchen, wie Sie mit uns interagieren, Ihre Nutzererfahrung verbessern und Ihre Beziehung zu unserer Website anpassen.

Klicken Sie auf die verschiedenen Kategorienüberschriften, um mehr zu erfahren. Sie können auch einige Ihrer Einstellungen ändern. Beachten Sie, dass das Blockieren einiger Arten von Cookies Auswirkungen auf Ihre Erfahrung auf unseren Websites und auf die Dienste haben kann, die wir anbieten können.

Notwendige Website Cookies

Diese Cookies sind unbedingt erforderlich, um Ihnen die auf unserer Webseite verfügbaren Dienste und Funktionen zur Verfügung zu stellen.

Da diese Cookies für die auf unserer Webseite verfügbaren Dienste und Funktionen unbedingt erforderlich sind, hat die Ablehnung Auswirkungen auf die Funktionsweise unserer Webseite. Sie können Cookies jederzeit blockieren oder löschen, indem Sie Ihre Browsereinstellungen ändern und das Blockieren aller Cookies auf dieser Webseite erzwingen. Sie werden jedoch immer aufgefordert, Cookies zu akzeptieren / abzulehnen, wenn Sie unsere Website erneut besuchen.

Wir respektieren es voll und ganz, wenn Sie Cookies ablehnen möchten. Um zu vermeiden, dass Sie immer wieder nach Cookies gefragt werden, erlauben Sie uns bitte, einen Cookie für Ihre Einstellungen zu speichern. Sie können sich jederzeit abmelden oder andere Cookies zulassen, um unsere Dienste vollumfänglich nutzen zu können. Wenn Sie Cookies ablehnen, werden alle gesetzten Cookies auf unserer Domain entfernt.

Wir stellen Ihnen eine Liste der von Ihrem Computer auf unserer Domain gespeicherten Cookies zur Verfügung. Aus Sicherheitsgründen können wie Ihnen keine Cookies anzeigen, die von anderen Domains gespeichert werden. Diese können Sie in den Sicherheitseinstellungen Ihres Browsers einsehen.

Google Analytics Cookies

Diese Cookies sammeln Informationen, die uns - teilweise zusammengefasst - dabei helfen zu verstehen, wie unsere Webseite genutzt wird und wie effektiv unsere Marketing-Maßnahmen sind. Auch können wir mit den Erkenntnissen aus diesen Cookies unsere Anwendungen anpassen, um Ihre Nutzererfahrung auf unserer Webseite zu verbessern.

Wenn Sie nicht wollen, dass wir Ihren Besuch auf unserer Seite verfolgen können Sie dies hier in Ihrem Browser blockieren:

Andere externe Dienste

Wir nutzen auch verschiedene externe Dienste wie Google Webfonts, Google Maps und externe Videoanbieter. Da diese Anbieter möglicherweise personenbezogene Daten von Ihnen speichern, können Sie diese hier deaktivieren. Bitte beachten Sie, dass eine Deaktivierung dieser Cookies die Funktionalität und das Aussehen unserer Webseite erheblich beeinträchtigen kann. Die Änderungen werden nach einem Neuladen der Seite wirksam.

Google Webfont Einstellungen:

Google Maps Einstellungen:

Google reCaptcha Einstellungen:

Vimeo und YouTube Einstellungen:

Andere Cookies

Die folgenden Cookies werden ebenfalls gebraucht - Sie können auswählen, ob Sie diesen zustimmen möchten:

Einstellungen akzeptierenAblehnen und Benarchichtigung schließen
Loading...