Mithilfe von PHP kann man JavaScript- und CSS-Dateien sehr effizient Komprimieren und Cachen. Dadurch können diese wesentlich schneller übertragen werden und müssen zudem nicht bei jedem Seitenaufruf erneut runtergeladen werden.
Ich werde diesen Beitrag so gliedern:
Zusätzliche Optimierung für JavaScript und CSS finden Sie in einem früheren Artikel.
Javascript- und CSS-Dateien komprimieren
Im Gegensatz zu Bildern sind CSS und JavaScript Texte, die mit sehr hoher Kompressionsrate (70% sind durchaus üblich) komprimiert werden können. Alle modernen Browser können komprimierte Webinhalte dekomprimieren und anzeigen. Weil unsere Webseite allerdings auch von alten Browsern angezeigt werden soll müssen wir für unser Cache-System 2 verschiedene Varianten vorsehen: eine komprimierte und eine unkomprimierte Variante. Die einfachste Art ein PHP(-CSS)-Script zu komprimieren ist den folgenden Code vor die erste Ausgabe des CSS-Scripts zu schreiben:
ob_start('ob_gzhandler',xxx);
das xxx kann eine Zahl zwischen 1 und 9 sein, die angibt wie stark komprimiert wird. Wird keine Zahl angegeben so wird 6 als Standard verwendet. Beachte: Die Serverbelastung steigt bei Zahlen größer 6 extrem an, weshalb man sich den Einsatz genau überlegen sollte. Wer ein Cache-System verwendet und die Komprimierung z.B. nur einmal am Tag durchführt kann bedenkenlos die maximale Kompressionsstufe 9 verwenden. Wem die Komprimierung mittels PHP zu aufwendig ist kann das ganze alternativ auch per .htaccess regeln (Im folgenden Beispiel werden alle Dateien, die die Endung .css haben komprimiert übertragen (soweit der Browser des Nutzers das unterstützt).
SetOutputFilter DEFLATE
Kleiner Nachteil: Weil hier wird kein Cache-System verwendet wird muss der Server die Komprimierung für jeden Besucher neu durchführen.
JavaScript und CSS Cachen
Beim Cachen wird dem Browser des Nutzers mitgeteilt, dass die gerade heruntergeladene Datei noch eine gewisse Zeit X aktuell bleibt. Wird die Datei innerhalb dieser Zeit erneut gebraucht, so wird sie nicht aus dem Internet heruntergeladen, sondern wird direkt aus dem Speicher des Nutzers geladen. Am leichtesten lässt sich das ganze mit dem fertigen PHP-Script QuickCache realisieren.
Für ein optimales Caching werden meiner Meinung nach 4 Versionen der CSS-Datei gebraucht. Je eine Version für IE und die sonstigen Browser (je nach Design mehr oder weniger, je nach Anzahl der Browserweichen). Und von jeder dieser Versionen wird jeweils eine komprimierte und eine unkomprimierte Version benötigt. Dadurch kann der Server genau die richtige Version ausliefern, ohne erst den Prozessor für eine mögliche Kompression anwerfen zu müssen.
Wer die Cache-Header manuell setzen möchte kann folgenden PHP-Code verwenden.
header ("cache-control: must-revalidate");
$offset = 60 * 60 * 24 * 31; //1 Monat
header ('expires: '.gmdate ('D, d M Y H:i:s', time() + $offset).' GMT');
Kommentare