Schlechte CLS (Cumulative Layout Shift) Werte bei Google Search Console

Kann der Internet Explorer nicht. Solange wir den supporten steht das nicht zur Debatte.



Das ist aber ja wie angekündigt nun bald vorbei, dann lassen wir den IE und dessen Nutzer egal sein.

 

Hatte ich auch so verstanden mit den Bildern, srcset und IE.
Besser früher als später den Support einstellen, dass darf bei dem Anteil der Nutzung kein "Hemmschuh" mehr sein.

Ich hatte mich nur gewundert, was denn nun tatsächlich in Bezug auf CLS angemeckert wird (zumindest bei uns).
Hätte da andere Themen erwarte und nicht z.B. ein "Überschriften-Widget".

 

Das ganze Layoutshift Thema muss sich auch noch etwas setzen, ganz allgemein. Ich glaube nicht, dass das so ein Monster wird. Es ist ein Monster, wenn man das als Kunde sieht und alles mehrfach und lang hoppelt, das ist dann ne miserable Nutzererfahrung aus multiplen Gründen. Wie weit das genau für Rankings relevant wird bin ich aber noch gespannt. Wir beginnen bei gerade ist das egal. Wenn das ein kleiner Faktor wird (wovon ich ausgehe), ist das eine Kosten/Nutzenfrage. Man wird dann was machen, muss aber nicht jeden Beinbruch eingehen. Wenn das ein potenter Rankingfaktor wird, wovon ich aktuell zum Beispiel nicht ausgehe, muss man da kräftig ran.

 

Sehe ich grundsätzlich auch so, allerdings sieht es so aus, also soll es ein Rankingfaktor werden (vermutlich):
(Link nur für registrierte Nutzer sichtbar.)

Muss natürlich nicht stimmen und welche Auswirkungen das hat, weiß man ja auch noch nicht.
Wenn überhaupt welche, außer in den "Google Kontroletti-Tools"...

 

Das floss in meine Vermutung ein. Das ist aber wie ne Bundestagswahl: Wenn eine Randpartei antritt und 1% Wähler kriegt, bestimmt die nicht die Tagespolitik. Kriegt sie aber mehr als 5% zusammen, muss man schon mal hinschauen. Und das wüsste ich gerade nicht vorherzusagen, ich hätte nur ne Prognose anzubieten. Die wäre derzeit: Kleiner Faktor. Wir werden sehen.

 

Übel, übel, unsere Core Web Vitals:

Es liegt am CLS von 0,25 (Grenzwert 0,1)

 

Es liegt offenbar an der Header Leiste:

Related Node ul.nav.navbar-nav.navbar-right

Hat jemand eine Idee wie man das beheben kann (außer sie auszublenden)?

 

Hast du mal eine URL? Würde mir das mal direkt anschauen.

 

Ich glaube durch deinen Custom CSS ist es besser geworden, oder?

Layout Shift
Warning
Cumulative Layout Shifts can result in poor user experiences.
Score
0.3788
Cumulative Score
0.3993
Had recent input
No
Moved from
Location: [0,165], Size: [3x371]
Moved to
Location: [0,165], Size: [1348x371]
Related Node
img.img-responsive.center-block

 

Habs eben nachgemessen: Leider Nein.

Dein CLS wird durch den Slider verursacht. Habe ich auch bei anderen Seiten. Problem dürfte da liegen, dass auch die Slider via style="width: 1366px" usw. eingebunden werden. Mit width="1366" und height="523" (in deinem Fall) dürfte das CLS Problem auf der Startseite vom Tisch sein.
Die automatisch eingebundenen Kategorienbilder im oberen Bereich verursachen das gleiche Problem. Da ist das Problem aber schnell zu beheben, indem man die Kategorienbilder rausnimmt und das ganze per <img>-Tag im oberen Bereich der Beschreibung ohne style einbindet. Das kannst du bei deinen Unterkategorien einsetzen, wo der CLS Wert bei 0,11 liegt.

In Kategorien wo du das nicht hast, liegt der CLS Wert weit unter 0,1. Hier ist tatsächlich das Problem, wie Gambio Slider und Kategorienbilder einbindet. Das kristalisiert sich für mich raus.

Mein geschicktes CSS war nur der Versuch die Container des Sliders in der Höhe zu definieren. Klappt aber bei allen Versuchen noch nicht so, wie ich es gerne hätte. Sind einfach relativ viele Container, die da ineinander liegen.

CLS hier war übrigens per PN:
.slider {
height: auto;
}

.swiper-container {
height: auto;
}

.swiper-slide {
height: auto;
}

.swiper-wrapper {
height: auto !important;
}

...aber durch die Style="" Einbindung schlicht ohne Wirkung.

 

Aber die Kategoriebilder sind doch schon ohne style eingebunden, oder? Aus dem Quelltext:

Code:

<div class="categories-images">
<img src="sub_images/categories/gabelbaum.jpg" alt="Windsurf Gabelbäume" title="Windsurf Gabelbäume" class="img-responsive" />
</div>

Meinst du dann, class="img-responsive" ersetzen durch width="100%" oder wie?

 

Nein. img-responsive ist die Klasse, die stehen bleiben muss.

Code:

<img src="sub_images/categories/gabelbaum.jpg" alt="Windsurf Gabelbäume" title="Windsurf Gabelbäume" class="img-responsive" height="230" width="922"/>

So einfach ganz oben in den Quelltext des Beschreibungstextes rein und dafür das Kategoriebild entfernen (ganz unten, wo man es sonst einfügt, sonst ist es logischerweise 2x drin). Dann sollte CLS auf der Kategorieseite Geschichte sein. So jedenfalls bei den anderen Shops.

 

Also geht es nur darum, Größenangaben fürs Bild hinzuzufügen? Oder auch um das <div class="categories-images"> ?

Ich frage so doof nach, weil ich ohnehin für die Kategoriebilder nicht den Gambio Standard verwende. Weil ich als Logos für die Unterkategorien ein kleines Bild verwende und für die Kategorie-Banner was anderes.

 

Den DIV-Container kannst du weglassen.

Und ja: Durch das Hinzufügen der Größe in dieser Form, nicht als CSS Style Element, wird der Platz für das Bild beim Laden bereits reserviert und Content darunter springt nicht.

GTMetrix hat dazu übrigens 3 wunderbare Videos gemacht, die CLS auch nochmal schön visualisieren: https://gtmetrix.com/cumulative-layout-shift.html

 

Hallo Sergej,

wie stellst du dir das denn vor? Weil so wie es jetzt ist ist es ja v.a. aus SEO-Sicht suboptimal, wenn CLS bald ein Ranking-Faktor wird.

VG

 

Ist nicht suboptimal. Auch bei einem Responsive Design kann man die Höhe mit height: auto im Container reservieren. Responsive greift dann mit @media im CSS um die entsprechenden Anordnungen auszuliefern. Gibt es denn von Seiten der Programmierung eine Möglichkeit das Laden der Seite nicht nach Umgebungsvariablen, sondern nach Design von oben nach unten fest zu legen? Ach ja...Lazy Loading könnte da in Frage kommen...zumindest für nicht sichtbare Elemente weiter unten. Dachte Gambio hält davon nichts?

Und keiner redet von einer Einbindung ohne CSS und js. Aber das Gambio die Größe des Bildes via style Option im IMG festlegt ist vor dem Hintergrund von CLS nicht optimal.

Normal lädt der Browser ja die Seite von oben nach unten. Nur dass eben z.B. ein 300 kb Bild länger braucht als ein Text der nur wenige Bytes groß ist. Wird das Bild jetzt erst später geladen als der Text (weil man natürlich das Laden des Textes nicht warten lassen will, bis das Bild geladen ist...das würde die Ladezeit ja erhöhen wenn man das Element für Element abarbeitet) verschiebt es den Text. Wird der Container des Bildes aber schon in der korrekten Höhe reingeladen und nur das Bild wird nachgeladen, gibt es keinen Shift.

Da gibt es, auch mit Verweis auf den Beitrag von @Dominik Späte kein Problem. Wir haben ja jetzt schon bei Kunden Bilder via fester Größen mit height="xxx" und width="xxx" und img-responsive eingebunden. Funktioniert Responsive fantastisch. Nur für den Slider haben wir noch keine Lösung die einfach Umsetzbar wäre. Gibt es sicher, indem man die entprechenden Dateien überlädt (also als Modul), aber wir suchen eigentlich eine simplere Lösung.

 

Wichtigen Dingen folgen ist richtig, aber Extremismus ist nie gut. Und der erste bei allem sein müssen, ist auch nicht immer gut.

Was man weiss: Nächstes Jahr, in grob 6 Monaten, wird Google beginnen Web Vitals als Rankingfaktor zu benutzen. Das ist erstmal noch einige Zeit hin. Niemand weiss, ob das dann ein bedeutender oder unbedeutender Faktor wird, zumindest kenne ich dazu nicht eine belastbare Aussage.

Klar ist auch: Layout Shifts sind, sofern sie in grösserem Maßstab auftreten, schlecht für die Conversion. Kunden sind nicht begeistert, wenn alles beim Laden immer 7x zuckt und sich verschiebt. Google hat Recht, das als Qualitätsmassstab zu erwägen.

Ich unterstelle: Real ist das in kaum einem Gambioshop ein ernsthaftes Thema. Ich sehe bei den meisten wenig zucken, und ich seh bei noch weniger Leuten wiederholt was zucken. Es gibt abseits der Theoriemessungen die jetzt seit ein paar Tagen hier rumgehen auch eigentlich keine Kundenbeschwerden dazu.

Eigentlich verschafft das Luft, um in Ruhe zu urteilen und noch etwas zu kucken.

Klar muss auch sein: Wenn man dem Output der Theoriebenchmarks folgt wird man irgendwas kaputt machen. Responsive Webdesign lebt von Anpassungsfähigkeit an Nutzergeräte, die Tipps hier wollen wieder Sachen mehr oder minder verstatischen. Willkommen in den 2000er Jahren. Das kann normal nicht pauschal richtig sein.

Wenn man das so reflektiert, muss eigentlich klar sein: Es braucht wiedermal irgendeinern Kompromiss, der für alles passabel funktioniert.

Und da stehen wir gerade. Wir wissen wir müssen da mal drüber nachdenken, wie immer schlau agiieren, aber wir haben noch Zeit das zu tun. Darum muss jetzt nichts kommen. Darum muss irgendwann was kommen.

 

Nein, das ist nicht wirklich tiefgehend so. Ein Mensch liest eine Seite aber von oben nach unten. Man trenne hier als Empfänger und Technik.

"height: auto" ist nun kein Superheilmittel. Das sagt dem Browser der soll sich mal super selbst was ausrechnen. Und wenn ein anderes nahes Element Einluss hat das einfach mal alles reflowen. Das gibt Layout Shifts. Die können WIllkommen sein.

Wäre weit weg, die Designidee ist anders.

Lazy Loading hat Fallstricke. Bei Bildern war zum Beispiel Browsersupport immer ein Thema. Mit dem Supportende für den Internet Explorer, das sehr nah ist, kommen da neue Möglichkeiten in Frage. Beim eigentlichen Dokument muss man aufpassen was man macht. Da kann man schnell Inhalte für Crawler unsichtbar machen, die am dann nötogen Javascript scheitern können und dann Sachen nicht sehen. Sparsamkeit bei solchen Experimenten ist da oft eine Tugend.

Ein Bild das nicht geladen ist, ist auch in der Breite unbekannt. Machst du den Container statisch, skaliert das nicht mehr leicht mit Zielgeräten. Hatten wir oben schon kurz. Das würde öfter was kaputtmachen, was wir jetzt als wünschenswerten Nutzen sehen.

Dafür könnten wir aktuell keine grosse Leidenschaft entwickeln. Wir bewerten aber die Sachlage neu und schauen was dann nötig sein wird.

Haben wir noch nicht drüber nachgedacht, kommt später in der Kette. Erst muss das Ziel klarer werden.

Da seid ihr vorläufig auf euch gestellt. Wie gesagt: Wir sind da gerade nicht.

 

Bin ich bei dir. Hatte jetzt erst wieder eine Anfrage von einer Wordpress-Seite die zwar max. Punktzahl bei WebVitals raushaut, aber der Rest so grottig war...die hat auch blos nicht gerankt. Bedenkt aber bitte auch die Seite der Shopbetreiber, bei denen manche auch vom Ranking bei Google leben. Die haben ggf. Angst und das ist verständlich. Habe manchmal das Gefühl (subjektiv), dass Gambio diesen Punkt nicht so ganz ernst nimmt.

Bin ich bei dir. Aber es ist besser zu sagen: "Ach, so schlimm war es nicht" als "Hätten wir mal mehr gemacht".

Da wiederspreche ich dir zunächst. Sehr viele Gambioshops haben hier ein Problem. Das liegt aber zum größten Teil nicht (!) an Gambio. Die meisten Probleme wurden von selbst eingebastelten Dingen verursacht, auf die Gambio keinen Einfluss hat.
Die einzigen Punkte die in Standard-Gambio CLS zu verursachen scheinen sind:

• in manchen Versionen die Swiper (Haben wir noch nicht genauer untersucht warum und wieso)
• Slider
• Kategorienbilder
• Bilder die via WYSIWIG eingebaut werden und definierte Breite und Höhe bekommen - egal ob img-responsive gesetzt ist

Die Swiper mal außen vor stellt aktuell nur der Slider ein Problem dar. Der Rest ist mit überschaubarem Aufwand durchaus jetzt schon lösbar.

Beim Slider kann man übrigens bei fast jedem Gambioshop beobachten, wie er den gesamten Inhalt beim Laden nach unten schmeißt, weil er eigentlich immer mit kleiner Verzögerung geladen wird.

Unsinn. Niemand will was verstatischen. Aber Höhe vor-definieren und Responsive schließt sich nicht aus.

Natürlich.

Da hab ich Quark geschrieben und vor dem Absenden nicht nochmal durchgelesen. Das sollte heißen: Normal liest ja auch der Browser die Seite (Quelltext) von oben nach unten. Er lädt sie natürlich nicht von oben nach unten, sondern lädt die Elemente anhand der festgelegten Reihenfolge, die der Server ausgibt.

Kein Super Heilmittel. Aber eine gute Lösung, wenn die width bereits definiert ist. Dann richtet sich die Höhe automatisch nach der Breite und der Container hat bereits die Höhe, die der Container eh haben wird, wenn alles geladen ist. Das verhindert den Shift.
Funktioniert (ganz praktische Erfahrung der letzten 2 Wochen wo wir uns dem Thema sehr intensiv gewidmet haben) in sehr vielen Fällen. Anhand des Sliders kann man aber natürlich auch sehen, dass es nicht immer funktioniert.

Die Frage war, zugegeben, eher rhetorischer Natur.

Lazyload rein für Bilder ist aus meiner Sicht eine sehr gute Sache. Bei dem Punkt werden wir nie auf einen gemeinsamen Nenner kommen.

Ein Bild das nicht geladen ist ja. Ein Bild das in der ersten Anfrage aber schon seine Informationen via Quelltext übermittelt ist es eben nicht. Die Lösung ist hier sicher komplex, aber das pauschale "das macht mehr kaputt" ist aus meiner Sicht einfach zu kurz gegriffen.

Gibt es denn einen Grund, dass ihr an der Einbindung via Style im IMG Tag festhaltet?

Ziel: Verhindern dass der Inhalt unterm Slider beim Laden von diesem nach unten gedrückt wird.

Genau das ist die Idee, warum wir es auch aktuell so zentral auf der Agenda haben.

Nicht missverstehen. Ich bin mir bewusst, dass die oben angesprochenen Änderungen nicht mal mit "Schnips da ist die Lösung" gemacht ist und man da keine Roadmap für umwirft. Aber um solche Dinge zu besprechen und Lösungsvorschläge zu erarbeiten...genau dafür sollte doch ein Ökosystem aus Partnern und Community da sein. Keiner hier sagt, dass Gambio doof ist. Aber, und das bringt mich zum Start dieses postings, die Ängste der Betreiber sollten genauso wie die Lösungsvorschläge ernst genommen werden. Das kommt, zumindest aus meiner Sicht, gerade so gar nicht rüber.