Wie kann man die Seite beschleunigen?
Ladezeiten verbessern - Teil 6 - Serverseitige Komprimierung mit GZIP
- Details
- Erstellt am Freitag, 02. April 2010 20:25
- Zuletzt aktualisiert am Donnerstag, 13. Mai 2010 21:45
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.
Insgesamt ist der Inhalt schneller beim Besucher (siehe auch Artikel "Joomla! - GZIP-Komprimierung aktivieren").
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:
...
<?php
header("Content-type: text/javascript");
if( strpos($_SERVER["HTTP_ACCEPT_ENCODING"],"gzip") !== FALSE){
ob_start("ob_gzhandler");
} else {
ob_start("");
}
?>
...
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:
...
<head>
// Remove mootools.js and caption.js on StartPage
$menu =& JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
$headerstuff = $this->getHeadData();
unset ($headerstuff['scripts'][$this->baseurl . '/media/system/js/mootools.js']) ;
$this->setHeadData($headerstuff);
}
<script type="text/javascript" src="/media/system/js/mootools.js.php"></script>
<jdoc:include type="head" />
...
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://www.kubik-rubik.de/joomla-hilfe/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/)
- http://www.sysadminslife.com/allgemein/webseiten-optimierung-mit-gzip-komprimierung-in-apache2-und-iis6/
- http://lars-schenk.com/http-komprimierung-ohne-mod_gzip/48
- http://technet.microsoft.com/de-de/library/cc778828%28WS.10%29.aspx
- http://www.aspheute.com/artikel/20001115.htm
- http://www.nickles.de/c/s/http-kompression-verstehen-355-1.htm
- http://www.tecchannel.de/webtechnik/webserver/402151/kosten_sparen_mit_http_kompression/index3.html
- http://forum.de.selfhtml.org/archiv/2009/3/t185001/
- http://schroepl.net/projekte/mod_gzip/index.htm
- Compress JavaScript with GZIP (http://tutorialajax.com/compress-javascript-with-gzip.html)
- JavaScript Dateien effizient übertragen mit GZIP, PHP und Apache (http://pseudelia.wordpress.com/2010/03/13/javascript-dateien-effizient-ubertragen-mit-gzip/)
Ladezeiten verbessern - Teil 7 - CSS- bzw. JavaScript Dateien zusammenfassen
- Details
- Erstellt am Freitag, 02. April 2010 20:25
- Zuletzt aktualisiert am Donnerstag, 13. Mai 2010 21:48
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.
