Neu Plugin: JTL Header Version: 1.0.0-beta.4 verursacht flackerndes Logo

[mastertango]

Hallo,

das Plugin JTL-HEADER in Version: 1.0.0-beta.4 ( auch Vorgänger ) verursacht ein flackerndes Logo in der Mobilen Ansicht.
Wenn man eine Seite Lädt oder Neu lädt dann taucht für den Bruchteil einer Sekunde das Logo in Groß auf bevor der Header komplett geladen ist.

Dieses ist nur über Handy sichtbar aber tatsächlich störend bzw. irritierend....

Die Frage ist ...liegt es wirklich am Plugin ( ohne ist des wech ) oder vielleicht doch an irgendwelchen eigenen CSS einstellungen?

So oder so muss das irgendwie beseitigt werden.... Geht das ???

Irgendwie müsste das Menü bzw. der Header als allererstes geladen werden bevor der Rest kommt. Tatsächlich scheint es aber umgekehrt.

Gruß Daniel

Link zum Testshop: https://test.fischer-modell.de/41-1074-8-Ep-IV-DR

 

[MHillmann]

Hallo,

das Header-Plugin ändert nichts an der mobilen Darstellung.
Das Verhalten liegt sehr wahrscheinlich daran, dass das CSS ,um das größere Logo zu verstekcen (welches aufflackert), erst im CSS steht das nachgeladen wird (my-nova.scss). Das kann man umgehen, indem man die entsprechende CSS-Anweisung ins kritische CSS (my-nova_crit.scss) schreibt, da dieses viel früher geladen wird.
Also folgendes (oder so ähnlich):

only screen and (max-width: 575.98px) and (max-width: 380px) {
    header .navbar-brand img {
        display: none;
    }
}

einfach von der my-nova.scss in die my-nova_crit.scss schieben.

Viele Grüße
Michael

 

[mastertango]

Ja grob ist man der Sache auf der Spur..... aber noch nicht ganz.
Das Logo selbst wird ja auch erst bei unter 380px ausgeblendet ....
Ich konnte gerade tatsächlich einen Screenshot davon machen was dort passiert.....




Er scheint es alles irgendwie von unten nach oben zu positionieren....
Wenn man genau hinschaut kann man auch am Burgermenü sehen wie es sich sozusagen von unten nach oben aufbaut bevor alles fertig steht.

 

[mastertango]

Wer viel testet findet viele Fehler .....


Wenn man unter Firefox mehrmals die gleiche Seite lädt, indem man immer wieder auf die gleiche Kategorie klickt, sieht eigentlich alles ganz gut aus.

Macht man das gleiche jedoch in Chrome, Opera oder Edge, so scheint es für einen Bruchteil so als wenn das Ursprungsdesign geladen wird.

Das sieht nicht nur scheiße aus, sondern wirkt auch verwirrend für die Kunden wenn Sie erst etwas anderes sehen....

Das möchte ich ganz gerne abgeschaltet haben. Ein ähnliches verhalten konnte ich bei anderen im Design veränderten JTL5 er Shops auch nachstellen.
So kann das ja nicht richtig sein oder?


Ich habe jetzt mal Testweise alle meine Templateänderungen aus der mynova in die mynova_crit gepackt..... Jetzt sieht der Shop so aus wie in der Zehntelsekunde die zuerst geladen wird bevor das eigentliche Design erscheint ....
Kann mir das jemand technisch etwa erklären damit ich das mit meinem Halbwissen abstellen kann



MFG

Daniel

 

[mastertango]

Kann das am Theme Editor Plugin liegen????

 

[MHillmann]

Kann mir das jemand technisch etwa erklären damit ich das mit meinem Halbwissen abstellen kann

Das habe ich oben schon angerissen. Das Problem ist, wenn du alles ins kritische CSS schreibst, verlangsamt sich der Seitenaufbau und die Tools zur Seitenbewertung meckern. Daher gilt es hier einen guten Mittelweg zu finden, von CSS das direkt geladen werden soll, und dem das nachgeladen werden soll.
Ich habe jetzt den erstbesten Link zum Thema genommen: https://www.ezoic.com/de-lang/so-optimieren-sie-critical-css-um-ihre-webseite-schneller-zu-machen/
Recherchier gerne selber noch ein bisschen.

Wenn du dich fragst, ob Dinge am Theme-Editor Plugin liegen bzw. an deinem Child-Template. Dann aktivier am besten immer zuerst das originale Nova-Template und schau es dir dort an, eventuell findest du dann schon die Unterschiede.

 

[mastertango]

Das kuriose ist wenn ich alles ins kritische CSS schreibe funktioniert die Seite nicht ... sie Foto oben....
Es scheint also Anweisungen zu geben die dort nicht funktionieren und oder mit denen aus Clear überschrieben werden....

Ich rede jetzt gar nicht mehr vom Logo ..... sondern wie ich nun feststellen konnte ist es ja die ganze Seite ...
Sprich wenn ich in Chrome oder auch Edge oder auch Opera die Seite 5-6 mal neu lade kann ich genau sehen wie sich das Clear Theme aufbaut und danach erst die Anweisungen aus meinem Nova-Child drüber gebügelt werden.
So kann das auf jeden Fall nicht bleiben ... ich brauche dafür eine Lösung das hier nicht 2 verschiedene Themes nacheinander geladen werden ...

Oder habe ich hier irgendwo einen essentiellen Fehler?

 

[mastertango]

Sooooo.... nach langen hin und her und suchen habe ich den Fehler gefunden und er ist so logisch und einfach wie auch bescheuert dämlich.... Daher ist mir das auch gleich nochmal einen extra Beitrag Wert damit andere nicht den selben Fehler machen.

Das ganze verhalten rührt einfach daher das ich ja das Standrad Child Template von JTL genommen habe und dann mit dem Theme Editor meine Änderungen fleißig hintereinander wech dort rein geschrieben habe,
Beim kompilieren passiert ja nun nichts anderes als das meine Änderungen in der vorhandenen mynova.css hinten ran geschrieben werden.

Daraus resultiert dann folgendes....nämlich das in Zeile 1000 der mynova.css steht ....mache den Balken gelb und 15000 Zeilen später steht dort... mache den Balken rot..... und genau das macht der Browser weil er die mynova.css stumpf nacheinander abarbeitet.

Daher auch das flackern am Bildschirm bis die komplette CSS abgearbeitet ist...... oder wie man auch anders sagen kann....Pfusch am Bau....
Hat also recht wenig mit krtisch oder nicht kritisch zu tun....

 

[jensderdritte]

Hmm, ja, mir ist beim Testen das gleiche Verhalten aufgefallen.
Insgesamt ein sehr "unruhiges" Verhalten, was sich mit der Anzahl der Änderungen auch noch immer mehr verstärkt.

Wie kann man das vermeiden?
Alle eigenen Änderungen nicht als "Child" anhängen, sondern direkt im Haupttemplate ändern...
Dann würde man halt die Updatesicherheit verlieren.

Mir fällt nichts anderes dazu ein, oder hat jemand eine bessere Idee?

Ideal wäre natürlich, wenn der "Kompiler" die entsprechenden CSS-Anweisungen austauschen und nicht nur einfach hinten dran hängen würde
Dann müsste man nach einem Update nur kurz mit dem Kompiler drüber und fertig.
K.A., ob so was technisch überhaupt geht.