Seitenaufbau beschleunigen Teil 1: CSS Komprimierung

UPDATE: Dieser Artikel wurde Anfang 2008 geschrieben, ist nicht mehr aktuell und kann daher nicht mehr empfohlen werden. Siehe dazu auch die Kommentare.

Anleitung zum schnelleren Laden von Webseiten durch Komprimierung der CSS Datei

Auf roscripts.com habe ich einen Interessanten Blogeintrag gefunden der auf Englisch beschreibt, wie man seinen Webserver dazu anweisen kann eine vorhandene CSS Datei schneller zu laden.

Funktionsweise

Bewerkstelligt wird dies durch PHP-Code in der zu ladenden .css Datei, die dem Server Anweisungen gibt die Datei vor dem laden zu komprimieren.

  • Der Browser fordert die Stylesheet Datei ganz normal an
  • Der Server erkennt in der Stylesheet Datei einen PHP-Code zum komprimieren und führt diesen aus
  • Der Stylesheet wird an den Browser gesendet

Tools wie CSSTidy oder dem Onlinedienst von cssdrive.com die evtl. den ganzen CSS Code für spätere Nacharbeitung unlesbar oder sehr schwer zu bearbeiten optimieren, sind sicher auch sehr effektiv, doch folgende Methode erlaubt es weiter mit seinem Stylesheet wie gewohnt zu arbeiten.

Zusammenfassung

In jeder zu komprimierenden .CSS Datei wird ein kleiner PHP Code eingefügt. Am Anfang und am Ende. Dieser Code Komprimiert diese Datei indem Kommentare und überflüssige Zeichen entfernt werden, die Definitionen nicht beeinträchtigen. Nun muss man dem Server noch dazu bringen .CSS Dateien auch wie eine PHP Datei zu behandeln. Dies funktioniert über die .htaccess Datei.

Vorraussetzung

PHP ab 4.x.x
Apache mod_access.c

Schritt für Schritt

1) .CSS Datei Modifizieren

Zuerst die gewünschte .CSS Datei in einem Editor öffnen. z:B. styles.css Alternativ kann man auch den in WordPress integrierten Dateimanager verwenden. Dann folgenden Code ganz am Anfang hinzufügen:

< ?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
// Entferne Kommentar
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Entferne tabs, Leerzeichen, Neue Zeilen, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
?>

Ganz am Ende der Datei folgende Zeile einfügen:

< ?php ob_end_flush();?>

2) .htaccess Datei Modifizieren

Folgende Zeilen zur .htaccess Datei hinzufügen. Hier wieder am Beispiel der styles.css

SetHandler application/x-httpd-php

Zum bearbeiten der .htaccess Datei direkt in WordPress kann ich folgendes Plugin empfehlen AA RewriteRule.

Fazit

Ich konnte bisher leider keine Geschwindigkeitstests machen, doch der Seitenaufbau ist durch diese kleinen Eingriffe “spürbar” schneller geworden.

Es gibt noch eine voll Automatische möglichkeit, die sogar Javascript Dateien vor der Auslieferung an den Browser komprimiert, leider habe ich dies bisher noch nirgendwo fehlerlos zum laufen bekommen, obwohl die erforderliche PHP >5.2.1 Version benutzt wurde.

Dazu schreibe ich aber noch einen ausführlichen Bericht. Also, mehr im Teil 2!

4 Kommentare

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gelesen: 4901 · heute: 2 · zuletzt: 20.10.14
%d Bloggern gefällt das: