Coderblog

JavaScript und CSS schneller laden mit htaccess gzip

Posted by Christian Weber on Donnerstag, April 10th, 2008

Wer kennt es nicht… man hat Protoype… Scriptaculous und noch einige andere Bibliotheken… sehr schnell hat man mal 200kb die ständig geladen werden. Das dies ein ganzer Haufen ist für so manch eine Leitung, ist jedem klar.

Kleines Beispiel:

Komplettes Prototype ohne Kompression: ca. 9 Sekunden (124kb)
Komplettes Prototype mit Kompression: ca. 3 Sekunden (32kb)

Das ist definitiv ein immenser Vorteil, die komprimierte Version wird nur genommen, sofern der Browser gzip-Dateien unterstützt, somit kann es auch hier nicht zu Problemen führen. Einzigster Nachteil: Browser ohne Support, haben nach wie vor lange Ladezeiten, was Schade ist.

Der .htaccess Code:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /scripts/$1.js.gz [L]
RewriteRule ^css/(.*)\.css$ /css/$1.css.gz [L]
AddEncoding x-gzip text.gz

Wichtig ist das man stets 2 Versionen von allen Dateien machen. Einmal die normale .js / .css und dann einmal .js.gz / .css.gz. Via Script lässt sich das auch ganz einfach lösen. Wer sich keine große Arbeit machen will, diese zu komprimieren. Einfach diese PHP-Datei in den Ordner mit den JavaScripts legen. (Für CSS entsprechend anpassen).

<?php
 
$jsFiles = glob('*.js');
foreach($jsFiles as $jsFile){
 
$basename = basename($jsFile);
$gzname   = $basename.'.gz';
file_put_contents($gzname, gzencode( file_get_contents($basename),9));
}
 
?>

Hoffe das hilft dem einen oder anderen, ein wenig Bandbreite zu sparen und den Usern ein wenig mehr aus den Ladezeiten herauszuholen.

Posted in: Allgemein.

(2 votes, average: 5.00 out of 5)

 Loading ...

9 Responses to “JavaScript und CSS schneller laden mit htaccess gzip”

1. Abro Says:
   August 10th, 2008 at 07:55

   [code]
   $files = glob('{css/*.css,js/*.js}',GLOB_BRACE);
   foreach($files as $file)
   {
   $gz = $file.'.gz';
   file_put_contents($gz, gzencode(file_get_contents($file),9));
   }
   echo 'Files found: '.count($files);
   [/code]

   ;o) netter artikel, danke dir.

2. RYErnest Says:
   Dezember 1st, 2008 at 13:25

   Nice post u have here Added to my RSS reader

3. Daniel Says:
   Februar 19th, 2009 at 13:15

   Schöbner Artikel

4. Christian Weber Says:
   Februar 19th, 2009 at 13:25

   Danke Dir!

5. 7162 Says:
   Februar 20th, 2009 at 20:10

   Vielen Dank für den Hinweis, hat mir geholfen im Gegensatz zu manch anderer Quelle.

6. How To Automate Optimization and Deployment Of Static Content Says:
   Juli 19th, 2009 at 12:01

   [...] JavaScript und CSS schneller laden mit htaccess gzipAnother .htaccess snippet to decide, if the content should can be delivered compressed to a client or not. (German) [...]

7. How To Automate Optimization and Deployment Of Static Content « Tech7.Net Says:
   Juli 19th, 2009 at 12:44

   [...] JavaScript und CSS schneller laden mit htaccess gzipAnother .htaccess snippet to decide, if the content should can be delivered compressed to a client or not. (German) [...]

8. Wordpress Blog Services - How To Automate Optimization and Deployment Of Static Content Says:
   Juli 19th, 2009 at 15:32

   [...] JavaScript und CSS schneller laden mit htaccess gzipAnother .htaccess snippet to decide, if the content should can be delivered compressed to a client or not. (German) [...]

9. How To Automate Optimization and Deployment Of Static Content- My Site! Says:
   Juli 25th, 2009 at 04:05

   [...] JavaScript und CSS schneller laden mit htaccess gzipAnother .htaccess snippet to decide, if the content should can be delivered compressed to a client or not. (German) [...]

Leave a Reply