Wie du mit TYPO3 Caching deine Website Performance optimierst

Wichtige Erkenntnisse

Caching ist der Performance-Hebel Nr. 1
Frontend-Optimierung bringt sofort sichtbare Ergebnisse
Performance ist ein messbarer Wettbewerbsvorteil
Systematische Optimierung schlägt Trial & Error

Deine TYPO3-Website lädt zu langsam? Die Ladezeiten beeinträchtigen das Nutzererlebnis und möglicherweise auch dein Google-Ranking? Mit den richtigen Caching-Strategien kannst du die Website Performance deiner TYPO3-Installation um bis zu 80% steigern. In diesem Leitfaden erfährst du, wie du durch professionelles Caching die Serverantwortzeiten drastisch verkürzt und deinen Besuchern ein optimales Nutzererlebnis bietest.

Warum Website Performance für TYPO3 entscheidend ist

Die Performance deiner TYPO3-Website ist von mehreren Faktoren abhängig: Server-Infrastruktur, HTTP-Server, PHP-Konfiguration, SQL-Datenbank, CMS-Einstellungen und Template-Programmierung spielen alle eine wichtige Rolle. Doch Caching ist der wichtigste Hebel für spürbare Verbesserungen.

Langsame Websites haben messbare negative Auswirkungen:

53% der Besucher verlassen eine Website, wenn sie länger als 3 Sekunden lädt
Google wertet langsame Seiten im Ranking ab (Core Web Vitals als Ranking-Faktor)
Jede Sekunde längere Ladezeit reduziert die Conversion Rate um durchschnittlich 7%
Mobile Nutzer sind besonders ungeduldig und erwarten schnelle Ladezeiten

Die MySQL-Datenbank ist das Herz jeder TYPO3-Seite, aber häufig auch ein Flaschenhals. Durch intelligentes Caching reduzierst du Datenbankabfragen erheblich und entlastest damit deinen Server nachhaltig.

Performance-Analyse: Messen vor dem Optimieren

Bevor du mit der Optimierung beginnst, solltest du die aktuelle Website Performance systematisch messen. Nur so kannst du die Wirksamkeit deiner Maßnahmen objektiv bewerten.

Tools zur Performance-Messung

Nutze diese etablierten Werkzeuge für eine fundierte Analyse:

Externe Tools:

Google PageSpeed Insights: Zeigt Core Web Vitals und konkrete Verbesserungsvorschläge
GTmetrix: Bietet detaillierte Waterfall-Analysen
WebPageTest: Ermöglicht Tests von verschiedenen Standorten
Browser-DevTools: Schnelle Netzwerkanalyse (F12 → Network-Tab)

TYPO3-interne Debug-Tools:

Du kannst Performance-Daten direkt in TYPO3 ausgeben lassen. Die Parsetime wird im aktivierten Admin Panel angezeigt (nur für ungecachte Seiten) oder als Debug-Information im HTML-Quellcode. Ab TYPO3 Version 9.0 erfolgt die Ausgabe als HTTP Response Header.

Aktiviere die Debug-Informationen im Install Tool über das Preset „Debug" für den Betriebsmodus oder konfiguriere sie manuell:

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

Alternativ in der LocalConfiguration.php:

# /typo3conf/LocalConfiguration.php
$TYPO3_CONF_VARS['FE']['debug'] = '1';

Wichtige Performance-Kennzahlen

Achte bei deiner Analyse besonders auf diese Metriken:

TTFB (Time to First Byte): Sollte unter 200ms liegen
LCP (Largest Contentful Paint): Unter 2,5 Sekunden für gute Core Web Vitals
Gesamtladezeit: Idealerweise unter 3 Sekunden
Anzahl der HTTP-Requests: Je weniger, desto besser

Praxis-Tipp: Miss regelmäßig die Leistung deiner Seiten, um die Wirksamkeit einzelner Aktionen einschätzen zu können. Auf die Schnelle geht das auch in den Entwicklertools des Browsers (Netzwerkanalyse).

TYPO3 Caching: Die Grundlagen verstehen

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, sparst du erhebliche Ladezeit.

Das TYPO3 Caching-Framework

TYPO3 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 leistungsfähiges Caching-Framework, das diverse Backends und Frontends für unterschiedliche Caching-Anforderungen unterstützt.

Die wichtigsten Cache-Typen:

Pages Cache: Speichert fertig gerenderte Seiten
Core Cache: Kompilierter PHP-Code aus dem TYPO3-Core
Configuration Cache: Konfigurationsdateien
Fluid Template Cache: Kompilierte Fluid-Templates

Die Konfiguration erfolgt in der LocalConfiguration.php. Ausführliche Informationen zum Caching-Framework bietet die offizielle TYPO3-Dokumentation .

Serverseitiges vs. clientseitiges Caching

In TYPO3 kannst du sowohl serverseitiges als auch clientseitiges Caching beeinflussen:

Serverseitiges Caching speichert gerenderte Seiten auf dem Server. Bei erneuten Anfragen werden diese direkt ausgeliefert, ohne dass PHP-Code ausgeführt oder Datenbankabfragen durchgeführt werden müssen.

Clientseitiges Caching nutzt den Browser-Cache der Besucher. Ressourcen werden lokal gespeichert und müssen bei wiederholten Besuchen nicht erneut heruntergeladen werden.

Serverseitiges Caching optimal konfigurieren

Cache-Dauer intelligent 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 = 86400

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

Ein sinnvoller Default für die Cache-Dauer ist 86400 Sekunden (24 Stunden). Je nach Art und Inhalt der Seite können aber auch deutlich größere oder kleinere Werte sinnvoll sein.

Empfohlene Cache-Dauern nach Content-Typ:

Statische Seiten (Impressum, Über uns): 604800 Sekunden (7 Tage)
Standard-Content-Seiten: 86400 Sekunden (24 Stunden)
News-Bereiche: 3600 Sekunden (1 Stunde)
Hochdynamische Inhalte: 1800 Sekunden (30 Minuten)

Wichtig: Wird die Cache-Dauer im Backend gesetzt (in den Seiteneigenschaften im Reiter „Verhalten"), richtet sich TYPO3 danach und ignoriert die TypoScript-Konfiguration.

Dynamische Seitenbereiche vom Caching ausnehmen

Natürlich kannst du den Cache auch deaktivieren, etwa während der Entwicklung:

config.no_cache = 1

Im Normalbetrieb ist dies 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.

Lösungsansätze für dynamische Inhalte:

Option 1: COA_INT für ungecachte Bereiche

Um einzelne Seitenbereiche vom Caching auszunehmen, verwendest du den TypoScript-Objekttyp COA_INT:

# Beispiel: Warenkorb-Element, das immer aktuell sein muss
lib.dynamicCart = COA_INT
lib.dynamicCart {
    10 = USER_INT
    10 {
        userFunc = Vendor\Extension\UserFunctions\Cart->display
    }
}

Option 2: AJAX-Nachladen

Für optimale Performance solltest du dynamische Inhalte per AJAX nachladen. So kannst du die komplette Seite cachen und nur kleine Bereiche asynchron aktualisieren:

# Platzhalter für AJAX-Content
lib.dynamicContent = COA
lib.dynamicContent {
    10 = TEXT
    10.value = <div id="ajax-container" data-url="/api/content"></div>
}

Praxis-Tipp: Verwende ungecachte Objekte (USER_INT, COA_INT) sparsam. Jedes ungecachte Element erfordert PHP-Ausführung und Datenbankabfragen, was die Website Performance beeinträchtigt.

Static File Cache: Maximum Performance

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 in der erwähnten Cache-Tabelle, welche bei längerer Nutzung 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, kannst du deutlich kürzere Ladezeiten erreichen – oft unter 50ms TTFB.

Vorteile des Static File Cache:

Extrem kurze Antwortzeiten (bis zu 90% schneller)
Minimale Server-Last
Höhere Skalierbarkeit bei Traffic-Spitzen
Reduzierter Ressourcenverbrauch

Installation und Konfiguration:

Installiere die Extension über den Extension Manager
Konfiguriere die Extension im Backend
Die .htaccess-Regeln werden automatisch angepasst

Backend-Modul nutzen:

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.

Typische Gründe für nicht cachbare Seiten:

Frontend-User ist eingeloggt
Seite enthält USER_INT-Objekte
no_cache ist aktiviert
Nicht cache-fähige Extensions im Einsatz
POST-Requests oder Query-Parameter

Clientseitiges Caching effektiv einsetzen

Auch Clients, also insbesondere der Browser und auch Proxy-Caches wie Varnish, können Webseiten zwischenspeichern, wenn sie entsprechend konfiguriert sind. Dies ist besonders wichtig für wiederkehrende Besucher.

Browser-Cache über HTTP-Header steuern

Ob eine Seite gecacht werden soll, wird dem Client über verschiedene HTTP-Header mitgeteilt, zum Beispiel „Cache-Control: max-age" und Expires. In TYPO3 bestimmst du per TypoScript, dass entsprechende Header mitgesendet werden:

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

Diese Einstellung bewirkt, dass TYPO3 automatisch folgende Header sendet (sofern keine Backend- oder Frontend-Benutzer angemeldet sind):

Cache-Control: Steuert das Caching-Verhalten
Expires: Ablaufzeitpunkt für den Cache
Last-Modified: Zeitpunkt der letzten Änderung
ETag: Eindeutiger Identifier der Seitenversion

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

Varnish und CDN-Integration

Für Websites mit hohem Traffic empfiehlt sich der Einsatz eines Reverse-Proxy-Caches wie Varnish oder eines Content Delivery Networks (CDN). Diese Technologien cachen deine Inhalte in geografisch verteilten Rechenzentren und liefern sie von dem Ort aus, der dem Besucher am nächsten ist.

Frontend-Optimierungen für bessere Website Performance

Um die Ladezeiten deiner Seiten weiter zu reduzieren, solltest du auch die Dateigrößen der zu ladenden Ressourcen optimieren.

Bildoptimierung: Der größte Performance-Hebel

Die Komprimierung von Bildern ist essentiell, da Bilder bei den meisten Websites den Hauptanteil zur Gesamtgröße beitragen. Du kannst 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';

Eine JPEG-Qualität von 70-80 ist meist optimal: Für das menschliche Auge kaum vom Original zu unterscheiden, aber deutlich kleinere Dateigröße.

Automatische Optimierung beim Upload:

Alternativ optimierst du Bilder automatisch schon beim Upload, zum Beispiel mit den Extensions:

image_autoresize: Verkleinert zu große Bilder automatisch
imageoptimizer: Komprimiert Bilder mit Tools wie jpegoptim und optipng

Tipp: So einfach kannst du online Bilder komprimieren

CSS und JavaScript optimieren

CSS- und Javascript-Dateien kannst du im TypoScript-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

Wichtiger Hinweis: Die Concatenation (Zusammenfassung mehrerer Dateien) ist bei HTTP/2 nicht immer vorteilhaft, da HTTP/2 Multiplexing unterstützt. Teste beide Varianten.

Asynchrones Laden von JavaScript

Wenn du (externen) JavaScript-Code per IncludeJS(…) in deine Seiten einbindest, solltest du (ab TYPO3 CMS 7.1) nach Möglichkeit den Parameter „async" nutzen, damit der Browser den Code erst am Ende lädt:

page.includeJSFooter {
    analytics = EXT:your_extension/Resources/Public/Js/analytics.js
    analytics.async = 1
}

Dies verhindert, dass JavaScript das Rendering der Seite blockiert und verbessert die wahrgenommene Ladezeit erheblich.

Lazy Loading implementieren

Ä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.

Native Lazy Loading nutzen:

Moderne Browser unterstützen natives Lazy Loading ohne JavaScript:

lib.image = IMAGE
lib.image {
    file.width = 1200
    altText.field = title
    params = loading="lazy"
}

JavaScript-Bibliotheken:

Für ältere Browser kannst du JavaScript-Bibliotheken wie unveil.js, Lazy Load oder LazyLoad einsetzen. Diese bieten zusätzlich mehr Kontrolle über das Ladeverhalten.

Best Practices:

Lazy Loading für alle Bilder "below the fold"
Immer Height/Width-Angaben setzen (verhindert Layout Shifts)
Hero-Images und kritische Inhalte nicht lazy loaden

Erweiterte Performance-Strategien

Task Runner für Automatisierung

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 du das Komprimieren etc. in TYPO3 dann deaktivieren kannst.

// Beispiel: Gulp Task für CSS-Optimierung
gulp.task('styles', function() {
    return gulp.src('Resources/Private/Scss/**/*.scss')
        .pipe(sass())
        .pipe(cleanCSS())
        .pipe(gulp.dest('Resources/Public/Css'));
});

PHP OPcache aktivieren

PHP OPcache speichert kompilierten PHP-Code im Speicher und kann die Performance um 30-50% steigern:

; php.ini Konfiguration
opcache.enable=1
opcache.memory_consumption=256
opcache.interned_strings_buffer=16

Redis als Cache-Backend

Für große TYPO3-Installationen empfiehlt sich Redis als In-Memory-Cache-Backend statt der Standard-Datenbank-Lösung. Redis bietet deutlich schnellere Zugriffszeiten.

Checkliste: TYPO3 Performance systematisch optimieren

Arbeite diese Punkte der Reihe nach ab:

Grundlegende Optimierungen:

Cache-Dauer auf mindestens 86400 Sekunden setzen
Browser-Caching aktivieren (config.sendCacheHeaders = 1)
CSS/JS komprimieren und zusammenfassen
Bildqualität auf 70-80 optimieren

Fortgeschrittene Maßnahmen:

Static File Cache Extension installieren
Lazy Loading für Bilder implementieren
JavaScript asynchron laden
Performance regelmäßig messen

Monitoring:

Führe vor und nach jeder Optimierung Performance-Tests durch
Überwache die Core Web Vitals kontinuierlich
Analysiere die Auswirkungen auf Bounce Rate und Conversion Rate

Fazit: Website Performance als Erfolgsfaktor

Mit den richtigen Caching-Strategien kannst du die Website Performance deiner TYPO3-Installation drastisch verbessern. Die Investition in Performance-Optimierung zahlt sich mehrfach aus:

Bessere Google-Rankings durch optimale Core Web Vitals
Höhere Conversion Rates durch schnellere Ladezeiten
Reduzierte Server-Kosten durch effiziente Ressourcennutzung
Zufriedenere Besucher durch optimales Nutzererlebnis

Starte mit diesen drei Maßnahmen:

Aktiviere sofort Browser-Caching
Installiere Static File Cache für statische Seiten
Optimiere deine Bilder

Check regelmäßig die Performance deiner Seiten, um die Wirksamkeit einzelner Aktionen einschätzen zu können. Performance-Optimierung ist ein kontinuierlicher Prozess – aber jede Verbesserung zahlt sich direkt aus.

_{Titelmotiv: Bild von Gerd Altmann auf Pixabay}