Lade deine CSS Datei bis zu 80% schneller, mit PHP GZIP!
CSS Dateien großer Internet Seiten können manchmal recht Groß werden. Mit der Gzipping Methode wird die Größe der CSS Datei um c.a 70-80% verringert, dass ist ein recht akzeptabler Gewichtsverlust oder?
Der Überblick
Es gibt zwei Methoden, die man verwenden kann. In der ersten Methode wird PHP Code in den Kopf der CSS Datei eingefügt, die Datei bekommt die Dateiendung .php statt .css. Die zweite sauberere und wohl bessere Variante ist, dass man zwei neue Dateien in seinem CSS Verzeichniss hat. Eine .htaccess Datei und eine PHP Datei, die genau den selben Inhalt enthält, wie unsere erste Methode.
Der PHP Code
Es ist nur ein wenig PHP notwendig, um das ganze Vorhaben umzusetzen. Der folgende Code ist bereits alles, was unser Programm benötigt.
< ?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
Unser Programm macht folgendes:
- Es nutzt PHP`s ob_gzhandler um komprimierte Daten zu senden. Die Funktion überprüft, ob der Server diese Datei “entpacken” kann, wenn nicht sendet das Programm die unkomprimierte CSS Datei.
- Es sendet den header für den Content Typ und Character. In diesem Beispiel text/css und UTF-8
- Es setzt den Chache auf eine Stunde ( 60 * 60 Sekunden )
Methode 1
Wie oben schon beschrieben, ist die erste Methode nicht die sauberste, aber sie ist effektiv. Alles was ihr machen müsst, ist den obigen PHP Code in den Kopf eurer CSS Datei einzufügen und die Dateiendung .php statt .css anfügen. Als Beispiel:
Methode 2
Die zweite ist die sauberere und eleganterere Methode, da wir keinen PHP Code direkt in unsere CSS Datei einfügen müssen, oder die Dateiendung unserer Datei ändern müssen. Sauber und einfach.
Zwei Schritte sind notwendig um diese Methode umzusezen
Schritt 1
Als erstes erstellt ihr eine neue Datei, diese nennt ihr “gzip-css.php“. In diese Datei fügt ihr den obigen PHP Code ein. Die Datei muss im selben Verzeichniss liegen, wie eure CSS Datei.
Schritt 2
Nun müsst ihr euch eine zweite neue Datei erstellen, diese nennt ihr “.htaccess” und fügt folgenden Code ein:
AddHandler application/x-httpd-php .css php_value auto_prepend_file gzip-css.php php_flag zlib.output_compression On
- Die erste Zeile teilt dem Apache Server mit, dass alle CSS Dateien an die PHP Datei gesendet werden sollen.
- Die zweite Zeie schiebt den PHP Code vor dem der CSS Datei. Ich hoffe Ihr versteht was ich damit sagen möchte.
tobii (1 comments)
Hey,
netter Text
aber einmal soll das sicher Apache heißen
“Die erste Zeile teilt dem Apahe Server mit, dass alle CSS Dateien an die PHP Datei gesendet werden sollen.”
chris (7 comments)
Hallo Tobi,
danke für deinen Hinweis, ich habe es geändert
john (1 comments)
mod_deflate wäre da aber bedeutend simpler, zumal damit nicht nur die CSS-Dateien komprimiert werden können.
Zudem empfehle ich noch mod_expires damit die CSS-Datei (und auch andere) nur einmal pro z.B. Monat geladen werden muss.
Es setzt natürlich voraus dass die beiden Apache-Module auf dem Server aktiviert sind. mod_expires ist aber in der Regel bei den üblichen Hostern verfügbar.
chris (7 comments)
Hi John,
deine besagte Methode war mir bisher unbekannt. Ich werde mir das ganze mal anschauen
Vielen Dank für deine Info
Paul (2 comments)
Man kann es auch über die .htaccess Datei realisieren. Aber immer vorher schauen ob der Server das aktiv hat, sonnst sucht man sich einen Wolf um den Fehler zu finden
Tob1 (2 comments)
Jo, schöne Sache, johns Variante war mir bisher unbekannt.
Offtopic: wie wärs mal mit nem ordentlichen favicon… Das aktuelle ist nicht wirklich schön
flotte (3 comments)
Hallo
Die sinnvollste und effektivste Methode zur komprimierten Datenübertragung zum Client ist das Aktivieren der hierfür notwendigen Apache-Module. Für Apache V2 ist das mod_deflate. Meistens ist dieses Modul bereits in Betrieb und dann bringt eine zusätzlich Komprimierung keinen Nutzen, sondern kann sogar negativ wirken.
Das Komprimieren von css oder auch js-Dateien ist aus Kompatibilitätssicht zudem mit Vorsicht zu geniesen. Kann bei diversen Browsern zu Problemen führen.
Harry (1 comments)
Die gzippten js und css Files sollten aus Lastgründen noch gecached werden. Dazu einfach im htaccess File etwa sowas schreiben:
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^(.*)\.js$ $1.js.gz [L]
AddType application/x-javascript .gz
AddEncoding x-gzip .gz
Und im PHP Script die Datei erzeugen..
Gruß
Harry
Xian (1 comments)
Ich finde den Artikel sehr interessant und nützlich; zumal auf meinem Server leider nicht mod_deflate aktiviert ist und ich mir anders behelfen muss…
Joachim (2 comments)
Habe etwas gesucht und bin froh eine so gute Anleitung gefunden zu haben. Werd ich gleich Umsetzen. Gruß Joachim
Daniel (4 comments)
Danke für dieses Tutorial. Bin imer auf der Such nach Performencesteigernden Maßnahmen. Vielleicht sollte man sogar den hinweis von Harry in das Tutorial übernehmen. Hättest du vielleicht noch andere ideen zum Steigern bzw. reduzieren der Serverlast sowie der Datenübergabe?
Würde mich über ein Tutorial in diese Richtung freuen.
Gruß
Daniel
Christopher Dosin (83 comments)
Geht es hier speziell um Joomla? Sprites sind auch eine Möglichkeit die Größe der Page zu reduzieren http://www.dosonaro.com/cascading-stlye-sheets-css-sprites/
Ben (1 comments)
Die Idee ist super, nur muss in der .htaccess die gzip-css.php mit dem kompletten Pfad angegeb n werden, also beispielsweise:
php_value auto_prepend_file “/apache/http_docs/beispielseite/gzip-css.php”
Sonst super !