Einige Tools beschäftigen sich mit der Komprimierung von JavaScript. Hierzu gehören z. B. der JSMIN und auch der YUI Compressor.
JSMIN, The JavaScript Minifier
Joomla! nutzt von Haus aus das JavaScript Framework mootools, das durch JSMIN komprimiert wurden. Der JSMIN komprimiert die mootools.js von 179 KB auf 72 KB.
Als Ergebnis liefert das Tool einen Code, der von Kommentaren, Tabulatoren und den meisten Zeilenumbrüchen befreit wurde.
YUI Compressor
Der Kompressor der "Yahoo Unser Interface Library" kurz (YUI Compressor) packt hier noch ein wenig mehr zu. Wenn man die mootools.js unkomprimiet durch den YUI Compressor jagt, so werden aus den 179 kByte nur noch 65 kByte.
Der Code beinhaltet nun keine Zeilenumbrüche und unnötigen Leerzeichen mehr.
Für den Einsatz in Joomla! sind die mootools, die durch den YUI Compressor komprimiert wurden, immer noch bestens geeignet. Daher tauschen Sie das Framework ruhig aus. Die mootools.js liegt im Verzeichnis /media/system/js. Die aktuelle Version des Frameworks können Sie YUI-Komprimiert direkt unter mootools.net herunterladen, derzeit die 1.2.4.
Joomla! wird in der Version 1.5.15 noch mit der 1.12 ausgeliefert. Wer sich sicher sein will, dass da nix schief geht, nimmt einfach die mootools.js aus der Joomla! Installtion und komprimiert die mit dem YUI Compressor selbst (wie gerade beschrieben). Dann habt Ihr auf jeden Fall die gleiche Version.
Auch JavaScripts bringen einige Erweiterungen mit. Genau wie bei den CSS Dateien kann man diese ggf. auch etwas komprimieren. Nach dem Update der Erweiterung ist das dann ggf. zu wiederholen.
Natürlich Interessieren uns weitere Compressoren. Gibt es einen Kompressor, der genau so gute oder sogar bessere Arbeit leistet wie der YUI Kompressor von Yahoo?
Weitere Infos im Web zum Thema JavaScript Komprimierung
Zusätzlich zur Optimierung des Quelltextes, kann man auch den Webserver und den Browser sebst bemühen, die Webseiten auf der einen Seite zu packen und auf der anderen Seite wieder zu entpacken. Das funktioniert so, dass der Webserver den Code vor dem ausliefern an den Browser mit GZIP packt, die gezippte Datei zum Browser überträgt und dieser das Paket wieder entpackt.
GZIP-Komprimierung unter Joomla! aktivieren
Ein schneller Weg, um die serverseitige Komprimierung unter Joomla! zu aktivieren, ist bereits im Backend enthalten. Melden Sie sich am Backend an, wechseln Sie in die Konfiguration und dort in den Bereich "Server".
Aktivieren Sie die GZIP-Komprimierung. In der folgeden Abbildung können Sie erkennen, das die Zeit bis zum ersten Byte etwas länger dauert (grüner Balken), doch die Seiten von 23 kByte auf 8 kByte reduziert wurde.
Der Server muss vor der Auslieferung der Seite den Inhlat erst komplett aufbereiten. Hier wird noch nichts an den Client gesandt. Dann wird die Seite mit GZIP gepackt und schließlich logejagt. Dadurch ist die Zeit bis zum ersten Byte (grüner Balken) etwas länger. Ohne die Komprimierung würden die ersten Zeilen HTML-Code bereits zum Browser gesandt. Der könnte dann schon anfangen, ein wenig was zu zeigen (wenigsten den Titel der Seite). Bei der GZIP Komprimierung muss zunächst die komplette Seite rüber. Erst dann kann sie ausgepackt und verarbeitet werden.
Da sowohl die Prozessoren in den Server immer schneller werden, kann man die Option in jedem Fall aktivieren. Das spart "Traffic" (manche Hoster rechnen den verursachten Datenverkehrs zwischen Server und Besucher ab). Weiterhin lässt sich die gepackte Seite bei "langsamen" Verbindungen (z. B. Mobilfunk, Modem, ISDN nutzt) schneller - komplett - darstellen.
JavaScript gezippt als php-Code übertragen
Die JavaScripts können zum Teil sehr groß sein, gerade wenn man mit Frameworks wie jQuery, mootools, Prototype, usw. arbeitet. Das JavaScript Framework mootools, das auch von Joomla! genutzt wird, hat in der optimierten Form immerhin eine Größe von 72 kByte.
In der Zeitleiste ist das der größte Brocken, der zum Client übertragen werden muss. Mit ein paar Handgriffen, lässt sich die Datei per GZIP komprimieren, so dass dann nur noch 20 kByte zum Client übertragen werden müssen.
Laden Sie hierzu die mootools.js aus dem Verzeichnis "/media/system/js" herunter. Fügen Sie an den Anfang folgenden Code ein:
Hier wird geprüft, ob der Client überhaupt die Komprimierung über GZIP beherrscht. Wenn ja, wird die Komprimierung durch PHP aktiviert. Ganz unten in der Datei fügen Sie diesen Code ein:
... <?php ob_end_flush(); ?> ...
Speichern Sie die Datei unter dem Namen "mootools.js.php" und laden Sie die Datei wieder hoch (z. B. wieder in den Ordner "/media/system/js").
Holen Sie sich danach die "index.php" aus dem aktuellen Template Ordner. Nach der Standardinstallation von Joomla! ist das der Pfad /templates/rhuk_milkyway.
Passen Sie den Bereich nach dem <head>-Tag wie folgt an:
Der erste Teil deaktiviert das Laden der mootools.js durch Jommla's "head". Dann fügen wir eine <scritp>-Tag ein, um die gepackte Version von den mootools zu laden.
Laden Sie die Datei wieder hoch. Das war's. Die mootools werden zukünftig nur noch komprimiert zum Client gesandt. Die Ladezeiten werden sich hier ein wenig verbessern.
Die mootools.js werden von den 72 kByte auf 20 kByte reduziert. Das spart wieder etwas Zeit. Je langsamer die Internetanbindung ist, je stärker spürt man diese Verbesserung. Die obigen Ergebnisse sind bei einer 1,5 MBit/s Anbindung von einem Server in Virginia ermittelt worden. Prüfen Sie nach solchen Aktionen unbedingt, ob wirklich noch alles so läuft, wie es laufen soll. Hier sollten allerdings keine Probleme zu erwarten sein.
Dieses Vorgehen kann man auf alle JavaScript-Dateien übertragen. Auch mit CSS Funiktioniert das einwandfrei. Ersetzen Sie dort die Zeile "header("Content-type: text/javascript");" durch "header("Content-type: text/css");".
Probieren Sie ein wenig und messen Sie die Unterschiede. Sie werden sehen, es läuft wirklich gut. Neben dieser PHP Lösung gibt es einige gute Ansätze, das Ganze über die ".htaccess" zu realisieren. Nehmen Sie sich etwas Zeit, um auch in diese Lösungsansätze reinzuschnuppern. Fündig werden Sie z. B. die Suchergebnisse der Stichworte ".htaccess gzip javascript".
Weitere Infos zum Thema Serverseitige Komprimierung mit GZIP
Serverseitige Komprimierung
GZIP-Komprimierung mit SmartOptimizer bei Joomla! (http://joomla-extensions.kubik-rubik.de/de/faq/joomla-tutorials/gzip-komprimierung-mit-smartoptimizer-bei-joomla)
How To Optimize Your Site With GZIP Compression (http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/)
JavaScript Dateien effizient übertragen mit GZIP, PHP und Apache (http://pseudelia.wordpress.com/2010/03/13/javascript-dateien-effizient-ubertragen-mit-gzip/)
Sie rufen eine URL auf, der Server stellt die Seite zusammen und liefert die HTML-Datei aus. In dieser HTML Datei befinden sich ggf. verweise auf CSS- und JavaScript-Dateien im <head>, die der Browser vor dem darstellen der Seite zunächst anforder und verarbeiten muss.
Nach der Standardinstallation von Joomla!, werden beim Aufruf der Startseite zwei JavaScript und fünf bzw. sechs CSS Dateien geladen. Für jede Datei muss der Browser eine Anforederung versenden und die Antwort mit der entsprechenden Datei empfangen.
Sie verlieren wertvolle Zeit für den Verbindungsaufbau und die Bereitstellung durch den Server.
Wenn Sie alle JavaScript-Dateien in eine JavaScript-Datei und alle CSS-Dateien in eine CSS-Datei speichern, so muss der Client nur noch zwei, statt vorher sieben Verbindungen für die CSS bzw. JavaScript Datei aufbauen.
Die folgende Abbildung zeigt die Verbindungen, die ein Internet Explorer 7 aufbaut, bevor er mit dem rendern der Seite beginnen kann (grüner vertikeler Strich bei ca. 6 Sekunden). Bis dahin kann er nur warten, bis alle Informationen bei Ihm sind (Quelle www.webpagetest.org).
Das Zusammenfassen der Dateien (von sieben auf zwei Verbindungsaufbauten) würde in diesem Beispiel ca. 1-2 Sekunden ausmachen. 1-2 Sekunden, die ein Besucher weniger warten muss, bis die Seite überhaupt anfängt sich zu zeigen.
Leider ist das nicht so leicht, wie man meint. Einige Erweiterungen haben Ihre JavaScript- und CSS-Dateien irgendwo eingebunden. Die original Links zu entfernen und dann in eine Datei zu packen ist doch mit ein wenig Aufwand verbunden. Außerdem muss hier nach jedem Update wieder nachgearbeitet werden. Der Artikel "Gute Lösung für Joomla!" zeigt hier einen Weg, doch der ist sehr Steinig, wie sich in der Umsetzung für größere Seiten herausstellen kann.
...
Stopp: Ist das wirklich OK? Wenn der Browser mit sechs Verbindungen gleichzeitig saugt (siehe Weitere Tipps und Verweise), ist die Aufteilung der CSS und JavaScript Dateien doch OK? Lest erst mal alles durch. Dann solltet Ihr einfach ein wenig Probieren und mit euren Seiten die Tests durchführen. Tatsächlich kann es sein, dass die Ladezeit sich bei dem einen Browser wirklich verbessert wenn man die Dateien aufteilt und sich das beim nächsten Browser wieder anders Auswirkt. Alle Infos hier sind Ideen, wie man Zeit sparen kann. Es sind keine Musterlösungen für alle Umgebungen.
"Deaktiviere unter Joomla! die mootools für die Startseite", so lautet Tipp, der dafür sorgt, dass die Startseite schneller geladen wird. Das klappt für die mootools.js und die caption.js z. B. mit folgenden Skript nach dem <head>-Tag in der index.php des Templates:
Das Skript deaktiviert die mootools nur auf der Startseite. Wenn Ihr Gallerien jenseits der Startseite eingebunden habt, so werden die mootools beim Wechseln auf eine andere Seite geladen. Die Gallerien laufen.
Nutzt Ihr Templates, die keine JavaScript Effekte der mootools einsetzen oder auch Erweiterungen, die darauf verzichten, so ist es durchaus denkbar die mootools für das Frontend komplett zu deaktivieren. Hierzu findet man auch wieder ein paar Beispiele. Fügt den folgenden Code an der gleichen Stelle ein (nach dem <head>-Tag der index.php des Templates):
Beachtet, dass ab jetzt auch manche Lightboxen (so z. B. die Popups in der JoomGallery) oder auch der "Simple MooTicker" nicht mehr funktionieren. Probiert alles mal durch und schaut ober Ihr mit diesen Einschränkungen leben könnt.
Weitere Infos im Web zum Thema mootools deaktivieren
mootools entfernen
Mootools nur auf der Startseite deaktivieren (http://www.joomlaportal.de/allgemeine-fragen-zu-joomla-1-5/226645-mootools-nur-auf-der-startseite-deaktivieren.html)
Da der Browser erst anfängt zu renden, wenn alle Dateien aus dem <head> geladen sind, besteht ein weitere Trick drin, die JavaScript-Dateien ganz zum Schluss der HTML-Datei einzubinden.
Die CSS-Formatierungen sollten immer als externe Datei im <head> eingebunden werden, da sonst der Browser ein zweites mal rendern würde.
Unter Joomla! könnte man so die mootools aus dem Header verschwinden lassen und unten im Quellcode des Templates einbinden.
Die Ladezeit der kompletten Seite würde sich dadurch zwar nicht verbessern, der Browser würde aber schon nach dem Laden der Dateien aus dem <head> (also der CSS-Dateien), anfangen Inhalte darzustellen. Die gefühlte Wartezeit für den Besucher wird so verkürzt.
Der grüne Strich markiert den Punkt, ab dem der Browser anfängt zu rendern (hier bei ca. 1,75 Sekunden). Leider läuft z. B. das Modul "Simple MooTicker" nun nicht mehr.
EXKURS: JavaScript - Deklaration von Funktionen
Schauen wir uns folgenden Code an:
<html> <head> <title>JavaScript Deklaration</title> </head> <body onload="melde_dich('Seite geladen.');"> <script language="JavaScript">
melde_dich('Mitten drin');
</script> <p onclick="melde_dich('Erster Absatz');"> Dies ist der erste Absatz. </p> <p onclick="melde_dich('Zweiter Absatz');"> Dies ist der zweite Absatz. </p> <script language="javascript">
function melde_dich (txt_wert) {
alert("Hallo Welt! " + txt_wert);
}
</script> </body> </html>
Die Deklaration der Funktion darf in JavaScript nach Ihrem Aufruf stehen. Der Aufruf durch Ereignisse (z. B. "onload" oder "onclick") klappt dann auch Prima. Doch wird die Funktion mitten im HTML-Code aufgerufen (im obigen Beispiel mit dem Aufruf "Mitten drin." klappt es nicht, da hier die Funktion noch gar nicht geladen ist.
Im Gegensatz dazu treten die Ereignisse "onload" oder "onclick" erst auf, wenn auch wirklich der komplette Quellcode (inkl. der JavaScripts) geladen ist.
Wird die Funktion schon im <head> deklariert, treten diese Probleme nicht auf.
<html> <head> <title>JavaScript Deklaration</title> <script language="javascript">
function melde_dich (txt_wert) {
alert("Hallo Welt! " + txt_wert);
}
</script> </head> <body onload="melde_dich('Seite geladen.');"> <script language="JavaScript"> melde_dich('Mitten drin'); </script> <p onclick="melde_dich('Erster Absatz');"> Dies ist der erste Absatz. </p> <p onclick="melde_dich('Zweiter Absatz');"> Dies ist der zweite Absatz. </p> </body> </html>
Hier klappt alles so wie es soll.
Dies hat zur Folge, dass beim Laden der JavaScript-Dateien zum Schluss (also vor dem </body>-Tag) manche Erweiterungen funktionieren werden und manche nicht.
Der "Simple MooTicker" lässt sich durch ein paar Handgriffe auch zum Laufen bringen, wenn die mootools.js zum Schluss geladen werden. Doch im Ernst, wollt ihr wirklich jede Erweiterung, die Ihr einsetzt, debuggen und die Aufrufe hierfür anpassen, nur um die JavaScripts zum Schluss zu laden?
Ich persönlich hab zwar gern mal mit der Idee gespielt, hab mich dann dafür entschieden, die mootools doch in den <head> zu packen. Hier gibt es ja die Möglichkeit die mootools mit GZIP gepackt einzubinden.
Daher ist das - meiner Meinung nach - keine Lösung für Joomla!, sondern nur eine Idee für die Optimierung. Ggf. läuft das bei anderen Seiten. Habt Ihr die mootools gleich nach dem <head>-Tag, dann laufen die Erweiterungen wie Gallerien, Menüs und Ticker, die auf den mootools basieren.
