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

Thema wurde von Anonymous, 5. Juni 2020 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.122
    Danke vergeben:
    947
    Ab welcher Version gibt es denn das Problem mit den doppelten Bildern und dem Spinner, und ist es ein Malibu-Problem, ein Theme-Problem oder ein Gambio-Problem?
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    2. Mai 2017
    Beiträge:
    102
    Danke erhalten:
    23
    Danke vergeben:
    64
    #42 Anonymous, 29. November 2020
    Zuletzt bearbeitet: 29. November 2020
    also in meinem 4.1.2.0 Liveshop ist es in der Template Version nicht - hier habe ich auch nicht gewechselt

    im 4.2. 0.1 Testshop war es nicht in Template aber in Theme und in Malibu
     
  3. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    in der 4.3.1 ist es nicht. es taucht offenbar nur in der 4.1 /4.2 im Theme (egal in welchem) auf
     
  4. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Sobald ich Zeit habe, messe ich nochmal eine Reihe mit 4.3.1. Muss ich aber erst ein Testsystem aufsetzen.
     
  5. Andreas Siebold

    Andreas Siebold Erfahrener Benutzer

    Registriert seit:
    12. März 2019
    Beiträge:
    293
    Danke erhalten:
    47
    Danke vergeben:
    79
    Hab das mal mit GTmetrix versucht. Leider ist das Video nur auf den oberen Ausschnitt reduziert. Gibt´s da ein Trick oder ein anderes Tool?
     
  6. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Da habe ich mich sehr verkürzt bzw. schlicht falsch ausgedrückt. Es muss heißen "Die meisten Hinweise auf den Grund für CLS Fehler findet man am einfachsten..."

    Bei GT Metrix ist man noch in soweit eingeschränkt, dass man nicht speziell bei mobile suchen kann und verantwortliche Elemente im unteren Bereich teilweise nicht sieht. Besonders dann, wenn es kein lazy load gibt, was bei Gambio nicht der Fall ist.

    Alternative Methode, die mir Dominik Späte von Werbe-Markt.de dankenswerter Weise nochmal in Erinnerung gerufen hat ist über die Untersuchenkonsole von Firefox (Chrome hat eine vergleichbare Funktion).

    Website besuchen > Rechte Maustaste > "Elemente Untersuchen" > Netzwerkanalyse > Cache deaktivieren anhaken und daneben bei "keine Drosselung" GPRS, 2G oder 3G (einfach etwas langsames) einstellen > neu laden > ggf. vorher die Skalierung reduzieren um die Seite besser im Blick zu haben

    Genau finden, was das CLS verursacht kann man aber im Prinzip nur mit Messreihen wie weiter vorne geschrieben. Messen > Element A deaktivieren > messen > Element A aktivieren, Element B deaktivieren > messen

    GT Metrix und die Netzwerkanalyse helfen nur erstmal die Elemente einzuschränken, die man untersuchen kann.
     
  7. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Wir haben seit heute einen Fall am Wickel, bei dem scheinbar kein CLS erkennbar ist, aber eindeutig durch Google einer gemessen wird. z.T. in erheblichen Maße (hier war es meist um 1.7). Dankenswerterweise hat GTMetrix vor wenigen Tagen seine Analyse neu ausgerollt und ist "now powered by Lighthouse"...nutzt also entsprechend Googles System.

    Das ist deswegen so dankbar, da GTMetrix (meines wissens nach als erstes Tool, soweit ich sehen konnte) nun auch ausgibt, welche Elemente CLS verursachen.

    Der eine Layout Shift wurde von einem sinnlosen <div>Container im Footer verursacht, der scheinbar einen Tooltippanzeigen sollte, bzw. früher mal getan hat.

    Beim zweiten Layout Shift handelt es sich offenbar um Bilder, die via CSS in divcontainern so angeordnet sind, dass sie ein schönes Masonary erzeugen. Kann es noch nicht verifizieren, vermute aber dass es etwas mit nachträglichen CSS Anpassungen zu tun hat die entweder direkt als Spagetticode im HTML Code stehen oder via "Eigenes CSS" über die ursprünglichen CSS geladen werden.

    Sollte das der Fall sein, wäre das höchst unschön. Im Prinzip hätte dann jeder Shop das Problem, da mir kein Shop einfällt der nicht mit dem Bereich "Eigenes CSS" arbeitet. Zumindest an einigen Stellen.

    Testshop vom Kunden ist 3.14. und noch template. Erstmal da korrigieren und dann teste ich mal noch mit anderen Shops.
     
  8. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Das steht im Produktivbetrieb von Shops in derselben CSS Datei wie das sonstige CSS des Shops, das wird alles zu einem komprimiert. Was CSS aber nicht macht ist Anweisungen ausfiltern, die später eventuell umdefiniert werden. Das wäre aber auch gar nicht der Sinn von CSS, das lebt mit von der Möglichkeit von speziellen Umdefinitionen von Subbereichen aus allgemeinen Bereichen heraus.
     
  9. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Stimmt. Das spricht auf jeden Fall gegen meinen ersten Verdacht. Kann bisher leider nur sagen, dass auf Seiten wo wir die Bilder mit Texten ohne DIV-Container angelegt haben das CLS nicht auftaucht.

    Wiederrum werden die H1 und H2 mit CLS durch GTM markiert (minimal unter 0,1 insgesamt).

    Allerdings ist ein Masonary ohne DIV-Container nicht gut zu bauen....mh. Werde auf jeden Fall schreiben, wenn ich mehr weis.
     
  10. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Der Lösung wieder ein Stück näher gekommen, aber ein Baustein liegt noch quer.

    CLS konnte auf 0 gesenkt werden, indem:
    • im CSS der DIV Container das Attribut "height:auto" eingebaut wurde und
    • für die Bildgröße bei height und width die tatsächliche Größe (z.B. height: 275px; width: 550px;) angegeben wird
    Dadurch wird beim Laden des Containers die Höhe direkt reserviert und es verschiebt sich nichts.

    edit: Bedeutet also, dass CLS in dem Moment auftritt wo entweder a) beim CSS geschlampt wurde und/oder b) wo keine totalen Werte fürs Bild angegeben wurden (bzw. legt Gambio die ja automatisch an, man sie also rausgelöscht hat um den img-responsive Tag zu verwenden)

    Problem macht jetzt die img-responsive class. Wird die beim Bild nicht vergeben, dann passiert das was alle kennen: In der mobilen darstellung wird das Bild (in dem Fall 550px) zu breit dargestellt und verursacht horizontales scrollen.

    Setzt man die img-responsive class wird zwar die Breite reduziert, aber das Bild wird verzerrt, weil die Höhe beibehalten wird (275px).

    Setzt man die totale Höhe des Bildes auf 100% oder auf auto statt auf 275px (hier im Beispiel), hat man wieder die schlechten CLS Werte.

    Aktuell drehe ich mich im Kreis und komme auf keinen guten Gedanken diese Problematik zu lösen.
     
  11. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Ich denk mal laut:

    Ich würde sagen dann lebt man mit den CLS Werten wie da. Es macht doch keinen Sinn das da für alles mögliche kaputtzumachen, dafür fehlt mir die reale Wichtigkeit.
     
  12. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Noch was: Wenn der Internet Explorer Support entfallen ist, das kommt ja absehbar, dann hätte ich denke ich Ideen. Das kann die alte Mistkrücke nur wieder nicht...
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Und wenn Du statt dem height:275px ein max-height:275px angibst?
     
  14. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Teste ich dann gleich mal, dürfte aber keinen Unterschied machen weil max-height ja nur die Größe nach oben begrenzt. CLS passiert aber weil nicht sofort genug Platz beim Laden reserviert wird.

    Mit den CLS Werten leben ist aus meiner Sicht keine Option. Es steht außer Frage, dass die Werte aus den Web Vitals am Mai 2021 Rankingfaktor werden. Wie die Lösung aussieht ist aus meiner Sicht einfach eben fraglich. Wird Gambio da nicht tätig (und zumindest bei der img-responsive class müsstet ihr das, wie ich das sehe) muss man andere Lösungen finden.

    Marktanteil IE im Oktober 2020 in Deutschland: 2,15 %....mir wird sich ewig nicht erschließen, wie man auf diesen Anteil Rücksicht nehmen kann....aber ich bin eben kein Entwickler, sondern Praktiker ;)
     
  15. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    930
    Danke erhalten:
    802
    Danke vergeben:
    300
    Ich habe auch nochmal geschaut ;)

    Warum rauslöschen, wenn man beides haben? Wenn Du width und height drin lässt, sollten es die Browser verwenden, um die aspect-ratio zu berechnen. Damit ist die Höhe des Bildes sofort bekannt, sobald die Breite (100% bzw. max. 100%) feststeht. In diesen beiden Abschnitten wunderbar beschrieben:

    https://web.dev/optimize-cls/#history
    https://web.dev/optimize-cls/#modern-best-practice
     
  16. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Und in der mobilen Version verursacht die Kombination aus festen Werten und der img-responsive class eine Verzerrung des Bildes, da die Breite, nicht aber die Höhe angepasst wird.

    Edit: Sorry, habe dich missverstanden. Das könnte klappen. Teste ich übermorgen, heute schaff ich das nicht mehr.
     
  17. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    #57 Orange Raven, 17. Dezember 2020
    Zuletzt bearbeitet: 17. Dezember 2020
    Habe gerde sowohl max-height von @barbara als auch die Lösung von @Dominik Späte getestet.

    Max Height macht zwar die Bilder passend, erzeugt aber erneut CLS. Wie vermutet, wird bei max-height einfach der Platz nicht vorreserviert, sondern nachgeladen.

    Die Lösung mit der Aspect Ratio hat funktioniert, musste aber noch passend gemacht werden. Habe das ganze auch mal noch übersichtlicher in einen Blogbeitrag gegossen: https://www.orange-raven.de/commulative-layout-shift-in-gambio-gruende-und-fehlerbehebung/

    In die CSS wird eingefügt
    img {
    aspect-ratio: attr(width) / attr(height);
    }

    Dann muss man aber noch beim Bild ändern, wie dieses berechnet wird. Original baut Gambio dort beim Eingeben der Festwerte ein style Element ein.

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

    Das muss man ändern:
    <img alt=“Gutscheine“ src=“templates/Honeygrid/img/startseite008.jpg“ class="img-responsive" height=“500″ width=“500″>
     
  18. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    930
    Danke erhalten:
    802
    Danke vergeben:
    300
    @Orange Raven Danke :)

    Die Angaben mit der aspect-ratio musst Du nicht extra in die CSS-Datei einfügen. Das ist schon das Standardverhalten der Browser.

    Sorry, ich ging davon aus, dass Gambio Höhe und Breite des Bildes als width- und height-Attribute einfügt, nicht im style-Attribut. Aber irgendwie vermisse ich in Deinem Beispiel jetzt den responsiven Part...? Also ich meinte so:

    Code:
    <img alt="Gutscheine" src="templates/Honeygrid/img/startseite008.jpg" height="500″ width="500″ class="img-responsive">
     
  19. Orange Raven

    Orange Raven Erfahrener Benutzer

    Registriert seit:
    3. April 2013
    Beiträge:
    359
    Danke erhalten:
    139
    Danke vergeben:
    50
    Völlig richtig. Das class="img-responsive" hatte gefehlt, da hab ich beim Schreiben nicht aufgepasst. Ist ergänzt.

    Im Test vorhin hat es erst funktioniert, nachdem wir die aspect ration ins CSS eingebaut haben. Cachefehler, Ladefehler o.ä. nicht auszuschließen. Teste ich später nochmal.
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    684
    Danke erhalten:
    125
    Danke vergeben:
    176
    Wenn ich mir das in gtmetrix oder auch page speed insights anschaue, werden auch die Bildergrößen und fehlende Größenangaben etc. angemeckert (wie immer). Eine Aufbereitung mit srcset könnte hier die Lösung sein.

    Aber die "CLS Elemente" die bei mir angemeckert werden sind andere:

    z.B.
    Code:
    Diese DOM-Elemente tragen am stärksten zur CLS der Seite bei.
    <div id="main">
    <div id="column-id-ofku4w9l8" class="gx-content-zone-col col-md-12 ">
    <h1 id="headlinek4856xv6v">
    <div id="column-id-d6nwh2cvy" class="gx-content-zone-col col-md-12 ">
    <ul data-level="2" class="level-2 dropdown-menu dropdown-menu-child">