Tipp 17: Cache-Header erzeugen

Nicht nur TYPO3 kann für das Caching zuständig sein, sondern auch der Browser. Weiß dieser etwa, dass sich die Seite überhaupt nicht verändert hat, muss er diese nicht extra anfordern und spart somit wertvolle Übertragungszeit. Dafür muss dem Browser aber erst mitgeteilt werden, wie lange die Seite im Cache vorgehalten werden soll. Dafür werden so genannte Cache-Header verwendet, die per HTTP-Header mit jedem Response übertragen werden. Diese schaltet man im TypoScript-Setup wie folgt ein: „config.sendCacheHeaders = 1“.

Tipp 18: Statischen File-Cache verwenden

Hat die Website wenig bis gar keine dynamischen Anteile, kann man mit der Extension „nc_staticfilecache“ [8] (oder etwa „fl_staticfilecache“) statische HTML-Seiten erzeugen lassen.

Wenn eine statische Version existiert, wird diese anstelle eines TYPO3-Renderings ausgeliefert und kann so einen erheblichen Performance-Schub geben. Damit einhergehend muss man allerdings auf Conditions verzichten, da diese in statischen Seiten nicht ausgewertet werden können. Serverseitig muss „mod_rewrite“ und „mod_expires“ vorhanden sein.

Tipp 19: Expires-Header nutzen

Auf einigen Websites gibt es Elemente, die sich über mehrere Monate nicht oder sogar niemals ändern. Man denke dabei nur an Logos, Background-Bilder oder etwa das Favicon. Alle diese Dateien könnten bequem länger als die sie umgebende Website im Cache vorgehalten werden, sodass zumindest für wiederholende Besucher eine Performance-Verbesserung zu erwarten ist. Dafür benötigt der Webserver ein aktiviertes Modul „mod_expires“ und eine „.htaccess“-Datei, die zum Beispiel folgende Information enthält (in der Annahme, dass alle Dateien im Verzeichnis „fileadmin/website/pics/“ länger im Cache gehalten werden können):

<LocationMatch "/fileadmin/website/pics/">
	<IfModule mod_expires.c>
		ExpiresActive on
		ExpiresDefault "access plus 6 months"
		ExpiresByType image/gif "access plus 6 months"
		ExpiresByType image/png "access plus 6 months"
		ExpiresByType text/css "access plus 6 months"
		ExpiresByType application/x-javascript "access plus 6 months"
		ExpiresByType text/javascript "access plus 6 months"
		ExpiresByType image/jpeg "access plus 6 months"
	</IfModule>
</LocationMatch>

Tipp 20: Caching-Framework benutzen

Gerade bei einem langsamen Datenbankserver oder bei extrem großen Cache-Tabellen (aufgrund von vielen Seiten und Parametern) kann es durchaus eine Beschleunigung darstellen, diesen Cache ins Filesystem oder gar in den Hauptspeicher zu verlagern.

TYPO3 hat in der Version 4.3 ein Caching-Framework spendiert bekommen, das allerdings zunächst im Install-Tool mit der Option „[SYS][useCachingFramework] = 1“ aktiviert werden muss. Zusätzlich wird in der Datei „typo3conf/localconf.php“ detailliert konfiguriert, wohin der jeweilige Cache geschrieben werden soll – hier als Beispiel alle drei möglichen Methoden:

$TYPO3_CONF_VARS['SYS']['caching']['cacheBackendAssignments'] = array(
	'cache_hash' => array(
		'backend' => 't3lib_cache_backend_File',
		'options' => array(
		)
	),
	'cache_pages' => array(
		'backend' => 't3lib_cache_backend_Memcached',
		'options' => array(
			'servers' => array('localhost:11211'),
		)
	),
	'cache_pagesection' => array(
		'backend' => 't3lib_cache_backend_Db',
		'options' => array(
			'cacheTable' => 'cache_pagesection',
		)
	)
);

Für die Verwendung von Memcached muss dessen Server natürlich zuerst installiert werden [9].

Tipp 21: Scriptmerger verwenden

Eines der Hauptprobleme in Richtung Performance sind Assets, die nachgeladen werden müssen. Hat man davon einige auf der Website, muss jede einzelne vom Server angefordert, dort verarbeitet und zurückgeliefert werden. Hier wäre es gut, die Anzahl der Dateien, die vom Server angefordert werden, auf ein Minimum zu reduzieren. Die Extension „scriptmerger“ [10] macht dies in beeindruckender Weise.

Zunächst werden CSS- und JavaScript-Dateien verkleinert, indem Whitespaces entfernt und Variablennamen gekürzt werden. Dann werden alle auszuliefernden CSS- und JavaScript-Dateien jeweils zu einer einzigen Datei zusammengefasst und anschließend noch komprimiert.

Tipp 22: Inline-Styles und JavaScript auslagern

Einige Extensions und auch TYPO3 legen bestimmte Daten wie Style-Anweisungen und JavaScript inline ab – also direkt in den ausgegebenen HTML-Code der Website. Damit wird ein effizientes Caching dieser Dateien verhindert, sodass man diese besser in externe Dateien auslagern sollte.

Dies kann man mit den folgenden beiden Anweisungen im TypoScript-Setup erledigen:

config.inlineStyle2TempFile = 1

Tipp 23: CSS-Sprites verwenden

Mit der „scriptmerger“-Extension ist es zwar schon möglich, mehrere CSS-Dateien zu einer einzigen zusammenzuführen, es bleiben aber die dort referenzierten Grafiken als eigene Assets, die jeweils separat vom Server angefordert werden müssen. Selbst dies kann erheblich reduziert werden, wenn man alle benötigten Grafiken mit einem Grafikprogramm zu einer einzigen zusammenführt – etwa in einem langen Streifen, bei dem sich untereinander jeweils die benötigten Grafiken befinden. Der Trick besteht nun darin, für jedes Element die passende Eigenschaft „background-position“ zu definieren. Damit wird das Sprite unter dem Element so positioniert, dass die gewünschte Teilgrafik sichtbar wird.

.checkbox {
	background: url(checkboxes.png) no-repeat 0 0;
	height: 25px;
	width: 25px;
}
.checkbox.checked {
	background-position: 0 -40px;
}
.checkbox:focus{
	background-position: 0 -80px;
}

Der Autor

Patrick Lobacher ist Inhaber und Geschäftsführer der Agentur „typofaktum unternehmenskommunikation“ (http://www.typofaktum.de), Autor, Trainer, Programmierer, unterstützendes Mitglied der TYPO3 Association und „Certified TYPO3 Integrator“ und nicht zuletzt ein Digital Native. Er berät seit 1996 Unternehmen beim Einsatz von Webtechnologien, insbesondere seit 2002 zunehmend im TYPO3-Umfeld.