Das Komprimieren von CSS Daten, schont den Traffic-Verbrauch und erhöht zudem die Ladegeschwindigkeit der Seite. Doch wie funktioniert das?
Wenn man CSS-Dateien komprimiert, freut sich zum einen der Geldbeutel, da weniger Traffic verbraucht wird. Zum anderen natürlich der Benutzer, der mit einer geringern Ladegeschwindigkeit der Seite belohnt wird.
Es gibt auch anscheinend fertige Software, die das bewerkstelligt, doch ist das meiner Meinung nach recht mühsam, wenn man immer wieder erst die Software aufrufen muss um die CSS-Dateien zu verkleinern und sie danach wieder auf den Server laden muss.
Um das automatisch machen zu können, brauchen wir PHP auf dem Server. Dazu noch ein paar Zeilen Scriptcode und schon wird die CSS-Datei komprimiert.
Eines vorweg, ich werde euch zwei Arten der Komprimierung von CSS-Dateien zeigen. Erstens mit der klassischen Zip-Komprimierung und zweitens durch Löschen von unnötigen Zeichen und Kommentaren in der CSS-Datei.
Wichtig ist, das ihr das CSS-Style-Sheet in einer externen Datei ausgelagert habt. Falls ihr denn CSS-Code im Header euerer Datei habt, schreibt den Code in eine externe Datei. Auch zu beachten ist, dass ihr der CSS-Datei die Endung .php verpasst, damit der PHP-Parser sich der CSS-Datei annimmt.
Im Kopf der CSS-Datei fügt ihr folgenden Code ein:
Komprimierung von CSS-Dateien mit ob_gzhandler
Download Code!
<?php
// Test, ob der Browser gzip akzeptiert
if (strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false) { // Den Content-type setzen, wichtig für den Firefox
header('Content-type: text/css'); // Einschalten der Pufferung von Ausgaben
// Dieser Funktion ruft mit einem Callback die Funktion ob_gzhandler handler auf
}
?>
Wenn nun keine Zip-Komprimierung stattfinden soll, sondern die unnötigen Zeichen gelöscht werden sollen, benutzt ihr diesen Code:
Komprimierung von CSS-Dateien durch Löschen von unnötigen Zeichen und Kommentaren
Download Code!
<?php
// Den Content-type setzen, wichtig für den Firefox
header('Content-type: text/css'); // Einschalten der Pufferung von Ausgaben
// Dieser Funktion ruft mit einem Callback die Funktion cleanUp auf
// Diese Funktion entfernt alle Kommentare, Tabs, Leerzeichen und Zeilenumbrüche
function cleanUp($payload) {
// Kommentare entfernen
$payload = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $payload); // Tabs, Leerzeichen und Zeilenumbrüche entfernen
$payload = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $payload); return $payload;
}
?>
Am Ende der CSS-Datei wird folgender PHP-Code eingefügt:
Download Code!
<?php
// Leert (schickt/sendet) den Ausgabe-Puffer und deaktiviert die Ausgabe-Pufferung
?>
