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

Tipps und Tricks um die Geschwindigkeit Ihrer Typo3-Website zu optimieren

Viele Nutzer sind mit der Leistung ihrer TYPO3 Internetseite nicht zufrieden. Das gilt für alle Ansichten auf Endgeräten wie auf dem Desktop, Tablet oder Handy. Die Anforderungen an die Betreiber einer Webseite wachsen stetig an. Mit diesen einfachen Tipps und Tricks gelingt es, die Performance Ihrer TYPO3 Internetpräsenz deutlich zu steigern.

Müssen TYPO3 Webseiten optimiert werden?

Es ist wissenschaftlich erwiesen, dass Internetnutzer ein Webportal verlassen, das mehr als drei Sekunden benötigt, um alle Inhalte zu laden. Braucht Ihre Seite länger als drei Sekunden, gehen Ihnen durch eine erhöhte Absprungrate unter Umständen wertvolle Geschäftskontakte verloren. Bei einem Umsatzvolumen von 100.000 Euro im Jahr kann der Verlust durch verlorene Kunden immens sein. Im Weiteren hat Google den Pagespeed einer Seite zu einem der relevanten Rankingkriterium gemacht. Internetseiten, die lange Ladezeiten aufweisen, werden in den Suchergebnissen der Google Suche mehr und mehr herabgestuft. Doch wer bei Google schwer zu finden ist, muss mit weiteren Umsatzeinbußen rechnen. Daher lohnt es immer einen Blick auf die Performance-Kennziffern zu werfen und bei Bedarf Zeit und Arbeitsleistung in die Performance-Optimierung der TYPO3 Website zu investieren.

Die Analyse Ihrer TYPO3 Anwendung

Zunächst ist es wichtig, festzustellen, welche Geschwindigkeit die Website aktuell hat. Das geht am besten mit speziellen Tools. Diese sind oft online und kostenlos verfügbar. Google stellt mit den „Page Speed Insights“ (developers.google.com/speed/pagespeed/insights) eine Möglichkeit zum Testen des Pagespeeds zur Verfügung. Weitere Tools sind auf Pingdom tools.pingdom.com oder pagespeed.de zu finden. Achten Sie bei alternativen Angeboten unbedingt auf den Standort der Server, die den Test durchführen. Stehen diese beispielsweise in Asien oder in Nord-Amerika, werden die Ergebnisse deutlich verfälscht.

So optimieren Sie die Performance Ihrer TYPO3 Webseite

Tipp 1: Wählen Sie einen guten Hosting Service

Bei der Wahl des richtigen Serviceproviders sollten Sie bereits darauf achten, dass Sie einen zuverlässigen sowie schnellen Server erhalten. Denn die Zeit, welche der Server benötigt, um die Daten zur Verfügung zu stellen, kann sich negativ auf die Ladezeit der Webseite auswirken. Ein schneller Server bzw. einen gutes Hostingpaket zählt daher zu den Grundvoraussetzungen einer schnell ladenden TYPO3 Internetseite.

Tipp 2: TYPO3 regelmäßig warten

Ein gut gewartetes System ist eine weitere Voraussetzung für eine schnelle Performance. Die TYPO3 Webseite sollte daher immer auf dem aktuellen Stand gehalten werden. Durch regelmäßige Updates werden außerdem Sicherheitslücken geschlossen, was der fortwährenden Erreichbarkeit der Seite zugutekommt.

Tipp 3: 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 verbesserten Performance 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 schnell aus dem Cache geladen:

Config.no_cache = 0

Tipp 4: Statisches Datei Caching

TYPO3 enthält viele PHP Seiten sowie SQL-Abfragen, die für viele Seiten der Internetpräsenz immer wieder gerendert werden müssen. Diese werden nicht vom TYPO3 Caching erfasst.

Installieren Sie die statische Datei-Cache-Extension „nc_staticfilecache“. Dadurch werden statische Seiten schneller geladen.

Tipp 5: 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 Anwendung hochladen vorher in Photoshop, compressjpeg, compresspng, TinyPNG oder einem ähnlichen Tool komprimieren. Speichern Sie Ihre Bilddateien im Format JPG ab. Dieses ist eines der Formate mit der höchsten Komprimierungsrate.

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" />

Zusätzlich können Sie die Bildqualität auch direkt in der lokalen Konfigurationsdatei, die auch über das Install Tool zu finden ist, mit folgender Angabe anpassen:

$TYPO3_CONF_VARS ['GFX'] ['jpg_quality'] = '60';

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

CSS- sowie JavaScript-Dateien werden im Frontend mit folgendem TypoScript gebündelt:

config.concatenateJsAndCss = 1

Tipp 7 – Bilder in CSS-Sprites kombinieren

Anders als bei CSS sowie 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. 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. Bei Icons lohnt außerdem ein Blick auf das SVG-Format.

Tipp 8: Minify HTML

Mit der Extension „sourceopt“ kann der Quellcode optimiert werden, Zeilenumbrüche werden entfernt sowie überflüssige Anführungszeichen beseitigt. Das macht den Code schlanker und er kann schneller geladen werden.

Tipp 9: Kompression von TYPO3 Frontend sowie Backend

So funktioniert es:

Das Setup unter der Konfiguration im Install Tool aufrufen oder direkt in der Konfigurationsdatei einstellen

$GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 8;
$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 8;

Tipp 10: 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 so:

#Setup: Verschiebt alle JavaScript Elemente in den Footer
Config.moveJsFromHeaderToFooter = 1
#Setup: Einzelne Teile der JavaScripts in den Footer verschieben:
Page.includeJSFooter {
    Jquery = jquery.min.js
    Bootstrap = bootstrap.min.js
}

Tipp 11: Deaktivieren Sie TYPO3 Protokolle

Die vielen Protokolle, die von TYPO3 angelegt werden, sind zum größten Teil unnötig und können deaktiviert werden.

$TYPO3_CONF_VARS ['SYS'] ['syslogErrorReporting'] = '0';
$TYPO3_CONF_VARS ['SYS'] ['enableDeprecationLog'] = '0';
$TYPO3_CONF_VARS ['SYS'] ['belogErrorReporting'] = '0';
$TYPO3_CONF_VARS ['SYS'] ['no_pconnect'] = '1';
$TYPO3_CONF_VARS ['SYS'] ['sqlDebug'] = false;
$TYPO3_CONF_VARS ['SYS'] ['systemLogLevel'] = '4';
$TYPO3_CONF_VARS ['SYS'] ['no_pconnect'] = '1';
$TYPO3_CONF_VARS ['SYS'] ['enableDeprecationLog'] = '0';

Tipps 12: TypoScript Code Optimierung

Der TypoScript-Code kann mit einigen wenigen Schritten optimiert werden:

  • unnötigen TypoScript-Code entfernen
  • Die Verwendung von Backend Vorlagen vermeiden
  • Benutzerdefinierte Extensions verwenden, die über autoload verfügen

Tipp 13: Vermeiden Sie 301 Umleitungen

Versuchen Sie, unnötige 301-Weiterleitungen und verkettete Umleitungen in der .htaccess-Datei zu vermeiden.

Tipp 14: Verwenden Sie RewriteRule

Beispiel für eine RewriteRule-Anwendung:

# Weiterleitung von nicht-www zu www:
RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

Tipps 15: 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. Nicht erforderliche HTTP Requests werden dadurch vermieden. Sollten Sie das http2 Protokoll verwenden können, spielen vermehrte Requests eine nicht mehr so bedeutende Rolle, da sie parallel bearbeitet werden können.

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 CDNs von Google, Microsoft, Yahoo und anderen großen Web-Organisationen im Angebot.

Tipp 17: 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 potentiell das System verlangsamen.

Tipp 18: Gzip Komprimierung (.htaccess)

GZIP-Komprimierung spart 50 bis 80 Prozent Ihrer Bandbreite. Die Ladegeschwindigkeit Ihrer TYPO3 Webseite kann daher dadurch erheblich erhöht werden. Aktivieren Sie dazu einfach die GZIP-Komprimierung in der .htaccess-Datei.

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

Der entsprechende Code ist ab TYPO3 Version 7 standardmäßig in der .htaccess-Datei hinterlegt.

Tipp 20: TTFB

TTFB (Time to first byte) wird als Bezeichnung für die Messung der Reaktionsfähigkeit eines Webservers verwendet. Grundsätzlich ist es die Zeit, die der Browser benötigt, um die Daten zu empfangen, nachdem diese vom Server angefordert wurden. Der TTFB einer Website wird wie folgt berechnet:

TTFB = HTTP-Anforderungszeit + Prozessanforderungszeit + HTTP-Antwortzeit

Tipp 21: 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.

#.Htaccess

RewriteEngine on
RewriteCond % !^$
RewriteCond % !^http(s)?://(www\.)?IhreSeite.com [NC]
RewriteCond % !^http(s)?://(www\.)?zumbeispiel-google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Tipp 22: Keep Alive aktivieren

Der Befehl „connection: keep-alive“ ermöglicht das Laden verschiedener Dateien über eine Verbindung. Diese Verhaltensweise wird im http-Header definiert. Bei Nichtaktivierung von ‚keep-alive‘ ist der Header auf „connection: close“ eingestellt. Der Server schließt also die Verbindung, nachdem eine Datei heruntergeladen wurde. Ändern Sie den Header zu „connection: keep-alive“, bleibt die Verbindung offen. Als Folge können mehrere Daten heruntergeladen werden.

Tipp 23: 404 Fehler richtig einstellen

Erstellen Sie eine sinnvolle 404 Fehlerseite. Diese können Sie im TYPO3-System anlegen und verwalten. Wichtig ist aber, dass diese Seite im Install Tool als Fehlerseite definiert ist. Das geht wie folgt:

#TYPO3conf/LocalConfiguration.php;

$GLOBALS['TYPO3_CONF_VARS']['FE']['pageNotFound_handling'] = '/404/';

Tipp 24: Async Javascript

Mittles Async werden Skripts wie JavaScript im Hintergrund heruntergeladen, ohne den Ladevorgang zu blockieren. Versuchen Sie Ihren Skript-Dateien dieses HTML-Attrribut anzuheften. Dies ist je nach Aufbau der Skripte nicht immer möglich. Die Funktionstüchtigkeit sollte also immer genau geprüft werden.

Tipp 25: Verwenden Sie Lazy Load Für Videos und Bilder

Unter „Lazy Loading“ versteht man das Nachladen von Ressourcen wie Bildern und Videos, um die Website-Performance zu verbessern. Das Grundprinzip ist es, die in der Seite enthaltenen Ressourcen erst dann zu laden, wenn das jeweilige Bild/Video in den sichtbaren Bereich des Browsers (Viewport) gelangt. Es gibt diverse Extensions, die diese Funktion nachrüsten. Alternativ verwenden Sie das TYPO3 Bootstrap Packages.

Beim Einsatz von Videos beschleunigen Sie Ihre Website, indem Sie eingebettete Youtube- und Vimeo-Videos mit einem anklickbaren Vorschaubild ersetzen. Besucher klicken einfach auf das Bild und erst im Anschluss wird das Video nachgeladen.

Tipp 26: Preconnect sowie Prefetch

Preconnect ermöglicht es dem Browser, frühere Verbindungen aufzubauen. Dies kann u.a. beim Einsatz von externen Fonts sinnvoll sein.

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

Tipp 27: Die Verwendung der Extension indexed_search vermeiden

Nutzen Sie für die Umsetzung einer Volltext-Suche möglichst nicht die TYPO3 Extension „indexed_search“. Derzeit eignet sich „indexed_search“ nicht für Websites mit mehr als 100 Seiten. Die Erweiterung zeigt sich extrem unperformant und ist von der TYPO3-Datenbank abhängig. Ein Blick auf die Extension „ke_search“ lohnt eventuell. Ebenso gibt mittlerweile auch einige gute SaaS-Anbieter für Volltext-Suchfunktionen.

Tipp 28: Regelmäßiges Aufräumen der MySQL-Datenbank-Caches sowie temporären Dateien

Werfen Sie regelmäßig einen Blick auf folgende Logs und Cache-Tabellen:

  • Cache-Dateien löschen
  • MySQL Cache Tables löschen
  • Log History löschen
  • RealURL Cache löschen

Tipp 29: Server optimieren

Wenn Sie wie eingangs erwähnt, ein gutes Hostingpaket 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 = 64M
Upload_max_filesize = 100M
Post_max_size = 100M

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

#Disable bin log
log-bin

#Switch on and increase query_cache
query_cache_limit = 2M #default was 1M
query_cache_size = 64M #default was 0
query_cache_type = 1

#Increase table_cache
table_cache = 256 #default was 64

#Increase key_buffer
key_buffer_size = 64M #default was 8M

Haben Sie einen eigenen Server, so sind Sie natürlich noch viel flexibler bei der Performance-Optimierung für TYPO3. So könnten Sie bspw. zusätzliche Module wie den „eAccelerator“ installieren. Folgende Minimal-Konfiguration eignet sich für eine durchschnittlich große Website.

Eaccelerator.shm_size = "32"
Eaccelerator.enable = 1

Tipp 30: Stand alone Server wählen

Generische Tipps, wie die oben genannten, gelten für jeden Server, der TYPO3 ausführt. Abhängig von etwaigen Restriktionen seitens des Providers kann es jedoch sein, das einzelne der genannten Tipps auf Ihrem Webspace nicht realisierbar sind.
Hier kann ein Provider-Wechsel oder ein eigener Server helfen, mit dem man sich sein Wunsch-Setting völlig flexibel ohne Einschränkungen konfigurieren kann.

Fazit

Sehen Sie sich Sie die TYPO3-Leistung Ihres Internetangebots zu jeder Zeit genau und hören Sie niemals damit auf, Optimierungen daran vorzunehmen. Von der Auswahl eines guten Hosts und Servers bis hin zur TYPO3-Konfiguration, Front-End-Techniken, Möglichkeiten zur Implementierung eines CDN, Datenbank-Cleanups, Server-Optimierung und vieles mehr gibt es noch mehr, was getan werden kann, um die beste Geschwindigkeit und Leistung von TYPO3 Webseiten zu extrahieren.

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