Anzeige
Tutorialbeschreibung

Externe CSS-Dateien komprimieren und GET-Request minimieren

Externe CSS-Dateien komprimieren und GET-Request minimieren

In diesem Tutorial gehe ich auf drei verschiedene Möglichkeiten ein, um das Laden externer CSS-Dateien zu beschleunigen. Ich werde hier alle 3 Methoden kombinieren. Als Ausgangspunkt nehme ich 3 CSS-Dateien: reset.css (1,6kb), typo.css (2.1kb) und style.css (19,5kb).

Insgesamt sind das 23,2kb. Durch die Techniken, die ich hier vorstelle, ist es möglich, die Größe auf gerade mal 1,3kb zu verringern. Das sind 93,3% Ersparnis!


Der Ausgangspunkt

Alle drei CSS-Dateien werden einzeln geladen. Um diese 3 GET-Requests auszuführen, werden 28ms benötigt, bei einer gesamten Dateigröße von 23,3kb (Firebug rundet wohl auf^^). Diese Werte gilt es nun zu verbessern.

CSS KomprimierungBilder



Methode #1 - GET-Request minimieren

Per PHP-Script fassen wir alle CSS-Dateien in einer init.php zusammen und geben sie aus. Diese Datei kann dann wie gewohnt per <link>-Tag in das HTML-Dokument eingebunden werden. Da wir nun statt einer .css-Datei eine .php-Datei laden, müssen wir per header-Funktion den Content-Type auf text/css setzen, damit der Browser diese als Stylesheet erkennt.

Die init.php
Per GET-Parameter übergeben wir der init.php, welche CSS-Dateien geladen werden sollen. Ein Aufruf würde dann folgendermaßen aussehen:

init.php?load_files=reset_typo_style

Der Code dazu:

//Die Datei als Stylesheet kennzeichnen
header('content-type:text/css; charset: UTF-8'); 
//Durchlaufen der CSS-Dateien
foreach(explode('_',$_GET['load_files']) as $file){
//Laden der Datei
$str = file_get_contents($file.'.css');
//Ausgabe
echo $str;
}

 
Mittels mod_rewrite schreiben wir die URI um, damit wir die .css-Dateiendung beibehalten können und wir nicht unschöne GET-Parameter mittels ? übergeben müssen.

Der Dateiaufruf mit mod_rewrite:

init_reset_typo_style.css

Die .htaccess-Datei:

RewriteEngine On
RewriteRule ^init_(.*).css$ css/init.php?load_files=$1 [QSA] 

Nun können wir mit "_" getrennt die benötigten Dateinamen an die init.php übergeben. Außerdem übergebe ich direkt den Pfad zu den CSS-Dateien, dann muss dieser im HTML-Dokument nicht mehr angegeben werden.

CSS KomprimierungBilder



Wir sehen eine kleine Verbesserung. Obwohl sich die Dateigröße nicht verändert hat, ist die Ladezeit durch die verringerte Anzahl an GET-Requests um 1ms gesunken


 

Methode #2 - Unnötige Zeichen entfernen

Aus Gründen der Übersichtlichkeit rückt man den Code in CSS-Dateien gerne ein und kommentiert auch ab und an etwas. Der Browser braucht zur Interpretation keine solchen Hilfsmittel. Also schmeißen wir einfach alle Kommentare, Leerzeichen und Zeilenumbrüche raus. Das tun wir in der init.php vor der Ausgabe der CSS-Dateien.

//Die Datei als Stylesheet kennzeichnen
header('content-type:text/css; charset: UTF-8'); 
//Durchlaufen der CSS-Dateien
foreach(explode('_',$_GET['load_files']) as $file){
//Laden der Datei
$str = file_get_contents($file.'.css');
//Kommentare entfernen
$str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '',$str);
//Leerzeichen, Tabs und Zeilenumbrüche entfernen
$search = array("\r\n", "\r", "\n", "\t", ' ', ' ', ' ');
$str = str_replace($search, '',$str );
//Ausgabe
echo $str;
}

CSS KomprimierungBilder



Wir sehen eine erhebliche Verbesserung. Die Ladezeit verringert sich um ganze 17ms und die Dateigröße um 3,5kb.


 

Methode #3 - gZIP-Komprimierung

Wie bei anderen bekannten Archivtypen wie ZIP oder RAR wird die Dateigröße durch einen Komprimierungsalgorithmus verkleinert. Mittels "ob_gzhandler" können wir dieses Verfahren in PHP nutzen. Wenn Server oder Client gZIP nicht unterstützt, wird automatisch die unkomprimierte Datei gesendet.

Der Code:

//gZip aktivieren
ob_start('ob_gzhandler');
//Die Datei als Stylesheet kennzeichnen
header('content-type:text/css; charset: UTF-8'); 
//Falls sich die Datei auf dem Server von der im Cache unterscheidet, 
//wird die Datei neu geladen.
header('Cache-Control: must-revalidate');
//Cache-Ablauf auf eine Stunde setzen (60*60 sec)
header('Expires: '.gmdate('D, d M Y H:i:s',time()+60*60).' GMT');
foreach(explode('_',$_GET['load_files']) as $file){
//Laden der Datei
$str = file_get_contents($file.'.css');
//Kommentare entfernen
$str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '',$str);
//Leerzeichen, Tabs und Zeilenumbrüche entfernen
$search = array("\r\n", "\r", "\n", "\t", ' ', ' ', ' ');
$str = str_replace($search, '',$str );
//Ausgabe
echo $str;
}

Bilder



Bäääm^^ Nur noch 1,3kb bei 10ms. Wir sparen insgesamt 22kb. Das sind immerhin 93,3%. Ich denke, man könnte dieses Ergebnis als akzeptabel bezeichnen.

 
Um das Ganze abzurunden, habe ich noch eine Funktion geschrieben, die den HTML-Code zur Einbindung der CSS-Dateien generiert.

<?php function load_css($css_files){
$src = 'init';
foreach($css_files as $css_file){
$src .= '_'.$css_file;
}
$src .= '.css';
echo '<link rel="stylesheet" href="'.$src.'" type="text/css" media="screen"/>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Externe CSS-Dateien komprimieren und GET-Request minimieren</title>
<?php load_css(array('reset','typo','style')); ?>

Demo - Blog-Eintrag auf www.ill-nature.de

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von centipete
  • 22.10.2011 - 17:16

Ich find's zwar nicht zu kurz, hätte aber nen Hinweis gut gefunden, daß Du's mit php machst – für diejenigen, die nicht lesen, was neben "Kategorie" steht :)

Portrait von illnature
  • 25.10.2011 - 15:11

Naja ich denke, es sind genug Hinweise vorhanden:

Kategorie: PHP.
Erstellt mit Programmversion: Dreamweaver CS5 & PHP 5.3.3.
Kompatibel ab Programmversion: PHP 5.x

usw.

Portrait von centipete
  • 25.10.2011 - 16:32

jo klar - ich sags ja :)

Portrait von Hammelmen
  • 19.10.2011 - 19:38

Gutes Tutorial! Nur leider etwas was kurz wie schon oben steht.

Portrait von KaisyTom
  • 19.10.2011 - 10:33

Gutes Tutorial, vielleicht ein wenig kurz, aber sehr anschaulich erklärt und vor allem effektiv.

x
×
×