30 Tipps und Tricks für die verbesserte Geschwindigkeit Ihrer TYPO3 Website

Viele Website-Betreiber und TYPO3-Administratoren sind mit Ladezeit und Performance der eigenen TYPO3 Internetseite nicht zufrieden. Aus diesem Grund lohnt es sich ein wenig Zeit zu investieren und sich näher mit dem Thema Performance-Optimierung für TYPO3 auseinander zusetzen.

Warum müssen TYPO3 Webseiten optimiert werden?

Es ist durch diverse Studien belegt und mittlerweile fast allgemein bekannt, dass Internetnutzer eine Website mit hoher Wahrscheinlichkeit noch während dem Laden wieder verlassen, wenn die Ladezeit mehr als drei Sekunden beansprucht. Braucht Ihre Seite länger als drei Sekunden, gehen Ihnen durch eine erhöhte Absprungrate unter Umständen wertvolle Leads oder Umsätze verloren.

Darüber hinaus ist für Google und Co. die Ladegeschwindigkeit einer Internetseite (Pagespeed) ein wichtiges Ranking-Kriterium. Webseiten, die lange Ladezeiten aufweisen, werden in den Suchergebnissen der Google-Suche benachteiligt und herabgestuft. Auch in diesem Fall gilt: Wer bei Google schwer zu finden ist, muss mit Umsatzeinbußen rechnen.

Diese beiden Aspekte verdeutlichen, dass es immer sinnvoll ist, einen Blick auf die Kennzahlen zu werfen und bei Bedarf Zeit und Arbeitsleistung in die Performance-Optimierung der TYPO3 Website zu investieren.

Die Analyse Ihrer TYPO3 Anwendung

Um eine Website effektiv optimieren zu können, muss zunächst konkret festgestellt werden, wie die betreffende Website performt und wo Schwachstellen vorliegen. Das geht am besten mit speziellen Tools. Diese sind online und oft kostenlos verfügbar.

Google stellt bspw. mit den Page Speed Insights ein bekanntes Tool zur Verfügung. Weitere Tools sind bspw. Webpagetest oder Pingdom Tools. Achten Sie bei den letztgenannten alternativen Angeboten bitte unbedingt auf den Standort der Server, die den Test durchführen. Stehen diese beispielsweise in Asien oder in Nord-Amerika, werden die Ergebnisse völlig verfälscht und fallen mit Sicherheit negativ aus. Nutzen Sie den Standort, der Ihnen und Ihren Kunden bzw. Website-Besuchern am nächsten liegt.

Alternativ können Sie für die Ermittlung von Ladezeiten auch die Entwickler-Werkzeuge der Browser nutzen. Alle aktuellen Browser bieten solche Hilfsmittel an.

So optimieren Sie die Performance Ihrer TYPO3 Webseite

TYPO3 Konfiguration

Tipp 1: TYPO3-Cache aktivieren

Ein einfacher Tipp, der zu einer schnelleren Ladezeit der Webseite beiträgt, ist die Aktivierung des internen Caching-Systems von TYPO3. Die gesamte Webseite wird zwischengespeichert und falls es keine Neuerungen gegeben hat, schnell aus dem Cache zur Verfügung gestellt. Das führt zu einer schnelleren Bereitstellung der Seite.

Achten Sie darauf, dass unerfahrene Entwickler es gelegentlich versäumen, den Cache nach der Fertigstellung der TYPO3 Website wieder zu aktivieren.

Mit diesem einfachen TypoScript-Befehl wird die Seite aus dem Cache geladen, anstatt sie komplett neu zu erstellen:

config.no_cache=0

Tipp 2: Optimieren des TYPO3-Caches

TYPO3 wird mit mehreren Caching Systemen ausgeliefert. Die Hauptunterscheidung dieser Systeme besteht darin, wo die Daten zwischengespeichert werden. Caching kann entweder im Dateisystem, in der Datenbank, auf einem separaten Caching Server geschehen. Die schnellsten Caching Systeme haben die Gemeinsamkeit, dass diese Daten im RAM speichern. Dies ist in der Regel der Ort, an dem ein Server die höchste Lesegeschwindigkeit aufweist.

Standardmäßig wird TYPO3 mit Datei- und Datenbank Caching-Lösungen ausgeliefert. TYPO3 kann aber auch mit Redis, Memcached oder Elastic Search verwendet werden. Diese Dienste speichern die Daten vorwiegend im RAM des Servers.

Im Gegensatz zu Memcached kann Redis als Hybrid angesehen werden. Es speichert die Daten zusätzlich im Dateisystem ab. Aufgrund der Tatsache, dass der RAM des Servers nach einem Neustart gelöscht wird, kann Redis die Daten so nach einem Neustart direkt wieder ausliefern und auch als persistenter Speicher genutzt werden.

Wird ein Datenbank basiertes Cache System eingesetzt, besteht weiteres Optimierungspotenzial in der Konfiguration der Caching-Tabellen. Standardmäßig werden alle Caching-Datensätze "für immer" in den Caching-Tabellen von TYPO3 aufbewahrt. Dies verringert die Leistung der Datenbankabfragen an die Zwischenspeichertabellen, da die Tabellen mit der Zeit wachsen. Die Lösung besteht darin, einen Scheduler-Task zu erstellen und zu aktivieren, der diese Tabelle von alten Einträgen bereinigt.

Tipp 3: Statisches Datei-Caching

Neben dem internen TYPO3-Cache lohnt je nach Anwendungsfall auch der Blick auf die Extension staticfilecache, die als Fork die alte ursprünglich weit verbreitete Extension „nc_staticfilecache“ ersetzt.

In TYPO3 geschieht beim Aufruf vonseiten relativ viel unter der Haube. Insbesondere die teils sehr komplexen SQL-Abfragen können die Auslieferung vonseiten verlangsamen. Eine sehr effektive Lösung für dieses Problem bietet die o.g. Extension. Damit werden Seiten als statische Variante in das interne typo3temp-Verzeichnis abgelegt. Über Weiterleitungen werden diese statischen Seiten aufgerufen. Dieses Vorgehen ermöglicht deutlich verkürzte Ladezeiten.

Tipp 4: Bildoptimierung

Eine der Hauptursachen für langsame Webseiten ist die fehlende Komprimierung von großen Bilddateien. Sie können Bilder, die sie in Ihre TYPO3-Website hochladen, vorher komprimieren.

Speichern Sie Ihre Bilddateien im Format WebP oder JPG ab. Letzteres ist in den meisten Fällen eines der Formate mit der höchsten Komprimierungsrate. Es gibt Ausnahmen, in denen die gleiche Bilddatei als PNG kleiner gerechnet werden kann, primär sollte PNG aber nur dann verwendet werden, wenn Transparenzen mit in einer Grafik abgespeichert werden sollen.

Achten Sie bei WebP in jedem Fall auf die Verbreitung und Browser-Unterstützung. Vom Komprimierungsgrad bzw. dem Verhältnis von Dateigröße und -Qualität ist WebP dem JPG-Format überlegen. Wenn ältere Browser unterstützt werden müssen, ist WebP nur über mehr oder minder schöne Polyfills nutzbar.

Unabhängig vom Format sollten alle Bilder vor dem Upload optimiert werden. Wir empfehlen hierzu das Tool ImageOptim.

Die Dateien können ebenfalls direkt in TYPO3 auf das gewünschte Format beschnitten werden. Dies geht über die Fluid Template Engine in TYPO3 spielend einfach. Nutzen Sie einfach den Image ViewHelper in Kombination mit Breiten- und Höhenangaben, die zusätzlich mit einem "c" versehen sind. Das "c" steht für "crop" und beschneidet die Bilder auf die gewünschten Abmessungen.

<f:image src="fileadmin/user_upload/bild.jpg" alt="Alt-Text" width="250c" height="250c" />

Eine Alternativ stellt die inline Deklaration dar:

<img src="{f:uri.image(image: file, width: '250c', height: '250c')}" alt="Alt-Text">

Zusätzlich können Sie die Bildqualität auch direkt über das InstallTool bzw. der neuen System-Maintenance-Area mit folgender Angabe anpassen:

[GFX][jpg_quality] = 70
[GFX][gif_compress] = true

Ein weiteres Feature für die Optimierung von Bildern sind die sog. cropvariants. Hiermit lassen sich in TYPO3 responsive Bilder umsetzen. Die mit den cropvariants fest definierten Bild-Abmessungen können innerhalb von Templates in die entsprechenden HTML picture-Elemente oder srcset-Attribute integriert werden.

Tipp 5: Zusammenführen von CSS- sowie JavaScript-Dateien

Um die Anzahl der zu ladenden Dateien (sogenannte HTTP Requests) zu reduzieren, sollten CSS und JS (JavaScript) Dateien gebündelt werden.

In unserer Agentur setzen wir hierzu auf Webpack. Webpack ist ein Open-Source Build Tool für die moderne Frontendentwicklung effektive Workflows. Über die TypoScript-Konfiguration wird dann nur eine kompilierte, minimierte und gebündelte CSS bzw. JS Dateien eingebunden.

Alternativ bietet TYPO3 eine Funktion an um alle CSS- und JavaScript-Dateien automatisiert zusammenzuführen. Dazu müssen folgende TypoScript-Konfigurationen gesetzt werden:

config.concatenateJs = 1
config.concatenateCss = 1

Tipp 6: Bilder in Sprites zusammenfassen

Anders als bei CSS oder JavaScript ist es schwieriger, Bilder in einer einzigen Datei einzufügen. HTML ist dem Grunde nach nicht darauf ausgelegt, viele Bilder aus einer bestimmten Ressource zu beziehen.

Es gibt allerdings zwei Möglichkeiten:

1. Icons oder andere vektorbasierte Grafiken können über sogenannte SVG-Sprites in einem SVG gebündelt werden und zum Einbinden über eine ID referenziert werden.
2. Mittels CSS lässt sich das bei systemrelevanten Grafiken dennoch einfach umsetzen. Beispielsweise können Icons hervorragend zusammengefasst werden. Mit der CSS-Anweisung background-position werden die Daten wieder in einzelne Bilder aufgeteilt. Die Verwendung von CSS-Sprites sollte jedoch stets wohlüberlegt sein, da sich der Aufwand nicht immer lohnt.

Tipp 7: Deaktivieren Sie TYPO3-Logs

Bei der Entwicklung einer Website ist es sehr praktisch, mehrere Protokollierungs- und Debugging-Möglichkeiten zur Verfügung zu haben. Nach dem Livegang sollte dies nicht erforderlich sein, da zuvor alle Fehler aufgespürt und korrigiert werden sollten.

Das Deprecation-Log ist das einzige Log, das in vielen TYPO3-Websites aktiviert ist. Es kann sehr schnell wachsen, insbesondere wenn die Website mit vielen Anfragen konfrontiert wird und Erweiterungen mit veralteten Funktionen verwendet werden.

Jeder Aufruf einer veralteten Funktion führt zu einer Schreibaktion im Dateisystem. Wir haben in der Vergangenheit schlecht gewartete Fremdsysteme im Zuge von Support- und Aktualisierungs-Anfragen gesehen, die abgestürzt sind, weil kein Speicherplatz mehr auf dem Server zur Verfügung stand. In einem konkreten Beispiel TYPO3-System war das Deprecation-Log auf 20 GB angewachsen und hatte damit Webhostingpaket ans Limit gebracht. Das sollte nicht passieren und kann mit wenig Aufwand verhindert werden!

Für TYPO3 8.X wurde das Deprecation-Log vollständig neu geschrieben und die Anforderungen werden jetzt in der Datenbank erfasst. Das macht es weniger sichtbar, aber trotzdem schädlich.

Im InstallTool bzw. der neuen System-Maintenance-Area können die folgenden Optionen gesetzt werden, um die Protokollierungs- und Debugging-Ausgabe zu reduzieren:

[SYS][exceptionalErrors]=4096
[SYS][belogErrorReporting]=30711
[SYS][systemLogLevel]=3

Tipp 8: Automatisierte Wartung über den TYPO3-Scheduler

DieGröße der Datenbanktabellen "sys_log" und "sys_history" können die Ladegeschwindigkeit ebenfalls negativ beeinflussen. Je größer sie werden, desto mehr Zeit benötigen die Anforderungen für diese Tabellen. Wie beim Deprecation-Log und den Caching-Tabellen können diese Tabellen im Hintergrund unbemerkt sehr groß werden. Glücklicherweise gibt es die TYPO3 Scheduler-Tasks, die diese Tabellen bereinigen. Sie werden alle Datensätze löschen, die älter als ein bestimmter Zeitraum sind. Diese Periode wird in der Scheduler-Task selbst festgelegt. Zur Einrichtung des Scheduler-Tasks wird ein Cronjob benötigt. Dieser kann minütlich ausgeführt werden. TYPO3 entscheidet dann, ob und welche Aufgabe durchgeführt wird.

Tipp 9: Kompression von TYPO3 Front- und Backend

Durch die Komprimierung der Assets kann die Größe der zwischen dem Server und dem Browser ausgetauschten Daten drastisch reduziert werden.

Der Konfiguration dazu kann über das Install Tool bzw. der neuen System-Maintenance-Area aufrufen werden oder direkt in der Konfigurationsdatei eingetragen werden:

[BE][compressionLevel] = 9
[FE][compressionLevel] = 9

Möglich sind Werte zwischen 1 und 9 für die Definition des Kompressionsgrades.

Tipp 10: TYPO3 und Extensions regelmäßig aktualisieren

Ein regelmäßig und sorgfältig gewartetes TYPO3-System ist eine weitere Grundvoraussetzung für gute Performance.

Systemaktualisierungen sind innerhalb der LTS (Long-Term-Support) Versionen in der Regel problemlos möglich. Sorgen Sie dennoch für aktuelle Backups und sichern Sie Ihr Dateisystem sowie die Datenbank bevor Sie Updates einspielen.

Durch regelmäßige Updates werden Sicherheitslücken geschlossen, was u.a. der fortwährenden und zuverlässigen Erreichbarkeit der Seite zugutekommt.

Sollten Sie über entsprechende Kenntnisse verfügen, empfehlen wir zudem die Installation und Wartung von TYPO3 über composer. Wenn Sie mit mehreren Personen an der Website arbeiten, empfiehlt sich eine Versionsverwaltung wie bswp. git.

Tipp 11: TypoScript Code-Optimierung

Generell gilt, das TypoScript so einfach wie möglich zu halten und sich an allgemeingültige Konventionen zu halten. Insbesondere "if"-Bedingungen können die Leistung erheblich beeinträchtigen. Sie benötigen viel Zeit zum Rendern und erhöhen die benötigte Cache-Größe exponentiell.

Auch wenn uns als Entwicklern die Rückverfolgbarkeit in git-Commits gefällt, könnte es die bessere Entscheidung sein, die eine oder andere Bedingung in die Datenbank zu schreiben. Beispiele sind PIDinRootline, PIDupInRootline oder TreeLevel.

Die Inhaltsobjekte COA_INT und USER_INT sind als nicht zwischengespeicherte Aktionen oben ungültig. Sie verhindern das Caching über die o.g. statischen Datei-Caches und zwingen TYPO3 in eine zweite Rendering-Runde.

Allgemeine Konfiguration

Tipps 12: HTTP-Requests reduzieren

Die Übersendung weniger HTTP-Anfragen an den Server kann die Ladezeiten Ihrer Website zusätzlich verbessern. Die HTTP-Expire-Header werden in TYPO3 optimiert gesetzt. Außerdem werden die Expire-Header für statische Dateien wie JavaScript, CSS sowie Grafiken auf einen hohen Wert festgelegt. Dies bedeutet, dass Dateien, die eher selten von Änderungen betroffen sind, möglichst lange gecached werden sollen. Google empfiehlt für Grafik-Dateien bspw. einen Wert von einem Jahr.

Nicht erforderliche HTTP Requests werden dadurch vermieden. Sollten Sie das http2-Protokoll verwenden können, spielen vermehrte Requests eine nur noch untergeordnete Rolle, da Anfragen parallel abgearbeitet werden können.

Tipp 13: Prefetch, Preconnect und Preload

Prefetch löst den Domainnamen zu der dazugehörigen IP-Adresse vorzeitig auf und speichert diesen im Zwischenspeicher. Damit können spätere Abfragen auf diese Domain schneller durchgeführt werden können.

<link rel="dns-prefetch" href="//fonts.googleapis.com">

Preconnect ermöglicht es dem Browser, bereits eine Verbindung aufzubauen. Dies kann u.a. beim Einsatz von CDN Servern sinnvoll sein.

<link rel="preconnect" href="//cdn.beispiel-domain.de">

Preload lädt eine Ressource unmittelbar herunter. Dies kann u.a. beim Einsatz von externen Fonts zu einem erheblichen Performance-Gewinn führen.

<link rel="preload" href="https://fonts.googleapis.com/css?family=Font+Name:400,700" as="style">

Wird Preload im Zusammenhang mit Google Fonts verwendet müssen zwei Dinge unbedingt beachtet werden. Zum einen muss das as="style" Attribut zwingend verwendet werden. Des Weiteren darf der Font nicht innerhalb einer CSS Datei über eine @import Anweisung geladen werden, sondern sollte als Stylesheet im <head> platziert werden. In mehreren Projekten konnten wir hiermit mehr als 100ms Renderzeit einsparen.

Tipp 14: CSS an den Anfang und JavaScript in den Footer verschieben

JavaScript Dateien können an das Ende einer Seite verschoben werden. Es genügt, wenn sie am Schluss des Ladevorgangs geladen werden. Das geht wie folgt:

config.moveJsFromHeaderToFooter = 1

page = PAGE
page.includeJSFooter {
    test = fileadmin/test.js
}

Handelt es sich um eine bestehende TYPO3 Website, sollte nach der Umstellung unbedingt ein Funktionstest, ein Scan von JavaScript Fehlern aller Seiten und Funktionen (Formular etc.) durchgeführt werden. Wurde z.B. im Inhaltsbereich ein Skript verwendet welches erst im Footer eingebunden wird, kann dies zu unerwünschten JavaScript Fehlern und im schlimmsten Fall einem kompletten Ausfall des Frontends führen.

Infrastruktur Konfiguration

Tipp 15: Wählen Sie einen guten Hosting Service

Die Wahl eines guten Hosting-Anbieters ist essenziell für die Geschwindigkeit Ihrer Website. Auch sind einige der in dieser Liste aufgeführten Tipps und Tricks ohne ein geeignetes Hosting nicht realisierbar. Legen Sie also Wert auf einen zuverlässigen sowie schnellen Server bzw. ein ausreichend leistungsfähiges Webspace-Paket. Sparen Sie nicht am falschen Ende, denn gerade die Einsteigerpakete sind nicht dafür ausgelegt, eine performante TYPO3-Website zu hosten. Wir raten Ihnen zu spezialisierten Hosting-Anbietern, die Ihre Pakete entsprechend der technischen Anforderungen zusammenstellen.

Leistungsbestandteile, auf die wir Wert legen sind u.a. ein Shell-Zugang per SSH oder zumindest ein SFTP-Login. Außerdem sollte ein kostenloses SSL-Zertifikat und aktuelle MySQL und PHP-Versionen unterstützt werden. Gerade bei TYPO3-Websites ist es auch sinnvoll, wenn Sie Einfluss auf bestimmte Werte in der PHP-Konfiguration (php.ini) nehmen können (siehe Tipp 22 und 24).

Tipp 16: Verwenden Sie ein Content Delivery Network (CDN)

Content Delivery Networks (CDNs) haben Webhosting in den letzten Jahren revolutioniert. Anstatt das Hosting Ihrer Website auf einem einzigen Server zu betreiben, können Sie die Dateien verteilen und laden diese über mehrere Systeme.

Es gibt eine Reihe von kostenlosen und kostenpflichtigen CDN-Anbietern wie bspw. die Lösungen von Amazon (AWS), Google (Cloud Platform), Microsoft (Azure) und vielen Weiteren. Grundsätzlich haben wir hier die Erfahrung gemacht, dass die Kosten hierfür verschwindend gering sind. Bevorzugt setzen wir bei unseren Projekten auf die umfangreichen CDN- und Cloud-Lösungen von Amazon.

Tipp 17: Vermeiden Sie TYPO3-Mountpoints

Mountpoints stellen im TYPO3-Kontext einen Seitentypen dar. Dieser wird dazu verwendet, um einen kompletten Seitenbaum unterhalb einer anderen Seite zu "mounten". Bei der Darstellung eines Mega Menüs kann dies zu mehreren tausend zusätzlichen MySQL Queries und damit zu erheblichen Performance-Problemen führen. Wenn möglich sollten Sie daher auf den Einsatz von Mountpoints weitestgehend verzichten.

Tipp 18: Vermeiden Sie unnötige Weiterleitungen

Versuchen Sie, unnötige 30x-Weiterleitungen und verkettete Umleitungen aufgrund einer Fehlkonfiguration in der .htaccess-Datei zu vermeiden. Dieser Missstand kann mit Tools wie: httpstatus.io oder Ryte sehr gut getestet werden. Tragen Sie dazu Ihre URL ein und schauen Sie, ob es mehrere Weiterleitungen gibt, bis die Seite dargestellt wird. Beim Testen sollten verschiedene Kombinationen ausprobiert werden.

http://beispiel-domain.de
https://beispiel-domain.de
http://beispiel-domain.de/
https://beispiel-domain.de/
http://beispiel-domain.de/index.php
https://beispiel-domain.de/index.php
http://www.beispiel-domain.de
https://www.beispiel-domain.de
http://www.beispiel-domain.de/
https://www.beispiel-domain.de/
http://www.beispiel-domain.de/index.php
https://www.beispiel-domain.de/index.php

Tragen Sie hier Ihre Domain ein und prüfen Sie, ob alle Aufrufe keine oder max. eine Weiterleitung aufweisen. Sollten mehrere Weiterleitungen stattfinden, handelt es sich höchstwahrscheinlich um eine nicht optimale Apache- oder NGINX-Konfiguration und sollte geprüft und behoben werden.

Ein Klassiker, der über die Jahre zu einer gängigen (schlechten) Praxis bei TYPO3-Entwicklern wurde, ist das Weiterleiten der Startseite mittels Seitentyp „Verweis“ (Shortcut) auf die erste Unterseite, die dann als Startseite gepflegt wird. Dies hat Vorteile bei der Menü-Ausgabe, ist aber mit einem fundamentalen Nachteil verbunden: Jede Seite, die per Shortcut weitergeleitet wird, erhält den Status-Code 307.

Der Status-Code 307 vermerkt eine temporäre Weiterleitung. Es handelt sich hierbei also nur um eine vorübergehende Weiterleitung und keine dauerhafte. Im o.g. Beispiel ist es aber eindeutig eine dauerhafte Weiterleitung und der Status-Code ist somit grundsätzlich falsch gewählt. Dieses aus unserer Sicht schwerwiegende Problem wurde unter TYPO3-Entwicklern häufiger diskutiert, aber nie zufriedenstellend behandelt.

Schwerwiegend ist das Problem vor allem bei der Suchmaschinenoptimierung. Zu den absoluten Grundlagen zählt hier, dass permanente Weiterleitungen mittels Status-Code 301 umgeleitet werden. Dies ist der einzig richtige Status-Code für das o.g. Beispiel und nur auf diese Weise würde auch die sog. Linkkraft (Linkjuice) auf die Zielseite weitergegeben werden.

Verzichten Sie am besten gänzlich auf den Einsatz von Shortcuts als Weiterleitung zur Startseite. Nutzen Sie einfach den Seiten-Einstieg bzw. das Weltkugel-Symbol als Startseite.

Tipp 19: Gzip Komprimierung (.htaccess)

Gzip ist ein Datenkompressions-Algorithmus, der u.a. auf Webservern wie Apache oder Nginx zum Einsatz kommt. In dem Zusammenhang ist der große Vorteil naheliegend: Moderne Browser sind in der Lage, komprimierte Webseiten oder sonstige darzustellende Inhalte während des Renderings zu entpacken.

Mit Gzip-Komprimierung können bis zu 75 % der ursprünglichen Dateigröße, in Einzelfällen sogar bis > 80 % erreicht werden. Die Ladegeschwindigkeit Ihrer TYPO3 Webseiten kann dadurch erheblich gesteigert werden.

Aktivieren Sie dazu einfach die Gzip-Komprimierung in der .htaccess-Datei.

Tipps 20: Browser-Caching über die .htaccess-Datei nutzen (.htaccess)

Der entsprechende Code ist ab TYPO3 Version 7 standardmäßig in der .htaccess-Datei hinterlegt und muss u.U. nur aktiviert (Kommentarsyntax entfernen) werden.

Tipp 21: TTFB (Time to First Byte)

Google hat in den vergangenen Jahren das Thema Page Speed Optimierung fest in seinen Rankingfaktoren verankert. Dabei gibt es verschiedene Messpunkte beim Laden einer Website, welche im Folgenden kurz erläutert werden.

• Time to First Byte (TTFB): Dieser Wert bezeichnet den Zeitraum zwischen dem Aufruf einer URL bzw. Website und dem Ersten vom Webserver geladenen Byte.
• First Contentful Paint (FCP): Dieser Wert gibt an, wann im Browser zum ersten Mal ein Darstellungselement fertig gerendert wurde und angezeigt wurde.
• First Meaningful Paint (FMP): Diese Maßeinheit definiert sich als Zeitpunkt, an dem der Website Besucher das Gefühl hat, dass die Website fertig geladen wurde.
• Time to Interactive (TTI): Definiert den Zeitpunkt, wann die Website vollständig gerendert wurde und alle Funktionen für den Besucher zur Interaktion bereitstehen.

Dieser Artikel beschäftigt sich mit der Optimierung von TYPO3 dabei ist der TTFB Wert das wichtigste Merkmal und sollte am besten in regelmäßigen Abständen kontrolliert werden.

Die anderen drei Messpunkte sind vorwiegend Optimierungen der Frontend Technologien CSS/JS und anderer Ressourcen wie Bilder etc. Auf ein paar Maßnahmen wird in den anderen Tipps eingegangen.

Tipp 22: Unterbinden Sie Hotlinking

Damit das Hotlinking, das direkte Einbinden von Grafiken von Webseiten von extern ausgeschlossen wird, muss der folgende Code in die .htaccess-Datei eingebunden werden:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?beispiel-domain.de [NC]
RewriteRule \.(webp|svg|jpg|jpeg|png|gif|zip|pdf|js|)$ - [F]

Die Liste der unterbundenen Dateitypen kann nach Belieben angepasst werden.

Alternativ gibt es die Möglichkeit einen alternativen Inhalt für Bilddateien auszuliefern. Dazu kann der folgende Code verwendet werden:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)beispiel-domain.de/.*$ [NC]
RewriteRule \.(webp|svg|jpg|jpeg|png|gif)$ http://www.beispiel-domain.de/fallback.svg [R,L]

Tipp 23: Reverse Proxies

Reverse-Proxys reduzieren die Last des Webservers durch Zwischenspeichern von dynamisch generierten Inhalt. Ein gutes Beispiel für einen Reverse-Proxy-Server ist Nginx.

Tipp 24: Webserver optimieren

Wenn Sie wie eingangs erwähnt, ein gutes Hosting-Paket besitzen, sollte es kein Problem sein, Einfluss auf die PHP-Einstellungen zu nehmen. Schauen Sie hierzu nach der php.ini Datei. Bei manchen Providern können Sie die PHP-Konfiguration auch direkt in der Online-Verwaltung Ihres Webspaces bearbeiten. Folgende Werte sollten in Ihrer Konfiguration mindestens hinterlegt sein:

memory_limit=256M
max_execution_time=40
max_input_vars=1500
post_max_size=50M
upload_max_filesize=50M

Des Weiteren empfiehlt sich der Einsatz von OPcache im Produktionsbetrieb. Dazu nutzen wir folgende Einstellungen:

opcache.enable=1
opcache.memory_consumption=192
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=10000
opcache.revalidate_freq=0
opcache.validate_timestamps=0
opcache.save_comments=0
opcache.fast_shutdown=1

Diese Konfiguration löscht den OPcache nur über manuelle Eingabe. Denken Sie also daran, den OPcahe im Deployskript zu erneuern.

Die Konfiguration max_accelerated_files ist hierbei auf 10.000 Dateien gesetzt, sollte aber der Anzahl an php Dateien in Ihrem Projekt entsprechen. Über den Befehl folgenden Shell Befehl lässt sich die Anzahl schnell und zuverlässig ermitteln:

find . -type f -print | grep php | wc -l

Tipp 25: Datenbankserver optimieren

Wenn Sie Zugriff auf die MySQL Konfiguration haben, lohnt ein Blick auf folgende Einstellungen.

"innodb_buffer_pool_size": Dies ist einer der wichtigsten Konfigurationen, die bei fast jeder Installation einer MySQL InnoDB Datenbank zu beachten ist. Diese Einstellung regelt die Größe des Zwischenspeichers, in welchem die Daten und Indizes im RAM ausgelagert werden. Dies ermöglicht einen schnelleren Lesezugriff effizienter Queries. Je größer dieser Wert ist, desto mehr Daten werden dort vorbehalten. Einen Richtwert können wir an dieser Stelle leider nicht geben, da es von der verwendeten Hardware, der anderen Prozesse auf dem Server und Architektur abhängig ist. Handelt es sich um einen separaten Datenbankserver, kann man sich jedoch an der "80 % Regel" orientieren. Diese Regel besagt, dass 80 % des insgesamt zur Verfügung stehenden RAMs genutzt werden kann.

80 % ist aus unserer Sicht ein guter Anfang und eine Faustregel. Sie sollten jedoch sicherstellen, dass der Server über ausreichend RAM für das Betriebssystem und die sonstigen Prozesse verfügt. Ist viel RAM verfügbar, kann dieser Wert jedoch auch auf 90 % oder sogar 95 % erhöht werden.

"innodb_log_file_size": Diese Konfiguration definiert die Größe des sogenannten Redo-Logs (Wiederherstellungsprotokolle). Dieser besteht in der Regel aus zwei oder mehr vorab zugewiesenen Dateien, in denen alle Änderungen gespeichert werden, die an der Datenbank vorgenommen wurden. Jeder Instanz einer MySQL-Datenbank ist ein Redo-Log zugeordnet, um die Datenbank im Falle eines Fehlers oder Absturzes zu schützen. Bis zu MySQL 5.5 war die Gesamtgröße für das Redo-Logs auf 4 GB beschränkt (Standardeinstellung: 2 Protokolldateien). Dies EInschränkung wurde jedoch in MySQL 5.6 aufgehoben.

Als Richtwert können Sie mit 512 MB starten. Dieser Wert definiert die Größe jeder Datei bei zwei Redo-Logs ist damit der benötigte Platz 1 GB. Hat Ihr Server genügend Platz, so kann dieser Wert auch auf 4 GB oder höher gesetzt werden.

"max_connections": Diese Einstellung regelt, wie viele parallele Verbindungen zur Datenbank aufgenommen werden können. Ein zu geringer Wert führt zu der Fehlermeldung "Too many connections". Bei dieser Einstellung gibt es leider keine Formel. Sie sollten Ihre Datenbank entsprechend den Anforderungen Ihrer Anwendung individuell anpassen.

In der Regel benötigen Server mit Anwendungen, ein paar hundert gleichzeitige Verbindungen. Kleine bis mittlere Websites können mit 100 bis 200 ausreichen gut auskommen.

In unseren Kundenprojekten verwenden wir Werte zwischen 400 und 1000. Dabei müssen wir zudem sicherstellen, dass ein die Serverkonfiguration open_files_limit entsprechend angepasst wird. Unter Linux ist dieser standardmäßig auf 1024 Dateien beschränkt. Dieser sollte deutlich erhöht werden und 8192 kann hier als Richtwert verwendet werden.

"query_cache_size": Der Query-Cache ist ein weiterer bekannter Engpass von MySQL Datenbanken. Dieser wird auch schon bei moderater Parallelität spürbar. Wir empfehlen hier diesen Wert von Anfang an auf 0 zu setzen. Dies ist seit MySQL 5.6 auch die Standardeinstellung. Die Nachträgliche veränderung dieses Werts kann jedoch negative Auswirkungen mit sich bringen, daher sollte beim deaktivieren auf einem bestehenden Server Vorsicht geboten sein.

"log_bin": Ist diese Einstellung aktiviert wird, muss mit einem deutlichen Performance-Verlust gerechnet werden. Daher sollte diese in den meisten Fällen deaktiviert sein. Aktivieren Sie diese Einstellung nur, wenn die Datenbank als Replikationsmaster verwendet werden soll. Dies ist der Fall, wenn Sie mehrere Datenbankserver in einem Cluster synchron verwenden möchten.

Tipps 26: Skalierungsproblem Datenbank

Im vorherigen Tipp wurden die MySQL EInstellungen optimiert. Aufseiten von TYPO3 bietet ebenfalls eine wichtige Einstellung Optimierungspotenzial.

Bei vielen parallelen Anfragen auf das TYPO3-System kann es zu Engpässen aufseiten der Datenbank kommen. Eine Aufstockung bzw. Update der Hardware (CPU und RAM) des separaten Datenbankservers oder des All-In-One Systems bringt dann nur noch bedingt etwas. TYPO3 erlaubt es an dieser Stelle persistente Datenbank Verbindungen zu unterbinden. Dies ist über die folgende Konfiguration im InstallTool bzw. der neuen System-Maintenance-Area möglich.

[SYS][no_pconnect]=1

Mit dieser Einstellung wird zwar ständig eine neue Verbindung aufgebaut, diese wird jedoch nach der Auslieferung direkt wieder geschlossen.

Tipp 27: Cluster-Architektur

Um die Last, auch bei sehr hohen Zugriffszahlen zu bewältigen, empfiehlt sich die vorzeitige Konfiguration einer Multi-Server-Architektur (Clusters). Ein Basis Setup könnte für den Start folgt aussehen:

• 1x Reverse Proxy als Load Balancer und SSL Beschleuniger (NGINX)
• 1x TYPO3 Webserver (Apache)
• 1x Datenbank und Cache Server (MySQL und Redis)

Entscheidet man sich für eine solche Konfiguration und erstellt man entsprechende Provisioning Skripte z.B. über Ansible lassen sich bei Besucher-Peeks auch mit geringem Aufwand oder je nach Konfiguration sogar automatisiert weitere Server hinzuschalten.

Tipp 28: Reduzieren Sie die Anzahl der TYPO3-Extensions

Deaktivieren Sie alle TYPO3-Erweiterungen, die auf Ihrer Website nicht erforderlich sind. Dies gibt einen weiteren kleinen Schub und schließt zugleich etwaige Sicherheitslücken durch veraltete Erweiterungen.

Grundsätzlich ist es empfehlenswert, TYPO3-Extensions nur anzuwenden, wenn Sie aktiv gepflegt und regelmäßig gewartet werden. Zudem sollten Sie vorab immer überlegen, ob der Einsatz einer Extension unbedingt notwendig ist. Jede Extension kann potenziell das System verlangsamen.

Tipp 29: 404-Fehler richtig konfigurieren

In Fällen, wo außergewöhnlich viele Redirects in der Serverkonfiguration abgelegt sind, kann die Performance leiden, da die Liste mit jedem Seitenaufruf interpretiert wird. Dies kann der Fall bei sehr umfangreichen Website-Neuerstellungen sein. Es sollen ja schließlich möglichst alle alten Inhalte auch unter der neuen Website-Struktur gefunden werden können.

Erstellen Sie aus diesem Grund eine gut strukturierte und für den Nutzer hilfreiche 404-Fehlerseite. Diese soll helfen, wenn doch mal ein Inhalt nicht gefunden werden kann. Diese Seite können Sie im TYPO3-System anlegen und verwalten.

Nutzen Sie für die Konfiguration von Fehlerseiten die ab TYPO3 9.0 verfügbaren Funktionen für das Site-Handling. Hier lassen sich über die Funktion Error Handling alle Fehlercodes behandeln und mit entsprechendem Verhalten versehen.

In älteren Installationen oder Alternativ erfolgt die Konfiguration von 404-Fehlerseiten über das InstallTool bzw. der neuen System-Maintenance-Area. Das geht wie folgt:

[FE][pageNotFound_handling] = '/404/'

Tipp 30: Defer order Async für JavaScript

JavaScript kann im Template in zwei Varianten vorkommen. Entweder wird JavaScript Inline über ein Script-Tag platziert oder es wird auf eine externe Skript-Datei verweisen. Im zweiten Fall können Script-Inhalte mittels des Attributes „async“ im Hintergrund heruntergeladen, ohne den Ladevorgang zu blockieren. Versuchen Sie Ihren Script-Dateien dieses HTML-Attribut anzuheften. Dies ist je nach Aufbau und Inkludieren der Scripte nicht immer möglich. Die Funktionstüchtigkeit sollte im Anschluss immer genau geprüft werden.

<script src="demo.js" async></script>

Anstatt des „async“ Attributes kann auch das „defer“ Attribut gesetzt werden. Dieses Attribut definiert, dass das Script erst ausgeführt werden soll, wenn die Seite fertig geladen ist.

Es sei zu beachten, dass beide Attribute nur eine Relevanz haben, wenn die Script-Tags im oder mitten im Inhalt eingebunden werden.

Wir haben zu diesem Thema einen separaten Blogbeitrag geschrieben: Quicktip: HTML5 async & defer Script Attribute.

Bonus Tipp: Weitere .htaccess Optimierungen

Das GitHub Projekt HTML5 Boilerplate umfasst eine Reihe an guten weiteren Apache Konfigurationen. Sehen Sie sich dazu am besten mal die .htaccess Konfigurationsdatei an. Die Kommentare sind sehr aussagekräftig, sodass Sie selbst entscheiden können, welche Maßnahmen für Sie ggf. noch infrage kommen.

Sollten Sie anstatt Apache einen NGINX Webserver für Ihre TYPO3 Installation einsetzen, gibt es vom gleichen Anbieter auch ein entsprechendes GitHub Repository.

Fazit

Es gibt viele Ansatzpunkte die Performance Ihrer TYPO3 Website deutlich zu steigern. Wir empfehlen sowohl die einmalige Analyse sowie die Einrichtung von Website Performance KPIs und regelmäßigen Checkups.

Wenn Sie Unterstützung bei der Performance-Optimierung für Ihr TYPO3 Website suchen, sind wir als TYPO3 Agentur genau der richtige Ansprechpartner.