Um das Laden von CSS-Dateien auf der eigenen Webseite bei wenig Bandbreite zu beschleunigen, kann man die Dateien einfach über PHP mit GZIP komprimieren lassen. Dabei kann man die Größe der CSS-Datei um sagenhafte 70 bis 80 Prozent verkleinern. Bei großen CSS-Dateien macht das also wirklich einen großen Unterschied. Die Implementierung in bestehende Webseiten ist ebenso einfach und schnell durchgeführt.
GZIP-Komprimierung: Der Umweg über PHP
Es muss neben der normalen CSS-Datei, im Beispiel style.css, einfach eine weitere PHP-Datei erstellt werden, die ich einfach style.php nenne. Die style.php tragen wir dann am Ende auch im HTML-Header ein, wo eigentlich die style.css geladen wird. In der PHP-Datei starten wir dann die GZIP-Komprimierung, setzen den Content-Type auf text/css und binden den Inhalt der eigentlichen CSS-Datei ein.
ob_start('ob_gzhandler');
header('Content-Type: text/css; charset=utf8');
echo file_get_contents('style.css');Und das war's auch schon. Jetzt muss die PHP-Datei nur noch im HTML-Header eingebunden werden (ja, auch .php-Dateien gehen; es kommt auf den Inhalt an).
<head>
<link rel="stylesheet" href="https://domain.tld/styles/style.php" />
</head>Unnötige Zeichen aus der Datei entfernen
Wer es noch extremer haben möchte, dem empfehle ich, dass er wirklich jedes einzelne Zeichen, das zu viel ist, aus der CSS-Datei entfernt. Das macht am Ende zwar nicht einen so großen Unterschied wie bei der GZIP-Komprimierung, aber bei viel Code und vielen unnötigen Zeichen (Leerzeichen, Absätze, Kommentare) spart auch das ein paar Kilobyte an Daten und trägt zur schnelleren Ladezeit bei. Im Folgenden mal ein ganz kleines (auf die schnelle gebasteltes) PHP-Skript, das diese Aufgabe übernimmt.
ob_start('ob_gzhandler');
header('Content-Type: text/css; charset=utf8');
$data = file_get_contents('style.css');
$content = str_replace("\r\n", '', $data);
$content = str_replace("\n", '', $content);
$content = str_replace("\t", '', $content);
$content = str_replace(' ', '', $content);
$content = str_replace('; ', ';', $content);
$content = str_replace(', ', ',', $content);
$content = str_replace(': ', ':', $content);
$content = str_replace(' {', '{', $content);
echo preg_replace('#/\*(.*?)*\*/#', '', $content);Fazit
Das PHP-Skript entfernt alle unnötigen Zeichen, die für den Browser keine Bedeutung haben und nicht zur Darstellung der Webseite beitragen. Das sind unnötige Leerzeichen, Zeilenumbrüche, Kommentare und Absätze. Für den Webentwickler bleibt die CSS-Datei im Editor oder in der Entwicklungsumgebung aber immer noch übersichtlich. Lediglich bei der Ausgabe im Browser wird über das PHP-Skript jedes Byte gespart.
