TYPO3 - Mehr Website Performance mit Caching

Vorab: Die Performance einer TYPO3-Seite ist von mehreren Faktoren abhängig, darunter Server-Infrastruktur, HTTP-Server, PHP, SQL-Datenbank, CMS-Konfiguration und Template-Programmierung. Zur Optimierung des Server-Frameworks haben wir hier schon einiges geschrieben. Das Datenbank-Tuning ist ebenfalls ein wichtiges Thema, zu dem wir einen eigenen Beitrag vorbereiten – denn die MySQL-Datenbank ist das Herz jeder TYPO3-Seite, aber häufig auch ein Flaschenhals.  

Heute aber soll es speziell um Stellschrauben in TYPO3 gehen, mit denen Sie die Antwortzeiten Ihrer Webseiten verkürzen können. Für alle genannten Maßnahmen gilt: Messen Sie regelmäßig die Leistung Ihrer Seiten, um die Wirksamkeit einzelner Aktionen einschätzen zu können. Auf die Schnelle geht das auch in den Entwicklertools des Browsers (Netzwerkanalyse), über die Ausgabe der Parsetime im aktivierten Admin Panel (nur ungecacht) oder als Debug-Information im HTML-Quellcode (bzw. ab TYPO3 Version 9.0 als HTTP Response Header). Dafür wählen Sie im Install Tool das Preset „Debug“ für den Betriebsmodus oder schalten global (Install Tool bzw. / LocalConfiguration.php) oder seitenweise (im TypoScript-Setup) die Debug-Info ein: 

#TS-Setup: Debug-Infos inkl. Parsetime einschalten 
config.debug = 1 

# /typo3conf/LocalConfiguration.php / localconf.php (TYPO3 CMS v4.7 und früher) 
$TYPO3_CONF_VARS[‘FE‘][‘debug’] = ‘1’ 

Serverseitiges Caching 

Zu den wichtigsten Tuningmaßnahmen für Websites gehört das Caching. Dabei werden Webseiten in einem Zwischenspeicher statisch vorgehalten und bei Anfragen sofort ausgeliefert. Vor allem bei komplexen Inhalten, die viel Zeit fürs Rendern brauchen und sich nicht oft ändern, sparen Sie so eine Menge Zeit. In TYPO3 können Sie sowohl serverseitiges als auch clientseitiges Caching beeinflussen. 

TYPO3 selbst speichert Webseiten standardmäßig in einer Caching-Tabelle. Aber auch kompilierter Core-Code und andere Systemdaten werden gecacht. Seit Version 4.3 enthält der TYPO3-Core ein Caching-Framework, das diverse Backends und Frontends für unterschiedliche Caching-Anforderungen unterstützt. Die Konfiguration erfolgt in der LocalConfiguration.php. Ausführliche Informationen zum Caching-Framework bietet die TYPO3-Dokumentation. 

Caching-Dauer einstellen 

Die Einstellung von Caching-Optionen für einzelne Templates kann im TypoScript-Setup oder im Backend erfolgen. Die wichtigste Einstellung ist die Cache-Dauer:  

# TS-Setup: Zeit, die die Seite im Cache verbleiben soll 
config.cache_period = <Zeit in Sekunden>  

# Seite wird immer beim ersten Seitenaufruf nach Mitternacht erneuert 
config.cache_clearAtMidnight = 1 

Sinnvoller Default für die Cache-Dauer ist 86400, also 24 Stunden. Je nach Art und Inhalt der Seite können aber auch deutlich größere oder kleinere Werte sinnvoll sein (Newsmeldungen vs. weitgehend statischer Content). Wird die Cache-Dauer im Backend gesetzt (in den Seiteneigenschaften im Reiter „Verhalten“), richtet sich TYPO3 danach und ignoriert die TS-Konfiguration.  

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Seitenbereiche vom Caching ausnehmen  

Natürlich können Sie den Cache auch deaktivieren, etwa bei der Entwicklung. Das erfolgt ebenfalls im Backend oder im TS-Setup per  

config.no_cache = 1  

Im Normalbetrieb ist dies zwar aus Performance-Gründen nicht zu empfehlen. Es kann aber durchaus sinnvoll sein, Bereiche einer Seite, die häufiger aktualisiert werden als andere, vom Caching auszunehmen. Um das zu erreichen, können Sie etwa diese Inhalte per AJAX nachladen oder dafür den TypoScript-Objekttyp COA_INT verwenden.  

Statischer Datei-Cache 

Das TYPO3-Caching-System ist effektiv, hat aber einen Nachteil. Bei jeder Anfrage sind auch dabei PHP-Aktionen und Datenbankabfragen nötig – die gecachten Seiten liegen ja in der erwähnten Cache-Tabelle, welche bei längerer Nutzung auch sehr umfangreich werden kann.  

Die Extension StaticFileCache geht einen anderen Weg: Sie speichert statische Seiten im typo3temp-Verzeichnis und leitet per Rewrite-Regeln in der .htaccess-Datei darauf um. Weil weder der PHP-Interpreter noch die Datenbank gebraucht wird, können deutlich kürzere Ladezeiten erreicht werden. Im Backend-Modul der Extension gibt es eine Übersicht über die Seiten im Static File Cache und auch Informationen, warum eine Seite nicht gecacht werden kann. Das Modul ist damit (neben dem Admin-Panel) auch eine gute Basis für Caching-Optimierungen, um etwa Fehlkonfigurierungen, ungecachte Objekte oder nicht caching-fähige Extensions aufzuspüren. 

Clientseitiges Caching 

Auch Clients, also insbesondere der Browser und auch Proxy-Caches wie Varnish, können Webseiten zwischenspeichern, wenn sie entsprechend konfiguriert sind. Ob eine Seite gecacht werden soll, wird dem Client über verschiedene HTTP-Header mitgeteilt, zum Beispiel „Cache-Control: max-age“ und Expires. In TYPO3 bestimmen Sie per TypoScript, dass entsprechende Header mitgesendet werden (sofern keine Backend- oder Fronend-Benutzer angemeldet sind):  

# HTTP-Header zur Cache-Kontrolle mitsenden 
config.sendCacheHeaders 

Welche Header mit welchen Einstellungen (insbesondere für die Cache-Dauer) gesendet werden, hängt von den serverseitigen Caching-Einstellungen ab. 

Frontend-Optimierungen 

Um die Ladezeiten Ihrer Seiten zu reduzieren, sollten Sie auch die Dateigrößen der zu ladenden Ressourcen reduzieren. Das beinhaltet zum einen die Komprimierung von Bildern, die bei den meisten Websites den Hauptanteil zur Gesamtgröße beitragen. Sie können im TypoScript-Setup die Bildqualität pro Bild beeinflussen (per GIFBUILDER) oder global in der LocalConfiguration.php (Install Tool): 

$TYPO3_CONF_VARS['GFX']['jpg_quality'] = '70' 

Alternativ optimieren Sie Bilder automatisch schon beim Upload, zum Beispiel mit den Extensions image_autoresize oder imageoptimizer. 

CSS- und Javascript-Dateien können Sie im TS-Setup minifizieren und komprimieren sowie zusammenfassen (um die Zahl der HTTP-Anfragen zu reduzieren): 

# Code-Optimierung per TS-Setup 
config.compressCss = 1 
config.compressJs =1 
config.concatenateCss = 1 
config.concatenateJs = 1 

Wenn Sie (externen) JavaScript-Code per IncludeJS(…) in Ihre Seiten einbinden, sollten Sie (ab TYPO3 CMS 7.1) nach Möglichkeit den Parameter „async“ nutzen, damit der Browser den Code erst am Ende lädt. 

Ähnlich wirkt eine weitere sinnvolle Optimierungsmaßnahme, das Lazy Loading: Inhalte (Bilder, Videos, iFrames) werden erst geladen, wenn sie im Viewport sichtbar sein sollen; Inhalte „above the fold“ (ohne Scrollen sichtbar), werden zuerst geladen und so die Wartezeit für die Benutzer reduziert. Das übernehmen JavaScript-Bibliotheken wie unveil.js, Lazy Load oder LazyLoad.  

Ein Tipp zum Abschluss: Solche Aktionen lassen sich auch hervorragend mit Taskrunnern wie Grunt oder Gulp automatisieren. Das spart nicht nur Zeit, sondern auch Ressourcen, weil Sie das Komprimieren etc. in TYPO3 dann deaktivieren können. 

Bildnachweis: Titelbild von 200 Degrees auf Pixabay