Ich habe dieses Blog erst kürzlich aufgesetzt, und beim Testen war es ziemlich langsam. Dass mein Server in Frankreich steht und ich gerade in Nordamerika bin, erklärte einen Teil der Ladeprobleme, aber nicht alle. Das musste ich also beheben, und in diesem Beitrag zeige ich dir die 3 Quick Wins, mit denen ich TYPO3 schneller gemacht habe.
Ladezeit ist eine große Sache, und Nutzer haben heute (eigentlich war das schon immer so) keinerlei Geduld und warten nicht, bis eine Website geladen ist. Wenn sie nicht schnell genug ist, sind sie weg!
Deine Ladezeit messen
Bevor du irgendetwas reparierst, brauchst du aber harte Messwerte, um sicherzugehen, dass deine Änderung tatsächlich wirkt. Um an diese Zahlen zu kommen und herauszufinden, wie gut deine Seite performt, gibt es ein paar Werkzeuge, mit denen du deine Website testen kannst. Ein paar weit verbreitete Beispiele sind GTmetrix, Pingdom und Google PageSpeed.
Diese Werkzeuge geben dir einen ersten Einblick und sagen dir, wo deine größten Schmerzpunkte liegen.
Eine Warnung allerdings: Diese Werte sind sehr technisch, und du solltest sie mit Vorsicht lesen. Höhere Zahlen sind generell besser, aber es lohnt sich nicht immer, 100 % anzupeilen. Wenn du dir anschaust, wo die grundsätzlichen Probleme liegen, kannst du deine Geschwindigkeit enorm steigern und dabei einen vertretbaren Aufwand betreiben.
Du brauchst keinen 100/100/100/100-Score, damit deine Website schnell lädt.
Ich gehe hier nicht ins Detail, was diese Zahlen sind und was sie bedeuten. Für den Moment musst du nur wissen: höher ist besser, und du kannst diese Werkzeuge als Messinstrument neben deinem Bauchgefühl (oder der Entwicklerkonsole deines Browsers) nutzen.
TYPO3-Quick-Wins für mehr Tempo
Ich gehe hier nicht zu sehr ins Detail, denn es geht darum, dich schnell zu Ergebnissen zu bringen. Wenn du diese Tipps umsetzt und trotzdem Performance-Probleme hast, würde ich mir zuerst diese 3 Dinge anschauen.
- TYPO3-Caching
- Server-Performance
- Netzwerk
Server-Anpassungen
PHP-FPM
Darauf hast du vielleicht keinen Einfluss, aber fangen wir trotzdem ganz unten beim Server an. Wenn möglich, solltest du PHP-FPM statt mod_php nutzen. PHP-FPM gilt allgemein als schneller als mod_php. Einen guten Artikel zu dem Thema findest du hier.
Nginx
Höchstwahrscheinlich kannst du das nicht beeinflussen, wenn du keinen eigenen Server betreibst. Wenn doch, oder wenn dein Provider es zulässt, solltest du Nginx statt Apache als Webserver in Betracht ziehen. Nginx gilt als rund 2,5-mal schneller als Apache.
Ändere die oben genannten Dinge, wenn du kannst. Wenn nicht: Apache und mod_php sind völlig in Ordnung. Ich würde nur wegen dieser beiden Punkte nicht den Provider wechseln.
Apache und mod_php sind langsamer als Nginx und PHP-FPM, aber es ist absolut in Ordnung, ein TYPO3 damit zu betreiben.
TYPO3-Extensions
Es gibt 2 TYPO3-Extensions, die ich absolut empfehlen würde:
StaticFileCache
Die ist großartig! Sie erzeugt HTML-Dateien aus deiner Website, die an den Browser des Nutzers ausgeliefert werden, ohne dass überhaupt ein PHP-Skript anspringt. Das ist deutlich schneller, als TYPO3 den HTML-Code bei jedem Request erzeugen zu lassen.
Sie bringt außerdem ein nettes kleines Backend-Modul mit, in dem du siehst, welche Seiten gecacht wurden, wann sie ablaufen und welche Seiten bisher nicht gecacht sind.
Normalerweise wird eine Seite gecacht, wenn sie zum ersten Mal aufgerufen wird. Die erste Person, die die Website öffnet, hat also möglicherweise eine längere Ladezeit. Ich weiß nicht, ob es in TYPO3 einen Weg gibt, den Cache für alle Seiten zu erzeugen, aber ich habe einen kleinen Workaround. Ich nutze wget mit der Option --recursive, um einmal über jede Seite meiner Website zu laufen, und danach sind alle gecacht.
wget --recursive felix-dziekan.de
Hinweis: Die Standard-Cachezeit von StaticFileCache beträgt nur einen Tag. Für längere Caches solltest du den Boost-Modus aktivieren. Denk daran, dass du dann den TYPO3-Scheduler brauchst, um den Cache zu aktualisieren.
WebP
WebP ist eine coole kleine Extension, die von allen Bildern, die du hochlädst, WebP-Kopien erzeugt. Kurz gesagt: WebP ist ein Dateiformat, das von Google entwickelt wurde und JPG/PNG/GIF usw. ersetzen soll.
Das heißt kleinere Bilder, bessere Kompression und damit schnellere Ladezeiten. Die Einrichtung ist etwas fummelig, aber die Arbeit wert!
Oben siehst du, dass die WebP-Kopien etwas kleiner sind als die Originale. Viel ist das vielleicht nicht, aber wenn du viele Bilder hast oder eine langsame Mobilverbindung vorliegt, kann das für deinen Nutzer den Ausschlag geben.
TypoScript
Bei TypoScript gibt es ein paar Dinge, die du tun kannst:
- Stell sicher, dass alles, was am Ende der Seite geladen werden kann, auch dort geladen wird.
- CSS und JS komprimieren
- CSS und JS zusammenfassen
Hier ist die Konfiguration, mit der ich all das mache.
JS am Ende laden
page.includeJSFooter{
bootstrap = EXT:typo3_blogs/Resources/Public/JavaScript/bootstrap.min.js
}
CSS und JS komprimieren und zusammenfassen
page.config {
concatenateCss = 1
concatenateJs = 1
compressCss = 1
compressJs = 1
}
Damit das funktioniert, musst du allerdings noch ein paar Dinge tun:
1. Stell sicher, dass mod_deflate für Apache bzw. das gzip-Modul für Nginx installiert und aktiviert ist.
2. Pass deine .htaccess an
<FilesMatch "\.js\.gzip$">
AddType "text/javascript" .gzip
</FilesMatch>
<FilesMatch "\.css\.gzip$">
AddType "text/css" .gzip
</FilesMatc>>
AddEncoding gzip .gzip
3. Setz das Kompressionslevel
Das kannst du entweder über das TYPO3-InstallTool machen oder manuell in deiner LocalConfiguration.php setzen.
$GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9;
$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9;
Allgemein
Natürlich gibt es noch viele weitere Performance-Stellschrauben, die du angehen kannst: Bilder richtig dimensionieren, Lazy Loading, srcset-Tags usw.
Da die aber nicht spezifisch für TYPO3 oder auch nur PHP sind, lasse ich sie hier erst mal weg. Vielleicht mache ich noch einen Beitrag darüber, wie man das mit TYPO3 umsetzt, aber für heute sollte das reichen.