Neu In Chrome, Header lädt jedes mal sichtbar NEU, Nova Child mit JTL-Header Plugin

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.440
33
Wustrow
Hallo,

wir haben ein kleines optisches Problem welches ich auch auf anderen Seiten nachstellen konnte wie z.B.
https://laguz-waterproof.com/Zement-und-Putz
https://bastel-dehs.de/RC-Beleuchtung-LED-Fertigbeleuchtung-RC-Tunnig-Car-Systeme
https://www.scherr-fachhandel.de/Arbeitsschutz
https://www.kuhandel24.de/Corona-Produkte

In erster Linie betrifft dieses Phänomen nur den Chrome - Browser und im Zusammenspiel mit dem JTL-Header Plugin. In Firefox scheint es dieses Problem nicht zu geben.
Jedes mal wenn eine Kategorie gewechselt oder ein Produkt angeklickt wird lädt der Header sichtbar komplett Neu was einen unangenehmen Effekt nach sich zieht.
Auch Elemente wie das Menü, Logo, Suchleiste etc werden dann langsam nachgeholt was für den Benutzer einfach nur "schlecht" aussieht.

Ich habe vieles probiert um dieses Phänomen zu verringern, bin aber ebend kein Profi.

Wenn ich aus der jtl-header.scss aus dem JTL Header Plugin folgendes in die mynova.scss einbinde, verschwindet dieser Effekt.
Code:
@import "../../../../templates/NOVA/themes/base/bootstrap/scss/mixins/breakpoints";

Logischerweise ( weil falscher Pfad ) verursacht dieses aber einen Fehler und die Seite lädt auch etwas länger. Daher ist der Effekt wohl einfach nur nicht mehr sichtbar.
Wenn man den richtigen Pfad angibt ist dieser Effekt wieder vorhanden.

Wie kann man Chrome nun dazu bringen wie z.B. auch Firefox diesen Effekt nicht mehr so anzuzeigen sondern den Header immer stabil anzuzeigen?

https://test.fischer-modell.de/Modelle
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
860
252
Hallo,

das liegt sehr wahrscheinlich am kritischen CSS und ist in Child-Templates noch auffäliger, wenn die entsprechenden Änderungen nicht in das kritische CSS geschrieben werden (einfach mal "critical CSS googeln). Es gilt an der Stelle eine gut Balance zwischen dem kritischen CSS und dem nachgeladenen zu finden (lädt man zu viel CSS direkt wirkt sich das negativ auf die Pagespeed-Werte aus).
Ich habe diesen Thread aber noch als Kommentar an folgendes Ticket gehangen, damit da dann bei der Umsetzung nochmal geguckt wird was sich machen lässt: https://issues.jtl-software.de/issues/SHOP-5740

Viele Grüße
Michael
 
  • Gefällt mir
Reaktionen: mastertango

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.440
33
Wustrow
ja tatsächlich ist es ein ziemlich großer Aufwand hier die entsprechenden Stellen raus zu suchen ( zu finden ) die dafür verantwortlich sind. Gerade bei Größenangaben oder Hintergrundfarben etc. ist da sehr auffällig. Nach einigen ausprobieren habe ich den Header nun halbwegs stabil zum laufen bekommen.