Magento, eines der meist verbreitesten Shop-Systeme hat ein gravierendes und lange bekanntes Problem mit dem Umgang mit JavaScript – wir erklären euch unsere Probleme der JavaScript-Optimierung bei Magento. Einige Magento-Entwickler werden mit hoher Wahrscheinlichkeit schon einmal an dem Punkt angelangt sein, wo der Kunde entweder nach einer Verbesserung der Shop-Ladezeit gefragt hat, oder andere entsprechende Maßnahmen zur Erhöhung seiner Performance oder Ähnlichem gefordert hat.
Eine Standard Magento Konfiguration wird bereits mit über 20 JavaScript-Dateien ausgeliefert. Somit ist für die meisten Entwickler schnell klar, dass die Reduzierung des JavaScripts oder dessen Zusammenführung in einer Datei anstatt 20 einen Geschwindigkeitsvorteil und eine bessere Performance bringen wird. Verbunden ist dies mit vergleichsweise wenig Aufwand im Gegenteil zu anderen Optimierungsmaßnahmen. Für solche Fälle bietet Magento standardmäßig die Funktion „JavaScript-Dateien kombinieren“, welche jedoch mehr Nachteile als Vorteile mit sich bringt. Die Nachteile werden wir in diesem Blogpost anhand von drei Beispielen detailliert erläutern.
Die Ausgangssituation:
Bei der Verwendung des von Magento bereitgestellten Features werden alle JavaScript-Dateien in einer Datei kombiniert, aus der Größe des Contents einen Hash generiert und als Datei abgespeichert. In unseren weiteren Beispielen benutzen wir anstatt der Hashes einfache Namen wie zum Beispiel „abc.js“ und „xyz.js“. Die Magento-Entwickler haben bei der Implementierung ihres Features jedoch einige zum Teil gravierende Fehler nicht berücksichtigt.
Fehler 1: Minimierte oder kombinierte JavaScript-Dateien können den ganzen Shop unbenutzbar machen!
Sobald 2-3 minimierte JavaScript-Dateien in das bestehende Shopsystem integriert werden, treten bereits die ersten Probleme auf.
Auch wenn der Entwickler auf die Idee kommen sollte Magentos JavaScript-Dateien zu komprimieren, wird es unter Umständen zu Fehlern kommen.
Das Problem an der Sache ist der Coding-Style der Magento Entwickler. JavaScript ermöglicht es beendete Funktionen ohne Semikolon abzuschließen, wovon die Magento Entwickler sehr oft Gebrauch machen. Sollte nun ein Entwickler die Magento JavaScript-Dateien zur Performance- und/oder Ladezeitoptimierung komprimieren und die Kombinierfunktion einschalten, entstehen dadurch kritische Fehler.
Durch das Komprimieren der Dateien schrumpft der Dateiinhalt auf exakt eine Zeile. Sobald beispielsweise eine „var“ Deklaration am Anfang der zweiten Datei steht und in der ersten Datei eine Funktion ohne abschließendes Semikolon beendet wurde (was in 95% der Fälle zutrifft), wird der Code fehlerhaft geparsed und beide Dateien verlieren Ihre eigentliche Funktionalität.
Fehler 2: Kombinieren der JavaScript-Dateien birgt das Risiko, die Ladezeit der Seite zu erhöhen!
Jetzt fragen sich sicherlich einige, wie dass denn überhaupt möglich ist wenn man doch anstatt 20 Dateien nur noch eine lädt und somit die HTTP-Requests in Folge der JavaScript-Optimierung massiv gesunken sind. Die Frage lässt sich durch ein einfaches Beispiel illustrieren. Nehmen wir an, auf der Startseite des Shops werden die JavaScript-Dateien „abc.js“ und „xyz.js“ geladen. Diese Dateien werden überall geladen. Nach dem Aktivieren der Kombination werden diese zu (Beispiel) „abcdef.js“ kombiniert. Wenn der Nutzer die Startseite besucht wird die Datei einmal ausgeliefert und danach gecached. So weit, so gut. Sollte der Nutzer jedoch eine Produktseite besuchen, welche außer „abc.js“ und „xyz.js“ auch noch „foo.js“ und „bar.js“ benötigt, wird nochmals eine kombinierte Datei erstellt (Beispiel) – „ghijkl.js“. Da der Nutzer bereits die beiden ersten Dateien im Cache hat, muss der Browser jetzt unnötiger Weise trotzdem beide Dateien in Form von ghijkl.js ausliefern, welche auch „foo.js“ und „bar.js“ enthält.
Fehler 3: Massiver Overhead ohne jeglichen Nutzen bei Verwendung von Protokollen wie SPDY oder HTTP/2
Falls der Shopbetreiber bzw. dessen Entwickler einen Server betreiben, welcher die Protokolle SPDY oder dessen standardisierten Nachfolger HTTP/2 benutzt, ist die ganze Kombination von JavaScript-Dateien als JavaScript-Optimierung mehr Nachteil als Vorteil. Die HTTP/2 Spezifikation erlaubt es, parallel in nur einer einzigen HTTP-Request JavaScript-Dateien auszuliefern. Je nach Größe und Masse der einzubindenden JavaScript-Dateien kann dies beim Kombinieren zu erheblichen Leistungseinbußen führen. Angenommen ein großer Shop hat 40 JavaScript-Dateien, wobei einer dieser Dateien eine für JavaScript gigantische Größe von 700 Kilobytes hat. Diese Datei wird beim Kombinieren jedes mal gelesen und wieder in die kombinierte Datei geschrieben. Dieser Overhead ist bei der Verwendung von SPDY oder HTTP/2 unnötig und verursacht eine deutlich spür- und messbare Erhöhung der „Time To First Byte“, die Zeit die der Shop zum Senden des ersten Bytes an den User braucht.
Testszenarien und Auswertungen der JavaScript-Optimierung
Die hier gezeigten Ausschnitte des Testtools Webpagetest sollen lediglich der Illustration des Ladevorgangs dienen.
Die Zeiten der einzelnen Dateien sind hier nicht wirklich relevant, da wir kein wiederhol- und überprüfbares Testsetup aufgesetzt haben. Das soll in einem späteren Thread aber folgen.
Ladevorgang bei Verwendung von HTTP/1.1
Ladevorgang bei Verwendung von HTTP/1.1 mit Kombinierungstool
Ladevorgang bei Verwendung von HTTP/2
Ladevorgang bei Verwendung von HTTP/2 mit Kombinierungstool
Fazit
Trotz eines eingebauten JavaScript-Kombinierungstools ist es nicht ohne Weiteres möglich, Magentos eingebaute Performance Tools wie „JavaScript-Dateien kombinieren“ in einem produktivem Umfeld ohne ausgiebiges manuelles Testen zu benutzen. Es können schnell unverschuldet Fehler entstehen, welche die ganze Seite unbenutzbar machen. Des weiteren kann bei Benutzung von Magentos Funktion schnell eine Erhöhung der Seiten-Ladezeit anstatt der gewünschten Reduzierung eintreten.