CSS mit php verkleinern und komprimiert ausliefern

Seitenaufbau beschleunigen, Suchmaschinenoptimierung fängt onpage an

Für die Suchmaschinen ist die Geschwindigkeit mit der sich eine Webseite aufbaut auch ein Kriterium für die Qualität der Seite. Je schneller die Seite sich dem Benutzer zeigt, umso besser ist es. Eigentlich leicht verständlich, schließlich wartet niemand gerne.
Ein Grund für einen langsamen Seitenaufbau können viele CSS und Javascriptdateien sein die alle geladen werden müssen.

Über YSlow lassen sich recht schön Hinweise finden, wie die Webseite schneller werden kann. Typisch ist hier der Tipp "Make fewer HTTP requests". Das heißt, dass weniger einzelne Anfragen an den Server gesendet werden sollen. Hier im Beispiel werden pro Seitenaufruf drei CSS-Dateien geladen. Bei jeder einzelnen entsteht ein Zeitaufwand.

Das läuft so ab: Der Browser erkennt im HTML-Code der Seite, dass eine CSS-Datei geladen werden soll. Dafür schickt er jetzt eine Anfrage an den Server, die in etwa lautet: "Hey, gib mir doch die CSS-Datei A. Der Server sieht auf der Festplatte nach, ob er die Datei hat und schickt sie an den Browser. Dann fordert der Browser die nächste CSS-Datei an.
Naheliegend wäre nun, dass der Browser erstmal nachsieht, welche CSS-Dateien insgesamt benötigt werden und dann in einer einzelnen Anfrage die Datei A, die Datei B und die Datei C anfordert. Das würde zwei Anfragen einsparen. Sollte also schneller gehen.

Mittels php lässt sich das auch recht gut umsetzen. PHP kann dazu verwendet werden, die Dateien auf dem Server zusammenzufassen, idealerweise unnötige Elemente zu entfernen und die Datei erst dann abzuschicken.

Wie kann nun PHP CSS ausliefern?

Statt style.css wird allcssstyle.php als Datei mit den CSS-Anweisungen in index.tpl, cms_index.tpl und checkout_index.tpl wie eine CSS-Datei eingebunden.

Die Dateiendung .php sorgt nun dafür, dass der Webserver die Datei über den PHP-Parser ausliefert. Enthaltener PHP-Code wird nun ausgeführt. Das ermöglicht es, dass nun per PHP die CSS-Dateien zusammengefasst und sogar bearbeitet werden können und danach an den Browser ausgeliefert werden.

In allcssstyle.php werden die einzubindenden css-Dateien in einem Array aufgelistet. Das dient dazu, dass es übersichtlich wird und später auch mal andere Dateien dazu genommen werden können.
Die Datei sieht dann erstmal so aus:

<?php

    $arrCssFiles = array();

    // Dateien relativ zum Designordner
    $arrCssFiles[] = "/css/style.css";
    $arrCssFiles[] = "/css/jquery-ui.css";
    $arrCssFiles[] = "/css/custom.css

?>

Vor der ersten Ausgabe muss auch dem Browser auch noch mitgeteilt werden, dass css-Dateien geliefert werden.
Das geschieht mit einem von php gesendeten Header:

//Datentyp angeben
header('Content-Type: text/css');

Die Datei sieht jetzt also so aus:

<?php

    $arrCssFiles = array();

    // Dateien relativ zum Designordner
    $arrCssFiles[] = "/css/style.css";
    $arrCssFiles[] = "/css/jquery-ui.css";
    $arrCssFiles[] = "/css/custom.css";

    
    //Datentyp angeben
    header('Content-Type: text/css');


    // Dateien ausgeben
    foreach($arrCssFiles AS $cssfile){
        if(file_exists($cssfile)){
            include ($cssfile);
        }
    }

?>

Jetzt ist das grundsätzliche Ziel schon erreicht. Die CSS-Dateien werden zusammengefasst und als eine Datei ausgegeben. Der Browser erhält nun mit nur einer Anfrage an den Server das komplette CSS für die Seite ausgeliefert.

Jetzt lässt sich das noch etwas verbessern:

  • Aus den einzelnen CSS-Dateien lassen sich nicht benötigte Zeichen entfernen. Also Leerzeichen, Kommentare und die unnötigen Zeilenumbrüche. Damit wird die erzeugte Datenmenge reduziert, die Zeit für die Übertragung wieder etwas kürzer.
  • Damit der Browser das CSS cached (zwischenspeichert) sollte ihm ein Verfallsdatum dieser Datei mitgeteilt werden. Wird durch einen Expires-Header erledigt.
  • Damit die Datei neu gesendet wird, wenn sie innerhalb des Verfallsdatums erneuert wird, wird dem Browser ein Modified Header gesendet
  • Schlußendlich kann dem Browser auch noch mitgeteilt werden, dass der Server komprimierte Datenübertragung unterstützt. Wenn der Browser mitmacht wird die CSS-Datei dann noch auf dem Server gezippt und nochmals die Datenmenge für die Übertragung reduziert.


Durch diese Maßnahmen wird die CSS-Datei fast schon optimal übertragen. Eine weitere Verringerung der Datenmenge kann jetzt nur noch durch eine Reduzierung des tatsächlich benötigten CSS erreicht werden.