Neu Plugin JTL Speed Optimizer verfügbar

[Josch41]

Bei uns mit vorgegebenen Grundeinstellungen kein laden von css schon im Firefox
Chrome lädt css, allerdings werden Produktbilder nicht richtig dargestellt.
JTL Hosting, 4.06. bei Evo Template mit und ohne Child template.

 

[eRock Marketing]

Danke - Fehler mit dem CSS gefunden.
Hatten leider einen kleinen Fehler im Polyfill durch eine Änderung am Schluss.

Ist behoben, einfach ZIP neu herunterladen und aufspielen. ggf. den Seitencache im Browser leeren.
Im Detail muss die Datei version/200/frontend/js/defer.min.js ersetzt werden.

Nochmals der Link: http://shop.knoell-marketing.de/zips/km_optimizer_v200_beta.zip

 

[Josch41]

v200 neu installiert im Testshop,
Firefox: CSS Anzeige nun da. Produktbild und alle Slider Bilder (Top Artikel etc.) werden übergroß dargestellt. Slidergröße (Startseite) wird anfänglich sehr groß Quatratisch dargestellt, rappelt sich auf Normalgröße wenn Seite
vollständig geladen wurde.

 

[eRock Marketing]

Für die Bilder muss dann bitte die 1x1 Pixelgrafik deaktiviert werden (der Slider holt sich "zu früh" das Quadratische Verhältnis des Pixels).
Ggf. werden wir dass dann in den Standardeinstellungen auf "Nicht aktiv" setzen, damit es nicht zu dieser Verwirrung kommt.

Sonst passt aber alles soweit? Wenn es live ist, kann ich mir es auch gerne mal anschauen.

 

[Josch41]

Slider nun erstmal ganz schmal Artikelbilder wohl Fehler von uns. Im Testshop andere Größen angegeben.

 

[swiss-sale.ch]

Sowie welches Gerät wurde verwendet

Ich habe mit einem Samsung Galaxy S10 mit dem vorinstallierten Samsung-Browser getestet.
Via WLAN sieht alles OK aus. Schalte ich WLAN aus und lade die Seite neu via 4G, so siehts aus wie auf dem Screenshot.

ich sehe richtig dass in den Screenshots V1 die vorherige Version des Optimizers ist und die V2 die aktuelle?

V1 ist die bissherige Version 1.09
V2 ist die Beta

Die neuste Version werde ich heute am Abend mal testen und gebe Bescheid.

 

[eRock Marketing]

Ja der Slider ist so leider nicht zu ändern.
Lösungsansatz hier: Sliderbilder mit einem Namen versehen der eindeutig ist und dann ausschließen.
Z.b. "Slider-1.jpg" und dann in den Einstellungen "Slider" ausschließen. Reicht theoretisch auch nur für das erste Bild (je nach Verfahren).

Ansonsten sieht es aber auch in PageSpeed gut aus.
Über die Seiten Startseite, Kategorieseite und Detailseite komme ich auf die folgenden "Probleme" die übrig sind:

• Nicht verwendetes CSS aufschieben
  Normal ist das eine "blockierende Ressource" -> das is es nicht mehr. DIe Fehlermeldung besagt lediglich dass das am Ende insgesamte CSS zu groß ist. Hier können wir nicht löschen sonst klappen z.B. Modal-Popups nicht mehr.
  Hier hilft nur: Insgesamtes Template-CSS verschlankern (oder endlich mal eine Lösung mit CSS nach Seitentypen - so haben wirs z.B: im Snackys gelöst, ein paar Basic CSS und dann eines für die Artikelseite, eines für Startseite, ...)
• Bilder in modernen Formaten bereitstellen
  Damit gemeint ist am besten auf webp wechseln - das geht nur mittels einer passenden Servererweiterung. Hier könnten wir uns vorstellen generell langfristig eine Lösung zu finden die auch in Hostings wie von JTL klappen - das ist aber Zukunftsmusik, Der Faktor hat auch noch keine echte Relevanz, wird nur von PageSpeed ausgegeben
• Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt
  In den CSS Angaben bei @font-face muss ein Wert wie "font-display: swap" dazu. Müsste ebenfalls im Template angepasst werden, wer das EVO hat kann das über den EVO Theme Editor machen
• Übermäßige DOM-Größe vermeiden
  Da muss ich glaube nicht viel zu sagen Zu viel HTML Code für das was ausgegeben wird - Nur im Template machbar
• Aufwand für Hauptthread minimieren
  Verschlechter sich nicht durchs Plugin, wird teils eher besser, da wir nicht mehrfach sondern zu einem Zeitpunkt "Neuberechnungen" machen (Gibt einen sehr interessanten Beitrag zum Thema wie sich HTML aufbaut usw. für die Tech-Freaks: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ -> Lesen und dann unten den "Take Course" Button um ein echt interessanten Beitrag zu sehen)
• Ausführungszeit von JavaScript reduzieren
  Hier wird bei unserem defer.min.js recht viel angezeigt, liegt aber daran dass wir aus der Datei die anderen Laden. Und diese sind teils recht langsam (Hier müsste mal die JS-Logik des Templates dran glauben, das wird aber denke nicht so schnell passieren, hier ebenfalls ggf. nach Templates Ausschau halten die an das Thema rangehen und nicht noch weiter vollstopfen )
• Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen
  Wird für externe schwer, für Inhalte vom eigenen Shop gut über die .htaccess steuerbar
• Tiefe kritischer Anforderungen minimieren
  Hier geht es darum wieviele Requests gemacht werden müssen, bei dem Shop hier geht es eigentlich. 2 CSS + 1 Schrift. Generell Schriften ebenfalls versuchen zusammenzupacken (aber auch wieder Templategeschichte)
• Serverantwortzeit reduzieren (TTFB)
  Da es ein Testshop ist wird sicherlich der JTL-Cache nicht genutzt, das ist dafür die beste Stellschraube. Die zweite Stellschraube: Stärkerer Server
• Bilder richtig dimensionieren
  Einmal im Shopbackend natürlich nur die Größen einstellen die auch gebraucht werden (Kann man z.B. in den meisten Browsern machen mittels: Rechtsklick auf das Bild und dann "Element untersuchen/Elementinformationen/..." da steht welche Größe das Bild hat und in welcher Größe es nur ausgeliefert wird.
  Hauptsächlich passiert es jedoch bei z.B: Slidern oder weiteren freien Inhalte in JTL Shops: Bilder werden einfach hochgeladen. Hier sollte man sich mit beschäftigen welche Größe gebraucht wird (Slidergrößen passt JTL nicht an) und am besten nochmal durch Komprimierungstools jagen.

P.S.: @Josch41 Da du hier die URL öffentlich eingetragen hast, wird Google das früher oder später finden. Daher am besten deinen Testshop sperren, sonst ärgerst du dich am Ende über die Ergebnisse in Google.

 

[Josch41]

@Knoell Marketing Testshop war nur für euch offen. ansonsten immer nur für minuten erreichbar.
Danke für die ausführliche Erklärung.

 

[eRock Marketing]

Ein paar wenige Seiten konnten wir testen, vielen Dank.
Durch 1 Projekt haben wir noch die Version "JavaScript Defer" integriert, die bei vielen Dateien und Abhängigkeiten ein Ticken performanter sein kann, sowie sollte es einen Fehler beim Laden von Dateien gibt es nun eine Meldung in der Entwicklerkonsole und es wird trotzdem weitergemacht (z.B. wenn eine externe Datei nicht aufrufbar ist in diesem Moment).

Wer die Beta schon hatte (hier wäre es nicht mal zwingend die "neue" Version jetzt zu probieren), müsste vorher bitte einmal deinstallieren.
Sollte ich nichts gravierendes hören werde ich sicherlich ca. Freitag die Version in die Hauptversion einspielen.

Danke für die Beteiligungen!

 

[Josch41]

Unter https://lassdampfab.de über Nacht im Einsatz.
Variante 1
Produktbilder werden bei Artikel mit einem Bild nicht geladen.
Blitzt kurz auf beim nachladen, erscheint aber nicht.
https://lassdampfab.de/Catapult-30-ml-Aroma-Vampire-Vape

Bei Artikeln mit mehreren Bildern erst bei Mouse over beim Swatches Bild sichtbar.
https://lassdampfab.de/Geekvape-Creed-RTA-Clearomizer-Set

Variante 2
Artikelbilder vorhanden.
Sehr sehr lange Ladezeiten bei Bildern in der Artikelübersicht.

 

[swiss-sale.ch]

Sollte ich nichts gravierendes hören werde ich sicherlich ca. Freitag die Version in die Hauptversion einspielen.

Ich habe die neue Beta getestet, die Seite wird nun auch auf dem Samsung Galaxy S10 korrekt geladen. Mir ist aufgefallen, dass das Suchfeld bei aktivem Beta-Plugin deaktiviert ist und kein Reinschreiben möglich ist.

 

[eRock Marketing]

Vielen Dank für die Rückmeldungen.
Beide Probleme kann ich leider nicht bei mir nachstellen.

@Josch41 Die Console wirft unseren Log aus: "Fehler externes-Skript asset/plugin_js_body?v=4.06" -> hier bitte einmal auf JavaScript Variante 2 stellen (Defer).
Zudem bitte einmal die Produktbilder ausschließen (sprich aus "shoplogo" bitte "shoplogo;product" machen.
Ggf. werden wir das generell auch als Standard setzen (oder sogar ausschließlich verwenden, werde heute/morgen hier nochmal bisschen rumtesten).

@swiss-sale.ch kann man sich das mit der Suche irgendwo anschauen? Und wie ist es bei JavaScript Variante 2?

Zur Erklärung woran es mit Variante 1 liegen kann:
Wir modifizieren die Dateien mit Absicht nicht mehr. Wenn jedoch unsauber gearbeitet wird, kann es sein dass manche Logiken nicht greifen.
Wir laden die Skripte ja erst nach dem Seitenladen. Sind nun Skripte zwingend vorher erforderlich triggern wir extra nochmal die Events "Seite wurde geladen". Für alle jQuery-Ready Sachen z.B: reicht das.
Ist das aber (nur ein Beispiel) nicht als Funktion sondern "einfach drauf los" eingebaut kann es zu solchen Problemen zu kommen.

Kurzum: Ich denke Variante 2 wird die fehlerfreie Variante sein, Variante 1 die jedoch optimiertere Variante (zeigt sich eigentlich nur im Wert TTI) und ggf. setzen wir daher Variante 2 als Standard und 1 können dann die Erfahrenen eigenständig aktivieren und testen (dabei einfach immer in die Entwicklerkonsole schauen!)

Danke.

 

[Josch41]

@KnoellMarketing Variante 1 mit shoplogo;product keine Verbesserung bei den Produktbildern.
Variante 2 mit shoplogo;product funktioniert Augenscheinlich.
Weiterhin produktiv geschaltet.

 

[eRock Marketing]

Danke für die schnelle Rückmeldung.
Habe mal durchgeschaut und soweit sehe ich auch keine weiteren Probleme: Nur bei JTL Search werden die Bilder nicht angezeigt (also z.B: Kategoriebilder, Produktbilder sind ja ausgeschlossen).
Wir greifen Ajax-Abfragen ab (und optimieren dann nicht), hier müssten wir wohl noch die Suche mit aufnehmen - sehe hier leider keinen klaren Parameter, aber das werden wir schon deichseln, sollte einfach sein - fehlt aber einfach bisher.


Edit: Abfrage nach JTL Search ist nun mit eingebaut.

 

[djharms]

Ich bin erst seit kurzem in der Firma für JTL zuständig
und habe nun auch mal bei uns das Plugin getestet:

Desktop ohne / mit V2-Optimierung 28/55

Mobil im WLAN Redmi Note 6 Pro ohne/mit 31/54

Ahoi!
Dietmar

 

[swiss-sale.ch]

kann man sich das mit der Suche irgendwo anschauen? Und wie ist es bei JavaScript Variante 2?
Danke.

Jetzt habe ich die Beta wieder aktiv. Was meinst du mit Variante 2?

Ich habe jetzt JavaScript Optimizer auf "Nicht aktiv" und das Suchfeld ist verwendbar aber damit ist die Darstellung der Kategorien nicht OK.

 

[eRock Marketing]

@swiss-sale.ch Ah okay - dann fehlt das Update des Plugins. BItte einmal entfernen, neu herunterladen und wieder einspielen (nur durch Deinstallation werden geänderte Einstellungen aktiv).

@djharms Danke Dennoch fällt auf, dass Desktop generell sehr niedrig ist. Hier liegt sicherlich noch deutlich mehr Potential, das ggf. auf weiteren Wegen erreicht werdne kann (Caching, Serverkonfiguration, Skripte zusammen, .. jenachdem was noch nicht passiert ist)

 

[swiss-sale.ch]

Ah okay - dann fehlt das Update des Plugins. BItte einmal entfernen, neu herunterladen und wieder einspielen (nur durch Deinstallation werden geänderte Einstellungen aktiv).

Ich habe nun die Beta neu installiert.

Bei Variante 2 habe ich das Problem mit der Darstellung auf dem Smartphone via 4G.

Bei Variante 1 besteht dieses Darstellungsproblem ebenfalls und zusätzlich wird das Suchfeld deaktiviert.

Bei deaktiviertem JS Optimizer, bleiben die Darstellungsprobleme bestehen.

Wenn ich den CSS Optimizer deaktiviere, so ist die Darstellung auf dem Smartphone OK

Muss da noch ein Cache gelöscht werden?

 

[eRock Marketing]

Vielen Dank für den ausführlichen Test.
Gerade ist es ohne CSS aktiv, richtig? Wenn CSS aktiv ist, wird dann die Datei defer.min.js eingespielt? Stelle es aber gern auch nochmal bei uns nach, kein Problem.
Zum Cache: Ggf. ist die Datei defer.min.js im Cache? Die hatte vorher Probleme beim ausführen von CSS auf manchen Geräten, das ist aber zwischenzeitlich behoben.

Edit: Werde es aber selbst nachher nochmal in allen möglichen Konstellationen testen, auch mit unterschiedlichen Geräten (nach dem neusten Pluginstand) - das kann und darf gerne unsere Arbeit bleiben - mir geht es mehr darum unterschiedliche Anwendungsfälle durchtesten zu können, die ich pauschal nicht alle im Kopf hätte. Danke.

 

[swiss-sale.ch]

Vielen Dank für den ausführlichen Test.
Gerade ist es ohne CSS aktiv, richtig? Wenn CSS aktiv ist, wird dann die Datei defer.min.js eingespielt? Stelle es aber gern auch nochmal bei uns nach, kein Problem.
Zum Cache: Ggf. ist die Datei defer.min.js im Cache? Die hatte vorher Probleme beim ausführen von CSS auf manchen Geräten, das ist aber zwischenzeitlich behoben.

Darf ich euch mal einen Zugang senden, dann könnt ihr dies in unserem Live- Shop direkt anschauen.