Tipp: Ladezeiten bei Javascript sparen

[Adromir]

Bei vielen neuen Features kommt oft eine eine Vielzahl an Javascript zur Anwendung. Dazu werden teilweise recht große Javascripte eingebunden, die zum einen Zeit zum laden brauchen, und so den Aufbau bzw. die Funktion einer Webseite beeinträchtigen.

Um dieses zu umschiffen, kann man die Javascripte mittels mod_gzip an den Browser senden, um die Größe der Javascripte deutlich zu verkleinern.

Und so geht man vor:

Man erstelle eine .htaccess Datei mit folgendem Inhalt:

<IfModule mod_gzip.c>
mod_gzip_on                Yes
mod_gzip_dechunk            Yes
mod_gzip_minimum_file_size    500
mod_gzip_maximum_file_size    500000
mod_gzip_maximum_inmem_size   60000
mod_gzip_handle_methods       GET POST
mod_gzip_keep_workfiles    No
mod_gzip_temp_dir          /tmp
mod_gzip_item_include      file \.js$
mod_gzip_item_include      mime ^text/.*
mod_gzip_item_include      mime ^application/x-httpd-php
mod_gzip_item_include      handler ^perl-script$
mod_gzip_item_include      handler ^server-status$
mod_gzip_item_include      handler ^server-info$
mod_gzip_item_exclude      mime ^image/.*
mod_gzip_dechunk              Yes
</IfModule>

AddType application/x-httpd-php .js

Dadurch werden JS- Dateien durch den php- Parser gejagt und mittels mod_gzip gepackt.

Ein Test bei mir hat ergeben, daß z.B. die prototype.js des Prototyp Frameworks mit dieser Methode nur noch mit 17k zu Buche schlägt, anstelle von 70k, was einer Datenreduzierung von ca. 75% entspricht..

[Rizzo]

Danke für den Tipp

Zum Thema passend gibt es auch eine Variante für PHP

PHP-Code:

ob_start('ob_gzhandler'); 


Damit läßt sich die Ausgabe einer Seite gzipen bevor sie an den Browser geschickt wird.
Und auf dieser Seite kann man prüfen ob alles mit dem gzipen so funktioniert wie es sollte.

[Adromir]

Wer will, kann die oben genannte Variante auch für PHP- Dateien, HTML und andere Formate anwenden (jsp, pl).
Vorteil ist bei PHP, daß man es nicht immer in die entsprechende Dateien reingeschrieben werden muss.

Nicht zu empfehlen ist die Anwendung auf Bilddateien, da diese oft schon komprimiert sind und dort keine weitere Verkleinerung zu erwarten ist.

Nach meinen Erfahrungen verträgt sich die Variante auch nicht mit css- Dateien. Dort scheinen die Browser gzipte Dateien nicht mehr anwenden zu können..

[designfanatiker]

Hab' mal irgendwo folgenden Schnipsel aufgeschnappt:

php_flag output_buffering On
php_value output_handler ob_gzhandler
php_flag zlib.output_compression Off

Irgendwie deutlich kürzer. Aber wo liegt denn nun der Unterschied?

[Rizzo]

Zitat von designfanatiker

Irgendwie deutlich kürzer. Aber wo liegt denn nun der Unterschied?

Der Unterschied liegt darin, daß beim Script von Adromir die Komprimierung durch den Webserver (via gzip-Modul) durchgeführt und immer angewendet wird. Deine kurze Version dagegen ändert nur Einstellungen in der php.ini, so daß der Output von PHP Scripts standardmäßig komprimiert wird. Im Prinzip ist deins die automatisierte Version von dem was ich oben gepostet habe. Siehe php.net
Adromir's Version funktioniert also immer, unabhängig von PHP, während "unsere" Version nur bei PHP Scripts greift. (Deswegen schrieb ich oben auch "PHP Variante" dazu)

[designfanatiker]

Das temporäre Verzeichnis sollte man aber bei der Version von Adromir noch anpassen, oder?

Zitat von Adromir

Ein Test bei mir hat ergeben, daß z.B. die prototype.js des Prototyp Frameworks mit dieser Methode nur noch mit 17k zu Buche schlägt, anstelle von 70k, was einer Datenreduzierung von ca. 75% entspricht..

Sind diese Frameworks nicht standardmäßig komprimiert?

[Adromir]

Also ich hatte die prototype.js und die war bei 70k. Aber die Scripte sind in aller Regel nur insofern "komprimiert", als das die Zeilenumbrüche entfernt wurden. Das ist keine Komprimierung mit Hilfe eines speziellen Algorithmus, der deutlich höhere Komprimierungsraten erziehlt.

Ein weiterer Vorteil meiner Variante ist, daß er natürlich deutlich genauer konfiguriert werden kann (die von mir gepostete Variante ist auf den empfohlenen Standartwerten) und zu keinem 500 Serverfehler führt, wenn die entsprechenden Module nicht installiert sind..

[designfanatiker]

Werd' das bei Gelegenheit mal ausprobieren. Muss das temporäre Verzeichnis an einem bestimmten Ort liegen oder kann man hier einen absoluten Pfad angeben?

[Adromir]

Also ich hab es bis jetzt noch nie angelegt und hatte keine Probleme.. Der Pfad muss dann absolut vom Root aus sein..

[designfanatiker]

Ich befürchte nur, dass ich dort keine Daten hinterlegen darf. Vielleicht gibt's ja ein standardmäßiges temporäres Verzeichnis?

[Adromir]

Du kannst ja mal einen Ordner erstellen, der als tmp- Verzeichnis dient und den in der direktive bsolut vom Root-Verzeichnis aus angeben..

[designfanatiker]

Funktioniert. Damit lassen sich etwa 75 Prozent einsparen. Klasse!

---------------------------------------------------

Zitat von Adromir

Dadurch werden JS- Dateien durch den php- Parser gejagt und mittels mod_gzip gepackt.

Lässt sich das Ding eigentlich auch für Stylesheets verwenden?

---------------------------------------------------

Funktioniert leider doch nicht. Hatte vergessen den oben von mir genannten Schnipsel zu entfernen. Die Website http://whatsmyip.org/mod_gzip_test/ zeigt sie zumindest nicht an.

[Adromir]

@designfanatiker: Welches funzt nicht? Meine?
Für Stylesheets scheint es nicht zu funzen, da wurden bei mir jedenfalls die Stylesheets im Browser nicht mehr geladen. Vieleicht liegt es an einem Grundsätzlichen Problem (Browser können gzippte Stylesheets nicht verarbeiten) oder an einem falsch ausgelieferten Mime oder so..

[designfanatiker]

Zitat von Adromir

@designfanatiker: Welches funzt nicht? Meine?

Ja. Villeicht ist das entsprechende Modul auf den Servern von all-inkl.com nicht vorhanden.

Zitat von Adromir

Für Stylesheets scheint es nicht zu funzen, da wurden bei mir jedenfalls die Stylesheets im Browser nicht mehr geladen. Vieleicht liegt es an einem Grundsätzlichen Problem (Browser können gzippte Stylesheets nicht verarbeiten) oder an einem falsch ausgelieferten Mime oder so..

Ursache dürfte der falsche MIME-Typ sein. Hab' ein wenig gegoogelt: Dafür scheint es keine elegante Lösung zu geben.

@Rizzo: Finger weg von meinen Beiträgen!

[Rizzo]

Zitat von designfanatiker

Ja. Villeicht ist das entsprechende Modul auf den Servern von all-inkl.com nicht vorhanden.


Ursache dürfte der falsche MIME-Typ sein. Hab' ein wenig gegoogelt: Dafür scheint es keine elegante Lösung zu geben.

@Rizzo: Finger weg von meinen Beiträgen!

Das kann all-inkl wohl besser beantworten als wir hier, weil wir keine Einsicht in die Konfiguration derer Server haben.

Für CSS Dateien lohnt sich der ganze Aufwand und die evtl damit auftretenden Probleme eh nicht, da sich bei CSS Dateien wohl weniger als 3-5 KB rausholen lassen.

Und Deine Beiträge lasse ich dann in Ruhe, wenn Du keine doppel- und 3-fach Posts mehr machst. Besonders dann, wenn man hätte die Beiträge noch editieren können und/oder sich das ganze in einem Sticky ereignet, der eigentlich kurz und übersichtlich gehalten werden soll.

Wenn Du den letzten Absatz diskutieren willst, weil Du eine andere Auffassung hast, dann bitte per PN, da dieser Thread dafür ungeeignet ist.