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)

  • Freitag, 11 November 2011

Kommentare (0)

Bitte Kommentar schreiben

Bitte einloggen, um einen Kommentar zu schreiben.