Neu Ladezeit verbessern durch Komprimierung

[apalusa]

Hallo Liebe Community,

Ladezeit bzw. Pagespeed ist ja permanent ein wichtiges Thema und einige Beiträge im Forum haben uns auch schon enorm geholfen. Allerdings fällt mir sowohl bei Google Pagespeed Insight als auch bei Lighthouse aus den Google Chrome Dev Tools auf, dass 2 bereits minimierte Dateien angeblich trotzdem noch um einiges mehr Komprimiert werden könnten. Folgend dazu ein Snippet. Zusätzlich zu den Dort gezeigten zwei Dateien, gibt es auch noch einen Eintrag in der Liste der einfach unsere URL aufzeigt, ohne Verweis auf eine Datei. Hier steht dann auch dass die Größe bei 239 KB liegt und um 184 KB verkleinert werden könnte. (Das ganze läuft unter dem Punkt "Enable text compression" bei Lighthouse).



Soweit ich in Erfahrung bringen konnte, sind dies bereits Dateien die letztlich aus allen einzelnen CSS bzw. JS Dateien bestehen und von minify entsprechend komprimiert werden. Trotzdem meinen die Tools von Google dass man hier noch um einiges mehr an Platz sparen kann. Da wollte ich mich jetzt mal konkret erkundigen, ob dies tatsächlich möglich ist und falls ja, wie können wir das bezwecken?

In den Template Einstellungen haben wir sämtliche Komprimierungen aktiv und auch nach dem Test via https://www.whatsmyip.org/http-compression-test/ kam heraus, dass die Compression auf jeden Fall aktiv ist und läuft, deshalb bin ich mir eben nicht sicher ob die von Google erwähnten Einsparungen tatsächlich machbar sind. Jegliche Tipps zu diesem Thema sind willkommen!
__________________________________________________________________________________________
Unabhängig vom Thema oben, gibt es auch unter dem Punkt "Remove unused CSS" einen Eintrag, siehe folgendes snippet. Demnach wäre fast die gesamte minified Datei unused. Hier vermute ich aber mal dass diese Meldung nur kommt, weil auf unserer Startseite natürlich nicht die CSS Regeln für die Artikel und derartiges verwendet werden, daher hätte ich persönlich diesen Punkt ignoriert, Meinungen, besonders von jemanden der sich damit deutlich besser auskennt als ich, sind trotzdem sehr willkommen!



Wir verwenden derzeit den JTL Shop 4.06 Build 11 gehostet bei JTL.

Schon einmal Danke im Voraus!

Viele Grüße
- apalusa

 

[MBesancon]

Die Leute von @KnoellMarketing haben sich damit intensiv beschäftigt und auch ein Plugin gebaut das den Pagespeed deutlich verbessert. Vielleicht kannst du dich mit den Kollegen mal austauschen

 

[hula1499]

Die JTL3.js hat enormes Einsparungspotential, einfach mal in einen JS-komprimierer schmeissen und nur mal die Zahl ansehen der Ersparnis (kommentare weg, leerzeichen weg usw).
JS zu komprimieren ist relativ sicher, bei CSS muss man schon etwas mehr aufpassen, aber auch hier ist zu den JTL Normaldatein ein grosses Einsparungspotential vorhanden.

 

[apalusa]

Die Leute von @KnoellMarketing haben sich damit intensiv beschäftigt und auch ein Plugin gebaut das den Pagespeed deutlich verbessert. Vielleicht kannst du dich mit den Kollegen mal austauschen

Danke für den Tipp, tatsächlich bin ich heute Vormittag erst auf das Plugin gestoßen und hab das jetzt auch mal in der Testversion aktiv (hatte ich vergessen zu erwähnen). Hier gibt es schon enorme Einsparungen, aber die von mir geposteten Werte wurde nach der erfolgreichen Aktivierung vom Plugin gemessen.

Die JTL3.js hat enormes Einsparungspotential, einfach mal in einen JS-komprimierer schmeissen und nur mal die Zahl ansehen der Ersparnis (kommentare weg, leerzeichen weg usw).
JS zu komprimieren ist relativ sicher, bei CSS muss man schon etwas mehr aufpassen, aber auch hier ist zu den JTL Normaldatein ein grosses Einsparungspotential vorhanden.

Würde ich gerne mal probieren, nur bin ich mir nicht sicher wie ich hier genau vorgehen muss? Gibt es außer den Einstellungen im Menüpunkt "Template" noch weitere Komprimierungs-Möglichkeiten die ich aktivieren kann? Wie gesagt sind bereits folgende Einstellungen bei uns aktiv.


Viele Grüße
- apalusa

 

[hula1499]

Es gibt externe Tools die Datein wie css/html/php/js etc komprimieren.
Hier werden meist unnötige Kommentare, Leerzeilen usw. gelöscht. Dies hat nichts mit dem JTL Shop oder der Admin zu tun.

Solltest du jedoch damit wenig/keine Erfahrung haben - würd ich das lieber nicht (selbst) machen...

Kleines Beispiel: deine jtl3.js ist laut screen 459 KB gross, meine 106 kb

 

[apalusa]

Es gibt externe Tools die Datein wie css/html/php/js etc komprimieren.
Hier werden meist unnötige Kommentare, Leerzeilen usw. gelöscht. Dies hat nichts mit dem JTL Shop oder der Admin zu tun.

Solltest du jedoch damit wenig/keine Erfahrung haben - würd ich das lieber nicht (selbst) machen...

Kleines Beispiel: deine jtl3.js ist laut screen 459 KB gross, meine 106 kb

Danke für die schnelle Antwort und den Tipp. Ich hüte mich grundsätzlich davor etwas zu ändern dass ich nicht vorher gründlich recherchiere und anschließend auch verstehe. Immerhin sind Änderungen die ich nicht verstehe nachträglich nur schwer wieder Rückgängig zu machen. Wobei ich dachte dass die Komprimierung die man im Backend aktivieren kann genau dies macht (Kommentare und Leerzeilen entfernen).

Allerdings will ich eins noch nicht ganz verstehen, die jtl3.js Datei unter /asset/ ist doch eigentlich nur eine automatisch vom Shop generierte Datei die aus sämtlichen anderen JS Dateien besteht, oder hab ich das falsch verstanden? Falls dem so ist, bleibt mir schleierhaft wie externe Tools die nicht als Plugin o.ä. integriert werden diese Datei beeinflussen könnten da diese ja vermutlich regelmäßig neu generiert wird um immer alle Änderungen zu beinhalten.
Danke schon mal im Voraus für eine Erklärung hierzu, ich würde das soweit zumindest schon gerne nachvollziehen können.

Viele Grüße
- apalusa

 

[hula1499]

Gerne bring ich ein klein wenig Licht ins Dunkle

Ja, das asset zeug wird "on the fly" erstellt.
Legt man nun aber eine bereits komprimierte Version der Datei X in dem besagtem Verzeichnis ab (Inhalt der kompletten jtl3.js in ein besagtes Tool schmeissen, Ergebnis abspeichern) , wird diese dann aufgerufen (also die abgelegte Datei am FTP).

Asset Idee ist prinzipiell recht süss, kostet aber jedesmal performance am Server ABER hat natürlich den Vorteil, dass sie immer aktuell ist (egal ob man pluginupdates oder sonstwas macht, sofern diese Datei überhaupt angegriffen wird), ich hab sie hardcoded, optimiert abgespeichert - ich muss jetzt bei einem shopupdate/templateupdate daran denken, diese jtl3.js neu (on the fly) erstellen zu lassen, komprimiere sie dann wieder und lege sie danach wieder fix am server ab.

Mit ist das eine Ersparnis von rund 76% zu deiner jtl3.js wert (lieber denk ich dran und der Kunde hat seine Datein schneller).

Das ist jedoch jetzt sehr individuell und vermutlich für 99.99% der JTL Kunden nicht tauglich (daran denken, selbst erstellen, selbst komprimieren usw) wir haben die auch auf einen CDN ausgelagert und gar nicht mehr lokal bei uns am Server (wie das ganze asset zeug).

Also...lieber so lassen oder mit eigenem Admin-Mehraufwand rechnen

 

[apalusa]

Mit ist das eine Ersparnis von rund 76% zu deiner jtl3.js wert (lieber denk ich dran und der Kunde hat seine Datein schneller).

Danke für die ausführliche Antwort, dass das ablegen einer festen Datei auf dem FTP die "on-the-fly" Erstellung ersetzt hätte ich mir auch denken können, manchmal sieht man aber den Wald vor lauter Bäumen nicht. Die Ersparnis ist es meiner Meinung nach um allemal Wert, zumal bei uns die oben angesprochenen Dateien (also JS und CSS jeweils) Zusammen ca. 1 Sekunde Ladezeit/Zeit bis zur Interaktivität verursachen (variiert bei jedem Test etwas) was natürlich schon einiges ist.

Kennst du zufällig einen guten Dienstleister der diese Komprimierung entweder für uns machen könnte oder eine Schulung zu diesem Thema anbietet damit wir dies Optimalerweise im Haus selbst durchführen können?

Viele Grüße
- apalusa

 

[hula1499]

Die Optimierung der Datei selbst ist nicht das Ding... das kannst du mit diversen online tools selbst machen ( ich verwende https://jscompress.com/ )
Der Rest ist halt etwas "heikler"...ablegen, daran denken, danach nichtmehr wirklich lesbar die datei, immer bei updates neu erstellen/neu ins tool schmeissen, testen testen testen...

Jeder SP kann dir da eigentlich helfen der sich mit dem Template auskennt. Sie werden dir auch sagen, du solltest das lieber nicht machen - wie auch ich

 

[apalusa]

Die Optimierung der Datei selbst ist nicht das Ding... das kannst du mit diversen online tools selbst machen ( ich verwende https://jscompress.com/ )
Der Rest ist halt etwas "heikler"...ablegen, daran denken, danach nichtmehr wirklich lesbar die datei, immer bei updates neu erstellen/neu ins tool schmeissen, testen testen testen...

Jeder SP kann dir da eigentlich helfen der sich mit dem Template auskennt. Sie werden dir auch sagen, du solltest das lieber nicht machen - wie auch ich

Alles klar, danke nochmal für die ausführlichen Erklärungen und Tipps. Ich geh einfach mal davon aus dass dieser Tipp aus gutem Grund nicht für jeden empfohlen wird, werde mir mal anschauen ob es bei uns nicht noch andere Möglichkeiten gibt die Ladezeit zu verbessern so dass ich das mit der Komprimierung umgehen kann.

Cheers!
- apalusa

 

[eRock Marketing]

Ein kleiner Hinweis noch zum "on the fly". Die Dateien werden gecached, sodass auch eine assets-Datei von JTL nicht zwingend bei jedem Aufruf neu erstellt wird.
Auch kann man dem Besucher die richtigen Cache-Zeiten mitgeben (nicht wie im Standard) damit er selbst die Datei nur 1x abruft. Das hat den Nachteil bei Änderungen via Plugins sind die neuen Dateien allerdings nicht bekannt - beim Update hingegen schon (da hängt die Versionsnummer dran).
Hat man also eine recht festen Stand des Shops (wie es hula1499 z.B. hat, sonst würde er nicht fest die Dateien erstellen) kann man diesen Weg gehen - und sollte sich doch einmal etwas ändern muss man im Template hinter die Datei noch irgend einen x-beliebigen Parameter hängen.

Damit die Lösung auf ähnlich gute Werte kommt wie bei hula müsste eben leider noch ein besseres Komprimierungstool rein, wie es aktuell der Fall ist.

Kurzum: Das wäre auch automatisch realisierbar, ist es aber nicht derzeit im JTL Standard.

 

[mobade]

Hallöchen,
interessantes Thema und wo liegt die Datei im über FTP
ist eine Pseudo datei aus allen JS Datein, ok

Danke und grüssle Mario