Neu Plugin JTL Speed Optimizer verfügbar

[DaHmM]

Bei mir kommt "SQLSTATE[HY000] [1040] Too many connections " von deinem Shop, liegt wohl am Interesse aus dem Forum ?

Eher nicht, seit Freitag gibt es Probleme mit unserem JTL Hosting.
Die SQL Fehlermeldung habe ich noch nicht gesehn.

ö

 

[saw]

Zu den Bildsachen: Darf ich einmal die vollständige Konfiguration sehen? Sind dort Produktbiler ausgeschlossen? (also im Prinizip mindestens: shoplogo;product -> So ist die aktuelle Standardeinstellung, bei Update statt Neuinstallation bleibt der alte Wert von vorher bestehen)

Klar, im Anhang

 

[eRock Marketing]

Okay, dort bitte zum Shoplogo packen: shoplogo;product -> dann ist das Bilderproblem der Artikelbilder weg.

Leider ist es hier wie im Evo: Zum Seitenladen ist der Bereich einfach leer und wird per JavaScript als Bildergalerie gefüllt - gibt andere Meinungen, aber wir finden: Unnötiges Hin und Her und Performance Einbußen.
Sowas wird eigentlich geregelt: Rahmen mit den Bilder ist da - ggf. sind die Bilder als LazyLoading implementiert, und dann wird die Galleriefunktion drübergelegt... aber das ist ein ganz anders Thema, stößt nur immer wieder auf

Daher bitte wie oben beschrieben: Produktbilder ausschließen. Das macht ja JTL/die erweiterten Templates bereits automatisch Nachladend.

Edit: Aber der Lazy-Loader ist gar nicht aktiv, sorry in der Eile übersehen.
Nehme es auf und werde es testen ob der ggf. zwar nicht im HTML umwandelt, aber von unserem Skript dann dennoch ausgeführt wird.

 

[peterwill]

Ich mal wieder bei mir geht das Plugin V2 mit diesen einstellungen (Hypnos Template ) und Chrome! Alles OK !!!!!

Prefetch aktivieren (Technik) nicht aktiv
CSS Optimizer aktiv
Preloader anzeigen (Style) nicht aktiv
JavaScript Optimizer aktiv variante 1 """"" mit variante 2 Artikelbilder Probleme"""""""
Bilder Lazy Loader aktivieren? (Kann performancelastig sein) aktiv
Bilder Lazy Loader 1x1 Pixel? nicht aktiv
Bilder ausschließen (Semikolon getrennt) shoplogo

Nur bei Firefox besteht das Problem von links rein flaschen beim aufruf der shopseiten

 

[eRock Marketing]

@peterwill Vielen Dank. Das "Problem" beim Firefox habe ich hier versucht zu analysieren: https://forum.jtl-software.de/threa...timizer-verfuegbar.116947/page-12#post-648080 werde es mir noch genau anschauen und eine Lösung finden.

 

[peterwill]

Klar, im Anhang

@saw probier doch mal die einstellung von mir #244
und zu deiner Frage Hosting habe kein Jtl Hosting und auch keine gmail probleme bin der empfelung von unserem gemeinsammen Partner css gefolgt.

 

[saw]

Okay, dort bitte zum Shoplogo packen: shoplogo;product -> dann ist das Bilderproblem der Artikelbilder weg.

Danke, habe ich gemacht und ich sehe keine Bilder-Fehler mehr.

 

[saw]

@saw probier doch mal die einstellung von mir #244
und zu deiner Frage Hosting habe kein Jtl Hosting und auch keine gmail probleme bin der empfelung von unserem gemeinsammen Partner css gefolgt.

Danke, die hatte ich alle durch getestet (auch mehrfach den redis geleert).
-> JavaScript Optimizer aktiv variante 1 """"" mit variante 2 Artikelbilder Probleme"""""""

Knoell hatte weiter oben bei Hypnos Variante 2 empfohlen.

 

[eRock Marketing]

Wir zeigen Fehler in der Entwicklerkonsole.
Hypnos wirft mit Variante 1 bei uns Probleme. Aber im Hypnos gibt es auch recht viele Einstellungen.
Zu sehen sind die Fehler in der Entwickerkonsole des Browser, er meldet dann welche Datei er nicht laden konnte. (bei Variante 1)

 

[saw]

Was wir auch jetzt ab und an haben: passende Produkte, Kunden kauften dazu und andere Cross Selling Gruppen werden beim Aufruf des Artikels nicht gezeigt.
Nach einem "F5" ist es dann noch schlimmer. Unsere Bilder "scrollen" auch nicht mehr mit dem Text mit nach unten.

Jetzt wird es für mich kritisch da wir sehr sehr auf "Passende Artikel" aufbauen

danke & Grüße
Mathias

 

[saw]

Ich habe Javascript wieder auf Methode 1 gestellt und die Cross Selling, etc. sind wider da.
Auch die Bilder verhalten sich i. M. richtig.

 

[eRock Marketing]

Wichtig ist dabei einfach die Entwicklerkonsole zu nutzen - hier einfach die Startseite, Artikelliste, Detailseit + Checkout, dort würde stehen wenn es Probleme gäbe.

 

[Josch41]

Gerade erst festgestellt. JTL Search funktioniert nicht.

 

[saw]

- Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt: Hier muss man in den CSS-Dateien das "@font-face{...}" suchen und erweitern um "font-display: swap;"
Es fällt auf, dass die Schriften recht stark reinhauen - die wurden vorher ebenfalls von PageSpeed nicht als schwerwiegend erkannt, da diese ja über das CSS geladen werden.
Nachgeladen wurden diese ja dennoch: Sodass der Besucher warten musste - und zwar länger als er es jetzt tut.
Simple Lösung: Die Woff Dateien vorladen lassen (mittels z.B. <link rel="preload" src="/templates/Hypnos/bootstrap/fonts/glyphicons-halflings-regular.woff" as="font"> ).
Entweder per Template-Einbau oder mittels z.B: unserem Plugin Individual Code.

Dank @martinwolf ist das nun eingebunden. Einen schnelleren Wert kann ich (und MW) nicht erkennen, aber das kann auch an meinem Laien Verständnis der programmierung liegen. Allerdings werden die Fonts auch von pagespeed nicht mehr angemosert.
Die Quelltext Ansichten zeigen zu den woff Dateien starke Unterschiede. Z. B.:
https://www.softairwelt.de/Rail-Mount-fuer-Pistolen (edit: Quelltext Link geht nicht richtig, daher ein Detail Beispiel link)

Knoell Team, könnt Ihr da mal reinschauen und beurteilen ob das richtig und besser ist? Wird auch jeden Hypnos Nutzer interessieren.

danke & Grüße

 

[eRock Marketing]

Wir testen gerade in den letzten Zügen V2.01, da wir gerne auf die Reaktionen hier eingehen möchten.
Eigentlich wollte ich die Version auch schon heute abend einspielen - zu Problemen bin ich bislang auch nicht gekommen.
Dennoch möchte ich lieber noch 1-2 weitere Konstellationen testen, bevor wir es ausgeben.
Die Anpassungen sind aktuell:

Punkt 1: JavaScript wird nun in keiner Variante mehr verändert oder von unseren Skripten nachgeladen - nach wie vor ist die Fehlerquote hier zu hoch - wir verschieben die Skript so passend ohne die Reihenfolge oder Abläufe zu verändern und hindern trotzdem den Seitenaufbau nicht. Der Modus Defer ist dafür eigentlich die perfekte Variante, aber leider gibt es Skripte die mehr oder weniger "durch Glück" funktionieren. Das liegt daran, dass es folgende Konstellation geben kann (ein Beispiel mal simpel veranschaulicht):

• 1. JS-Datei wird asynchron geladen und verwendet Funktionen aus Datei 2
• 2. JS-Datei wird sofort geladen und ausgeführt
• Erst jetzt wird Datei 1 ausgeführt (Da die Ladezeit länger ist)

Das ist nicht der Grundgedanke vom asynchronen laden (und kann auch ohne Optimizer zu Fehlern führen je nach Internetverbindung).
Der Grundgedanke ist "es ist mir egal wann die Funktion ausgeführt wird, Sie ist von sich selbst abhängig, oder maximal von der Hauptbibliothek die an erster Stelle im Dokument steht - und genau deshalb braucht es nicht die Hohe Priorität, ich lade es asynchron damit die HTML Seite weiter arbeiten kann".

Punkt 2: Wir haben wie gewünscht ein kritisches CSS implementiert - nicht nach einzelnen Seiten sondern im generellen - somit bleibt die Konfiguration einfach, der Ballast niedrig, aber auch das ungewollte Springen wird verhindert. Generiert werden kann das kritische CSS per Klick - man muss 2 Parameter setzen, wobei in 90% der Fälle nur einer variabel ist. Gerne nehmen wir die gewünschten Template im Standard auf (aktuell EVO + Hypnos, EasyTemplate 360 schaue ich mir derzeit noch an und hier würden wir ebenfalls eine Vorkonfiguration liefern - wenn weitere gewünscht sind (und wir Zugang zu dem Template erhalten) - können wir die ebenfalls gerne mit einpflegen. Alternativ in der Doku mit aufnehmen).

Punkt 3: Man kann eigene Zusatzparameter global jeder Seite für den Head mitgeben (z.B. gezielt 1-2 CSS Dateien per link preload vorzuladen). Wer z.B. Dropper einsetzt hat ebenfalls ein paar mehr CSS Dateien dabei, die aber nicht kritisch sind. Über den Weg kann man seine CSS-Dateien aus "asset" vorladen und die restlichen nicht. Das automatische Bestimmen durch den Optimizer (der dann jede gefundene CSS Datei vorlädt) bleibt weiterhin verfügbar, ist aber im Standard auf "Nicht aktiv".

Punkt 4: Vollständige Kompabilität zu Mod-Pagespeed ohne das weitere Einstellungen in Mod-Pagespeed getroffen werden müssen.

Alles in allem habe ich mit der Lösung keine Probleme bisher finden können.

Das font-display: swap wirkt sich nicht besonders auf den PageSpeed Wert aus, allerdings auf Interaktionsrate und/oder Eingabelatenz und letztendlich auch auf den Wohlfühlfaktor (verhindert die kurzen leeren Texte, obwohl vorher schonmal Text vorhanden war) - hat allerdings auch viel mit weiteren Faktoren wie JavaScript zu tun.
Die Kernaussage die ich damit treffen wollte war: Vorher hat durch das Nachlagern Pagespeed die Schriften insgesamt (nicht nur mit dem Extra-Parameter) gar nicht erkannt. Daher hat es diese auch nicht bemängelt.
Werden die Schriften sauber nachgeladen und haben den Zusatz wie beschrieben gibt es an denen nichts mehr auszusetzen. Aber: Sie müssen geladen werden - und das ist ein Ballast.
In unseren (Release in ca. 2 Wochen) neuen Version des Templates Snackys haben wir uns daher z.B. auf ein Schriftdicke beschränkt und lassen andere Schriftdicken vom Browser rendern.

Sieht man häufig bereits am Dateinamen "Schrift x Regular", "Schrift X Light", ...
Schriften die als "Light" nicht einfach nur z.b. 30% dünner sind sondern an gewissen Ecken und Enden dann auch anders aussehen müssen mit jeder Dicke nachgeladen werden, das kann der Browser nicht errechnen (er würde es eben nur 30% dünner machen).
Diese Grunsatzfrage kann man aber mal in Frage stellen, denn: Eine Schrift ist mal schnell recht groß, sofern diese nicht optimiert ist. Eine Schrift hat je nach Typ mal schnell bis zu 300KB.
Lädt man also nun 3 Schriftdicken ist man im schlimmsten Fall bei 1MB - das wäre das Ziel wie groß eine Seite mit CSS+JS+HTML ist. Das steht einfach in keinem Verhältnis.
Und wer setzt seine Firmenschrift im Template ein? Oder ist es nicht meistens die vom Template mitgelieferte "schöne" Schrift? In zweiterem Fall kann hier definitiv einiges getan werden.
Im ersten Fall kann man schauen wo man seine Schrift einsetzen will. Nur im Logo+Slogan? Dann tut es auch eine passende SVG Grafik.
Diese grundlegende Entscheidung kann jedoch unser Plugin nicht abnehmen, das kann nur vom Templatehersteller passieren (auch die Entscheidung für mehrere Schriftdicken mag sinnvoll sein - sollte dann einfach fundiert getroffen werden).

@saw Das ist leider Horror:

<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/bootstrap/fonts/glyphicons-halflings-regular.woff" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/bootstrap/fonts/glyphicons-halflings-regular.woff2" as="font">

<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-brands-400.woff" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-brands-400.woff2" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-light-300.woff" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-light-300.woff2" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-regular-400.woff" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-regular-400.woff2" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-solid-900.woff" as="font">
<link rel="preload" src="https://www.softairwelt.de/templates/Hypnos/themes/base/font-awesome/webfonts/fa-solid-900.woff2" as="font">

Woff2 ist das neuere Format von Woff - der Browser lädt nur eines von beiden. Mit den Befehlen wird der Browser gezwungen beide zu laden. An Hand des Dateinamens kann er nicht erkennen ob es sinnlos ist, da es die gleiche Schrift ist. Der Name der Schriftart ist erst in der Datei zu finden, sodass er diese laden muss. Das ist ein unnötiger Ballast.

P.S.: In unseren Tests haben wir gemerkt - und ist auch logisch zu erklären - dass Preload das Ladeergebnis verschlechtern kann.
Warum ist das so? Mittels Link Preload wird dem Browser befohlen Dateien vorzuladen. Das macht er - und manche haben damit so zu tun, dass es die Seite verlangsamt.
Ist die Ressource nun gar nicht so wichtig, dann kostet das unnütze Zeit. Da wir nun CSS und JavaScript erst am Ende laden wird die Seite ja bereits angezeigt.
Kurzes Beispiel mit Preload (Musterdaten):

• SEite wird angefordert, Dauer 1s
• Schriften werden per Preload geladen: 2s
• HTML wird gerendet (Inhalt kommt ja erst nach dem Head-Tag also nach den Preloads): 1 s
• Seite wird nach 4s angezeigt
• CSS wird nachgeladen: Dauer 1s - Gesamtdauer: 5s

Kurzes Beispiel ohne Preload:

• Seite wird angefordert, Dauer 1s
• HTML wird gerendet: 1s
• Seite wird nach 2s angezeigt
• CSS wird geladen: 1s
• Schriften werden nachgeladen: 2s
• Gesamtdauer: 5s

Und wofür gibt es das Preload dann nun? Naja wer das CSS ganz oben hat (inkl. Schriften kann man ja auch in ein kritisches CSS packen) und auch noch inline braucht gleich die Schriften. Aber der Browser hat keine Preload Tag bekommen, sodass er selbst entscheidet was er wichtig findet (auch an Hand weitere HTML Strukturen) und lädt somit ggf. ein Bild vorher.
Kurzum: Preload ist ein mächtiges Tool - aber auch kein einfaches und sollte gezielt eingesetzt werden (daher auch unsere Anpassungen auf "Nicht Aktiv" im Standard des Plugins).
Und was macht Pagesspeed? Nutzt man Preload gehen die Werte hoch weil die erste Zeit bis zum Darstellen hochgeht, nimmt man Preload raus werden die Werte besser, aber er meckert an man solle doch die Schriften vorladen. Einfaches Problem: Das ist eine Maschine und weiß nicht was ihr mit der Seite vorhabt. Meine Empfehlung hier wäre: Die eine wichtige Schrift vorzuladen.


Fazit: Durch das bessere Verarbeiten des Optimizer werden nun die Schriften (zu Recht) auch erkannt - das drückt jedoch den Score etwas.
Diese nun beabsichtigt nicht Pagespeed "zu zeigen" würde das Tool befriedigen - aber keinen eurer Besucher.

 

[saw]

@saw Das ist leider Horror:

Oops, ok, ich kümmere mich darum.

Vielen Dank für die Analysen!

 

[MichaelH]

@KnoellMarketing: ich lese nicht alles mit und verstehe nicht alles, aber ein Kompliment an euch wie ihr euch dahinterklemmt, das ist wirklich vorbildlich !

 

[martinwolf]

Oops, ok, ich kümmere mich darum.

Vielen Dank für die Analysen!

Hab ich eben angepasst, dass nur noch die woff2 Dateien preloaded werden. Aber kurz zum Hintergrund warum soviele Schriftdateien. In Hypnos nutze ich Font Awesome 5 in der Pro Version. Die Pro Version kennt für jedes Icon drei unterschiedliche Stile, daher auch drei unterschiedliche Dateien. Zusätzlich dann noch die Brands wie Facebook, YT etc.

 

[eRock Marketing]

@martinwolf Wir nutzen in der neuen Version unseres Templates zwar nur noch eine Schrift, hatten vorher jedoch auch 3 Schriften genutzt.
Da hatten wir uns dem Problem generell auch angenommen und eine ganz gute Lösung gefunden: Die Schriften in eine Datei zusammenpacken.
Hinzukommend nutzen wir durch eine fertiges Skript noch den lokalen Cache dazu. Ggf. ist das ja was für eine deiner zukünftigen Lösungen: https://jaicab.com/localFont/
Das hat gleich den Vorteil: Man muss nicht mehrere Typen angeben, die Schrift wird direkt in CSS umgewandelt. (ob man dabei die Funktion des lokalen Caches mit nutzt ist einem selbst überlassen).

Hat in unseren Tests (bei 3 Schriftarten) das beste Ergebnis sowohl für neu als auch für wiederkehrende Benutzer geliefert.

P.S.: Ggf. die Brand als SVG einbinden? Die Schriften für Icons und Co sind auch nicht so groß in deinem Template, es sind eher die "normalen" Schriften.

@MichaelH Vielen Dank. Das hört man gerne.

 

[eRock Marketing]

Wir sind mit den Tests nun soweit durch und möchten hiermit Version 2.01 freigeben.
Da nicht jeder Lust hat die Beiträge zu lesen die Anpassungen im Detail:

• Integration globales kritisches CSS
• Anpassungen der JavaScript Optimierungslogiken
• Anpassungen der CSS Optimierungslogiken
• Neue Funktion: Zusätzliche Head-Tags

Diese Version läuft nochmals deutlich stabiler - bisher haben wir keinen Fehler feststellen können. Das liegt auch daran dass wir nochmal "weniger" verändern und trotzdem die Ressourcen nachrangig laden lassen.

Bei Installation wird das kritische CSS mit einem roten Hintergrund befüllt - um zu zeigen: Hier muss noch was gemacht werden.
Dazu im Plugin auf den Tab "Detaileinstellungen" und dort das kritische CSS generieren lassen (siehe Bild im Anhang).
Für Evo, Hypnos und EasyTemplate 360 sind die Konfigurationen vorgefertigt - bei weiteren stehen wir gerne zur Verfügung.

Da ggf. einige einfach updaten auch nochmal wie die Einstellungen im Standard sein sollten (hat in allen Templates und mit allen unterschiedlichen Plugins sauber geklappt).

Bei den Bilderausnahmen ist "kategorien" vor allem wegen dem EVO drin, wer das nicht hat kann hier ein bisschen rumspielen um noch mehr Bilder nachladen zu lassen.

Hauptversion ist geupdatet, anbei noch der Detaillink: https://shop.knoell-marketing.de/zips/km_speed_optimizer_v201.zip