Schnellere Ladezeiten durch JavaScript Merging in Magento

von Andreas Pointner, 13. Dezember 2016
Magento bietet die Möglichkeit die verwendeten JavaScript Dateien in eine einzige Datei zusammenzupacken und auszuliefern. Durch das sogenannte JavaScript Merging erspart sich der Browser das nachladen von vielen kleinen Dateien und kann auf einem Sitz gleich mehr wichtige Information wie CSS, Bilder usw. nachladen. Die gleiche Funktionalität gibt es auch für die Stylinginformationen (also das CSS). Aktiviert man beide Methoden muss der Browser im Idealfall genau zwei Dateien nachladen bevor er mit den Laden der Bilder beginnen kann. Zu finden sind die beiden Optionen unter System -> Einstellungen -> Entwickleroptionen. Hört sich doch schon ganz vernünftig an, oder?
JS and CSS Merging in Magento
Es gibt nur ein kleines Problem bei dieser Methode, dass ich anhand eines Beispiels erklären werde. Ihre Seite besitzt mehrere JavaScript Dateien. Auf der Startseite wird die Data file1.js und file2.js benötigt. Aktiviert man nun das Zusammenfügen der JavaScript Dateien so macht Magento aus diesen beiden Dateien eine neue mit einem Namen wie etwa „a10270cdf540656325601561b30463fc.js“. Der Benutzer gelangt auf die Seite, das JavaScript wird geladen, in den Cache gelegt und alles ist gut.

Der Kunde klickt dann auf ein Produkt und es wird die Produktdetailseite geladen. Auf dieser Seite werden ebenfalls die beiden Dateien file1.js und file2.js benötigt. Zusätzlich dazu wird aber noch für eine bessere Bilddarstellung ein drittes File file3.js benötigt.

Ist nun das JavaScript Merging deaktiviert so findet der Browser die Dateien file1.js und file2.js bereits in seinem Cache und muss nur noch file3.js (mit eher geringer Größe) nachladen. Bei aktivierten JavaScript Merging hingegen macht Magento genau dass, was es soll und nimmt sowohl file1.js, file2.js und file3.js und macht daraus ein komplett neues JavaScript File wie etwa „75dec988af0460855b61ac9b22f7705a.js“.

Das Problem dabei ist, dass die beiden generierten Dateien ( „a10270cdf540656325601561b30463fc.js“ und „75dec988af0460855b61ac9b22f7705a.js“) beinahe den gleichen Inhalt besitzen und trotzdem neu geladen werden müssen.

Homer-simpson-doh

Wie kann man die Probleme beim JavaScript Merging nun lösen?

Die beste Methode ist die JavaScript Files zu gruppieren und für jede Gruppe ein eigenes JavaScript generieren zu lassen. Dadurch wird der Cache des Browsers optimal genutzt, es werden nur noch kleine Dateien (Deltas) übertragen und die Seite wird wesentlich schneller aufgebaut.

Klingt eigentlich simple, doch das Problem steckt dabei wie immer in den Details. Erstens weiß Magento nicht (und kann es auch nicht wissen) welche Dateien wo und wie eingebunden werden, da jedes einzelne Modul dies selbst definiert, und zweitens wird ein Gruppieren von JavaScript Dateien im Standard nicht unterstützt.

Man muss sich also dem Problem selbst annehmen. Zunächst müssen alle Seiten analysiert werden um eine sinnvolle Gruppierung der JavaScript Dateien überhaupt möglich zu machen. Danach muss man das ganze dann noch im Magento Code verwirklichen. Um Gruppen von CSS und JavaScript Files erstellen zu können muss man die Funktion getCssJsHtml in der Klasse Mage_Page_Block_Html_Head bearbeiten. Am Besten man überschreibt die Klasse in seinem eigenen Modul und ändert genau diese eine Funktion.

Eine einfache Art eine Gruppierung erhält man zum Beispiel wenn man eine zusätzliche Ebene in dem Array hinzufügt in dem die JavaScript Dateien gesammelt werden. Mit dieser Adaption kann man sich seine eigenen Gruppierungen zusammenstellen. Diese Ebene kann treffend mit dem namen „group“ bezeichnet werden.

Beim aufrufen der JS Dateien im Magento-Layout file kann dann mittels dem Parameter „group“ das JavaScript gruppiert werden.

Ihre Seite kann wesentlich schneller ausgeliefert werden. Dies führt zu schnellere Ladezeiten und einem besseren Ranking bei den Google Suchergebnissen.

Will man dem ganzen noch eins drauf setzen und alles wirklich Richtig machen, so nimmt man nun die zusammengefügten JavaScript Files und packt Sie ans Ende der Seite. Dadurch erhält man zwar keine schnellere Seitenladezeit doch der Benutzer kann bereits bevor alles geladen ist ( HTML und CSS sind bereits zur Verfügung und die Seite sieht aus so wie sie soll) die Seite betrachten. Dies suggeriert einen schnelleren Seitenaufbau und steigert die User Experience. Ganz davon abgesehen nimmt es auch Google in ihr Ranking mit auf und verbessert nochmals das Ranking.

Teilen