CSS mit PHP komprimieren
Die Ladezeit der CSS Dateien spielen bei der Homepage-Optimierung eine entscheidende Rolle. Weit über 50% der Dateigröße kann mit einem einfachen Trick eingespart werden.
Wir lassen uns mit Hilfe eines PHP Codes die CSS Ausgabe komprimieren. Dazu ändern wir den Dateinamen unserer CSS Datei .css auf .css.php um und schreiben am Beginn folgende Zeilen hinzu:
<?php
ob_start ("ob_gzhandler");
ob_start("compress");
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);
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n","\r","\n","\t",' ',' ',' '),'',$buffer);
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
$buffer = str_replace(';}', '}', $buffer);
return $buffer;
}
?>
Code Beispiel
Die CSS Datei "style.css" ...
body {
background-color: #eee;
color: #333;
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.7em
}
/* und so weiter */
... hätte dann den Namen "style.css.php" und würde so aussehen:
<?php
ob_start ("ob_gzhandler");
ob_start("compress");
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);
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n","\r","\n","\t",' ',' ',' '),'',$buffer);
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
$buffer = str_replace(';}', '}', $buffer);
return $buffer;
}
?>
body {
background-color: #eee;
color: #333;
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.7em
}
/* und so weiter */
Ausgabe
Der Code des obigen Beispieles wird so vom PHP Parser geliefert:
body{background-color:#eee;color:#333;font-size:small;font-family:Verdana,Arial,Helvetica,sans-serif}h1{font-size:2em}h2{font-size:1.7em}
Einbau in die HTML Seite
In den Header der HTML Seite muss diese PHP Datei natürlich wie eine CSS Datei eingebaut werden:
<link rel='stylesheet' type='text/css' href='css/style.css.php' />
großes Plus
Es gibt im Internet einige Online Tools, die einen CSS Code komprimieren und den optimierten Code liefern. Dieser muss dann nur noch kopiert und in die eigene Datei eingefügt werden. Ein gutes Tool mit vielen Einstellungsmöglichkeiten bietet der Code Beautifier.
Das große Plus der oben gezeigten PHP-Komprimierungs-Variante ist, dass der CSS-Code leserlich geschrieben werden kann, und dann automatisch vollkommen komprimiert zum Browser geschickt wird. (ohne nochmals den Code händisch zu komprimieren)
Kommentare (0)