. .

gzip-komprimiertes Javascript und CSS effektiv ausliefern

Vor einigen Wochen habe ich schon einmal über Performanceoptimierungen und in diesem Zusammenhang über die Auslieferung gzip-komprimierter Inhalte geschrieben. Nun möchte ich eine sehr effektive Methode vorstellen komprimiertes CSS und komprimiertes Javascript unter Verwendung von mod_rewrite auszuliefern. Leider komprimieren die meisten CMS-Systeme lediglich dynamisch erzeugte Seiten und nicht überall lässt sich mod_gzip einsetzen um CSS und JS “on the fly” zu komprimieren und oftmals ist dies auch einfach nicht performant genug.

Hat man CSS Dateien und Javascript Dateien, so werden zunächst von diesen komprimierte Versionen erstellt. Über die Kommandozeile lässt sich dies bei den meisten Systemen mittelg “gzip -c filename > filename.gz” erledigen. Das Resultat kann dann wie folgt aussehen:

/css/style.css
/css/style.css.gz
/js/script.js
/js/script.js.gz

Nun erstellt man in einem zweiten Schritt eine .htaccess und lässt den Webserver mittels mod_rewrite die komprimierte Version an die Browser auszuliefern welche die  Verarbeitung gzip-komprimierter Inhalte unterstützen:

# Use Compressed .js and .css Files if supported by browser
# Make sure to rewrite only Files in js and css folders
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /js/$1.js.gz [L]
RewriteRule ^css/(.*)\.css$ /css/$1.css.gz [L]
AddEncoding x-gzip text.gz

Gegenüber anderen Verfahren besitzt diese Methode einige Vorteile. Die Komprimierung der Inhalte erfolgt nur einmalig und wird nicht bei jedem Aufruf erneut durchgeführt. Darüber hinaus entfällt der Overhead der bei anderen Verfahren evtl. durch das Zuladen, Komprimieren oder Parsen von Code entstehen würde.

Aktualisiert am 13. Januar 2008
Kategorie Technik

2 Kommentare

Schreibe einen Kommentar · TrackBack · RSS Comments

  1. Pingback von JavaScript in HTML einbinden | bueltge.de [by:ltge.de]:

    […] Dazu einen Linktipp auf einen schlüssigen und klaren Artikel zum Thema: gzip-komprimiertes Javascript und CSS effektiv ausliefern. […]

    16. Januar 2008 @ 15:27
  2. Pingback von HTML-, CSS- und Javascript-Quelltext optimieren « Code, Dateien, Kommentare, Javascript, Umsetzung, Quelltext, Gedanken, Möglichkeiten « ajaveeb:

    […] davon beschreibt Alinki.com. Hier wird mittels einer .htaccess-Datei und bereits gezippten Dateien ein möglicher Overhead […]

    4. Februar 2008 @ 23:09

Du musst angemeldet sein, um zu kommentieren.