CSS macht vermutlich meinen CLS-Wert kaputt

Thema wurde von Anonymous, 5. Mai 2023 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    619
    Danke erhalten:
    68
    Danke vergeben:
    265
    Hallo,

    ich habe zwei Shops, einen Testshop und einen Live-Shop.

    Beide Shops sind 1:1 aufgebaut, absolut identisch.

    Ich habe unter dem Header eine Sektion, da drin ist eine Spalte mit einem HTML Widget.

    In diesem HTML Container habe ich über den Content Manager/Elemente ein Bild eingefügt.

    <img class="img-responsive startbild" height="483" src="images/bild.jpg" width="1725" />.

    Wie gesagt - in beiden Shops steht dasselbe, sie sind absolut identisch.

    Ich teste beide Shops über Chrome/Lighthouse.

    Der CLS-Wert bei dem einen Shop ist 0,000 - beim zweiten Shop ist er ca. 0,06.

    Das hört sich jetzt erstmal nicht so tragisch an, aber:

    Der Shop mit dem CLS Ergebnis 0,000 hat 7 Bilder, der Shop mit dem CLS-Wert von ca. 0,06 hat zunächst erstmal nur 1 Bild. Wenn ich beim Shop mit dem schlechten Ergebnis noch die restlichen 6 Bilder einpflegen würde, läge ich bei einem CLS-Wert von 0,6 - und das wäre sehr schlecht.

    Ich habe das betreffende Bild von beiden Shops im Browser untersucht und habe im CSS einen Unterschied festgestellt, der veilleicht die Ursache sein könnte.

    Im Shop mit dem schlechten CLS-Wert habe ich einen zusätzlichen Style:

    Dieses CSS ist im Shop mit dem sehr guten CSS-Ergebnis nicht vorhanden, nur im Shop mit dem schlechten CLS.

    Nun zu meiner Frage:

    Wo kommt dieser Style her, habe ich eine Einstellung im Eifer des Gefechtes übersehen?
    Kann mir da jemand weiterhelfen?

    Ich möchte noch anmerken, dass ich auch einen lokalen Shop habe, ebenfalls 1:1, dort kommt dieses Style ebenfalls nicht vor, kann ihn aber nicht über Lighthouse testen.

    Letztlich kommt dieser Code von drei Shops nur einmal vor.

    Anbei noch zwei Bilder

    Viele Grüße

    Bernd
     

    Anhänge:

  2. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    Der Code kommt aus der Ladezeitoptimierung (GXModules/Werbe-Markt/Ladezeitoptimierung/Shop/themes/All/Css/main.scss) und verhindert, dass Bilder mit Größenangaben (width- & height-Attribut) wegen des Gambio-Standard-CSS verzerrt dargestellt werden.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    619
    Danke erhalten:
    68
    Danke vergeben:
    265
    #3 Anonymous, 6. Mai 2023
    Zuletzt bearbeitet: 8. Mai 2023
    Das hatte ich auch vermutet, aber dann auch ausgeschlossen. Nach dem Deinstallieren des Ladezeitoptimierung Moduls war der Code auch nach dem Löschen aller Caches weiterhin vorhanden.

    Letztlich ist das erst einmal schlecht für mich.

    Allerdings habe ich mit folgenden Code das Problem zunächst mal beseitigt.

    #startbild_id .img-responsive[width][height] {
    width: 100%;
    }

    Aber, gibt es jetzt Probleme mit der Ladezeitoptimierung? Ich spreche nur das Bild mit der id #startbild_id an. Da es insgesamt 7 Bilder auf der Startseite sind, mache ich dann logischerweise eine Klasse draus: ".startbild_class", und nur diese 7 Bilder bekommen den Style.

    Also, meine Änderung betrifft nur die Startseite. Welche Probleme fang ich mir ggfs. damit ein?

    Und: Sehe ich das richtig, wenn ich das Ladezeitoptimierungs-Modul nutze, geht der CLS Wert hoch, wenn ich das Ladezeit-Modul nicht nutze, habe ich bei meinem Shopeinen einen schlechten TFB Wert? - hm.
     
  4. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    #4 Dominik Späte, 7. Mai 2023
    Zuletzt bearbeitet: 7. Mai 2023
    Das ist in Gambio leider etwas unintuitiv gelöst: Gambio lädt die main.scss rein, solange sie vorhanden ist, auch wenn das Modul deinstalliert ist.

    Beim aktuellen Startseitenbild kann ich keinen Unterschied zwischen auto, 100% und gar keiner expliziten width-Angabe erkennen. Unerwünschte Wechselwirkungen durch das explizite Styling der Startseiten-Elemente halte ich für unwahrscheinlich.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    619
    Danke erhalten:
    68
    Danke vergeben:
    265
    Maskiere ich //width: 100%

    ergibt sich ein Unterschied vom CLS vorher 0 zu nachher/maskiert 0,7xx.
     
  6. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.715
    Danke erhalten:
    1.308
    Danke vergeben:
    305
    Wenn du eine GXModule.json Datei in deinen Modulen benutzen würdest, hättest du das Problem nicht.
    Denn wenn ein Modul diese Datei hat, dann kann man selber bestimmen ob die Dateien auch bei deinstalliertem Modul geladen werden sollen oder nicht. (Link nur für registrierte Nutzer sichtbar.)

    Auszug aus der Entwicklerdokumentation:

    {
    "title": "sample_module.module_title",
    "description": "sample_module.module_description",
    "forceIncludingFiles": false,
    "configuration": […]
    }


    • forceIncludingFiles: Kann entweder auf true oder false gesetzt werden. Im true-Fall werden die Dateien des Modules im Shop und Gambio Admin auch dann beachten und eingebunden, wenn das Modul noch nicht über das Module-Center installiert wurde.
     
  7. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    Njein. Wenn ich die Datei mit "forceIncludingFiles": false benutzen würde, würde der CSS-Code überhaupt nicht geladen werden. Auch nicht, wenn das Modul installiert ist.

    Meiner Erfahrung nach liegt das am Bindestrich im Herstellerverzeichnis. Damit werden die GXModule.json wohl nur so semi geparsed. Deshalb kann ich sie leider nicht nutzen und hatte die forceIncludingFiles-Option gerade nicht auf dem Schirm. Sorry für das "etwas unintuitiv". Ich nehme es zurück :)

    Falls Du es Dir mal anschauen möchtest: Anbei je 2 Module in den beiden Herstellerverzeichnissen GXModuleJson und GXModule-Json. Die beiden GXModuleJson-Module fügen den CSS-Code ein, wenn installiert (#GXModuleJson1{display:none}#GXModuleJson11{display:none}), die beiden GXModule-Json-Module nicht.
     

    Anhänge:

  8. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.715
    Danke erhalten:
    1.308
    Danke vergeben:
    305
    @Dominik Späte Ich hab das mit dem "GXModuleJson1" getestet und es funktioniert, man muss den Seitencache nachdem man das Modul installiert bzw. deinstalliert hat erneuern.
    Es funktioniert über die Datei dynamic_theme_style.css.php?renew_cache=1?theme=MyTheme. Da werden die Änderungen sofort nach dem Cache leeren sichtbar.
     
  9. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    @Till (Gambio) Ja, mit GXModuleJson1 und GXModuleJson11 in GXModuleJson funktioniert es. Die GXModule-Json.zip enthält die beiden Module (GXModuleJson2 und GXModuleJson22), bei denen es nicht funktioniert.
     
  10. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.715
    Danke erhalten:
    1.308
    Danke vergeben:
    305
    @Dominik Späte Das Problem ist der Bindestrich im Ordnernamen GXModule-json. Wenn ich den Ordner in GXModulejson2 umbenennen funktionieren auch die anderen Dateien. Modulnamen oder Firmenname im GXModules Ordner sollten keine Bindestriche enthalten.
     
  11. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    Ja, sagte ich ja. Das ist der Grund, weshalb ich keine GXModule.json Dateien nutzen kann und die forceIncludingFiles-Option keine Lösung für das von Bernd angesprochene Problem ist.