JavaScript und CSS schneller laden mit htaccess gzip
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.
(5 votes, average: 5.00 out of 5)
Loading ...
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.
Dezember 1st, 2008 at 13:25
Nice post u have here
Added to my RSS reader
Februar 19th, 2009 at 13:15
Schöbner Artikel
Februar 19th, 2009 at 13:25
Danke Dir!
Februar 20th, 2009 at 20:10
Vielen Dank für den Hinweis, hat mir geholfen im Gegensatz zu manch anderer Quelle.
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) [...]
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) [...]
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) [...]
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) [...]
Oktober 2nd, 2009 at 22:30
Performance-Gewinn durch Kompression der ausgelieferten Komponenten und gleichzeitig wieder Verlust durch die sehr teure Funktion glob().
Das Beispiel ist zwar wertvoll, aber es könnte schöner sein.
Oktober 18th, 2009 at 09:13
[...] 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) [...]
November 23rd, 2009 at 18:35
Danke für das script, sehr hilfreich!
Januar 7th, 2010 at 23:43
Hi,
Danke für den super Hinweis, ich habe aber Probleme bei der Umsetzung. Denn bei mir kommen nun folgende Fehler in der Konsole:
Fehler: Stylesheet …/css/base.css wurde nicht geladen, weil sein MIME-Typ, “application/x-gzip”, nicht “text/css” ist.
Fehler: illegal character
Quelldatei: …/jquery.cycle.all.min.js
Zeile: 1
Quelltext:
‹
Weiss jemand, was ich ggf. noch in der .htaccess eintragen muss, damit die GZ-Files akzeptiert werden?
Danke im Voraus
Januar 28th, 2010 at 11:33
Hallo
Hab das auch so eben ausprobiert, aber klappt bei mir nicht.
Das PHP skript zum umwandeln funktioniert einwandfrei, echt super.
aber dann habe ich htaccess code in die datei gemacht und in das rootverzeichnis geladen aber es ändert sich nichts, bzw. wo kann man sehen, dass die .gz datei geladen wird? im quelltext??
danke
März 17th, 2010 at 12:10
Hallo,
Vielen Dank für diesen Artikel. Ich versuche schon seit geraumer Zeit meine js Dateien mit GZIP auszuliefern.
Mit deinem Script konnte ich diese mal serversetig erstellen.
Nun aber bei der Auslieferung happerts…
Ich bekomme immernoch ein 600k grosses js file (ext-all.js).
Das komprimierte File scheint laut Firebug konsole nicht ausgetauscht/ausgeliefert zu werden. Kannst Du mir vielleicht eine Tipp geben an was das es liegt?
Ich habe Dir mal eine Testfile mit dem js platziert:
http://nobile-bergdietikon.ch/test.php
in der htaccess habe ich folgendes platziert:
RewriteEngine On
RewriteBase /htdocs/
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /js/$1.js.gz [L]
AddEncoding x-gzip text.gz
Jede Hilfe ist Herzlich Willkommen!
Gruss
Sascha
Mai 28th, 2010 at 15:24
Klasse!
Nun hatte ich auch einen Grund, meine Spaghettistruktur endlich einmal aufzuräumen.
Gut kommuniziert!
Vielen Dank
Juni 5th, 2010 at 23:16
Wer sein GZ Experiment TESTEN will, z.B. Sascha, kann das hier tun:
——————- URL———————-
http://www.gidnetwork.com/tools/gzip-test.php
o.k., mit einigen weiteren Hacks, viel-hin-nd-her und ner Menge Errors habe ich folgendes erzielt:
Web page compressed? Yes
Compression type? gzip
Size, Markup (bytes) 20,222
Size, Compressed (bytes) 5,887
Compression % 70.9
Also, da ich bilder sowieso auf 50% quetsche, CSS generell optimiert wird vorm publishing und JS mehrmals mit dean packer gepackt wurde (und nu noch mit gz), und auf spässe wie bunte backgrounds (wie z.B. hier bei euch (38 kb)) lieber durch RGB-farbe ersetze habe ich von urspünglicher ladezeit 12 sekunden… jetzt 2 sekunden erreicht (komplett, mit metatags….
noch’n bit:
ForceType application/x-javascript
AddType text/javascript .gz
AddEncoding x-gzip .gz
ermöglicht die passende ausgabe bei js wenn so wie bei mir php -> js ausführbar macht. naja!
gruss casiMir
Juni 7th, 2010 at 23:01
You post informative posts. Bookmarked !
Juni 16th, 2010 at 18:46
Nabend,
komischerweise will er bei mir nicht css und js komprimiert ausgeben. Die .gz Dateien sind da und korrekt, die .htaccess sieht so aus:
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^themes/defaultshop/css/(.*)\.css$ /themes/defaultshop/css/$1.css.gz [L]
RewriteRule ^themes/defaultshop/js/(.*)\.js$ /themes/defaultshop/js/$1.js.gz [L]
AddEncoding x-gzip text.gz
Was ist da falsch?
Gruß
tobias
Juni 24th, 2010 at 22:13
Funktioniert dieses Beispiel auch für WordPress oder weiss jemand, ob es hier ein Plugin gibt ?
Freue mich auf ein Antwort.
Juni 26th, 2010 at 20:30
Mir ist kein Plugin bekannt, sollte aber genauso in Wordpress funktionieren. Lediglich die css und js Dateien im wp-content/themes/IHR_THEME/ Ordner umwandeln bzw. gzip Versionen erstellen. Ansonsten sollte WP-SuperCache als Plugin reichen.
Juli 2nd, 2010 at 22:07
Ich hab das in Wordpress eingebaut. Einfach folgende htaccess verwenden:
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /wp-includes/js/$1.js.gz [L]
RewriteRule ^js/(.*)\.js$ /wp-includes/js/jquery/$1.js.gz [L]
RewriteRule ^js/(.*)\.js$ /wp-includes/js/scriptaculous/$1.js.gz [L]
RewriteRule ^css/(.*)\.css$ /css/$1.css.gz [L]
RewriteRule ^css/(.*)\.css$ /wp-content/themes/[THEMENAME]/$1.css.gz [L]
AddEncoding x-gzip text.gz
[THEMENAME] durch den namen deines Theme-Ordners ersetzen.
Bei mir hat`s so hingehauen…
Alles Gute