
CSS und Javascript Dateien einbinden
Javascript und CSS Dateien in TYPO3 Templates einbinden. Komprimierung, Zusammenfassung von CSS/JS - Dateien und wrap Möglichkeiten innerhalb des Templatesetups.
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 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:
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.
keine Kommentare vorhanden