Mehr Performance durch komprimierte CSS und JS Dateien

Navigation

19. Jun 2010

Die Übertragungsgeschwindigkeit lässt sich durch komprimierte CSS Stylesheets und Javascript Dateien deutlich erhöhen. Lesen Sie, wie Sie diese Beschleunigungen einfach aktivieren.

Die Übertragungsgeschwindigkeit lässt sich durch komprimierte CSS Stylesheets und Javascript Dateien deutlich erhöhen. Dieser Artikel zeigt Ihnen, wie Sie diese Performance-Optimierungen auf Ihrem Server einrichten können.

Entpacken im Browser

Praktisch alle modernen Browser unterstützen die Interpretation komprimiert ausgelieferte Inhalte. Seiten werden für diese Browser von Weblication CMS bereits standardmäßig komprimiert und Bilder sind inzwischen sowieso komprimiert. Hier können Sie in den Templates zudem den Komprimierungsgrad einstellen.

CSS und JS komprimieren

Übrig bleiben also neben Seiten und Bildern vor allem noch JS- und CSS-Dateien. Da diese nicht über PHP interpretiert werden, müssen sie vom Apache Webserver komprimiert werden. Durch die Komprimierung reduziert sich die Menge der zu übertragenden Daten um ca. 50 und 80%.

Komprimieren über Apache mod_deflate

Wenn Ihr Webserver mod_deflate unterstützt können Sie die Komprimierung sehr einfach aktivieren. Dazu genügt der folgende Eintrag in der projektspezifischen .htaccess Datei.

Komprimierung von js und css Dateien in der htaccess aktivieren

<IfModule mod_deflate.c>
  <FilesMatch "\.(js|css)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Komprimierung über gz-Dateien für domainFACTORY Kunden

DomainFACTORY setzt derzeit noch auf Apache 1.3 ohne die Unterstützung von mod_deflate. In diesem Fall sieht die Lösung nicht ganz so einfach aus. Hier müssen Sie die CSS bzw. JS-Dateien beim Speichern über ein Verzeichnisereignis komprimiert ablegen und dann in der .htaccess Datei eintragen, dass die komprimierten Dateien genutzt werden sollen, falls diese vorhanden sind.

Update: Inzwischen nutzt Domainfactory auch den Apache 2.x.

Quelltext des Verzeichnisereignisses

$uncompressedData = 
wReadWrite::readFile($_SERVER['DOCUMENT_ROOT'].$eventData['filePath'
]);
$compressedData   = gzencode($uncompressedData, 5);
wReadWrite::writeFile($_SERVER['DOCUMENT_ROOT'].$eventData['filePath
'].'.gz', $compressedData);

Beim Speichern wird somit der Inhalt der Datei komprimiert und parallel mit der zusätzlichen Endung .gz abgespeichert.

Aufruf auf eine.gz Datei umleiten, falls diese vorhanden ist

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_URI} css$ [OR]
RewriteCond %{REQUEST_URI} js$
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteCond %{REQUEST_FILENAME}.gz -f 

RewriteRule ^(.*)$ $1.gz [L]

Sofern die Dateiendung js oder css ist, wird geprüft, ob der Browser gzip unterstützt und ob eine Datei mit dem gleichen Namen und der zusätzlichen Endung .gz existiert. Ist dies der Fall, wird die komprimierte Datei ausgeliefert. Achten Sie darauf, dass diese Datei bei Domainfactory in der DOCUMENT_ROOT liegen muss. Andernfalls müssen Sie die Pfade anpassen.