gzip Komprimierung für Javascript & CSS

Die Seitenladegschwindigkeit wird nun auch zunehmend ein Kriterium für das google Ranking. Neben der response time vom Server ist die Übertragungsmenge für den Seitenaufbau ein entscheidender Faktor.

Alle modernen Browser - inklusive der mobilen Geräte - können inzwischen mit gzip komprimierten Dateien umgehen. Da es immer einen Fall-Back-auf eine nicht komprimierte Datei gibt, ist die Vorgehensweise auch völlig unproblematisch in Bezug auf ältere Browser.

Ein Bespiel der unterschiedlichen Dateigrößen am Beispiel jQuery Version 1.11:

Komprimierung Datei Größe
ohne jquery-1.11.1.js 287 kB
minimert jquery-1.11.1.min.js 98 kB
gzip komprimiert      jquery-1.11.1.min.js.gz      33 kB

 

Wir können also allein durch die Komprimierung der jQuery Lib rund 60 kB sparen. Da die gzip Komprimierung auch mit CSS Dateien funktioniert, werden wir bei Ausnutzung der Komprimierung eine deutliche Perfomancesteigerung feststellen.

Die gzip Komprimierung verwenden

Die Komprimierung kann TYPO3 für uns automatische übernehmen. Im Installtool werden folgende Konstanten gesetzt:

$TYPO3_CONF_VARS['BE']['compressionLevel'] = '9'
$TYPO3_CONF_VARS['FE']['compressionLevel'] = '9'

 

Jetzt müssen wir noch im TypoScript unseres Templatesetups folgende Zeile ergänzen:

config.compressJs = 1 
config.compressCss = 1

 

und in der htaccess die eine entsprechende Regel hinzufügen:

<filesmatch> 
   AddType "text/javascript" .gzip
</filesmatch>
<filesmatch>
   AddType "text/css" .gzip
</filesmatch>
AddEncoding gzip .gzip

 

Ob die gzip Komprimierung läuft, könnt ihr z.B. in der Firebug Konsole sehen. Unter “Netzwerk -> Alles” werden die Dateigrößen angezeigt.

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

Schrödinger lernt HTML5, CSS3 ...

Die Buchfigur Schrödinger lernt hier auf sehr unterhaltsameweise html, CSS und Javascript. Da er dabei nahezu bei null beginnt, holt er auch Einsteiger punktgenau ab. Selbst "Alte Hasen",  für die html 5 und CSS3 zum Tagesgeschäft gehören, werden das ein oder andere Neue erfahren oder einfach nur perfekt von der Story unterhaten. Fazit: überaus lesenswert.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.