Der ultimative TYPO3-Performance-Guide

TYPO3 ist in der Standard-Konfiguration vergleichsweise langsam. Mit den Tipps aus unserem kleinen Guide kann man schnell einige Prozente an Performance für seine Website herausholen und dabei nicht nur den Nutzern ein besseres Erlebnis bieten, sondern auch gleichzeitig noch sein Ranking in der Google-Suche verbessern.

Clientseitige Optimierung

Bei der Performance-Optimierung unterscheidet man generell zwischen der serverseitigen und der clientseitigen Optimierung. Bei der clientseitigen Optimierung geht es vor allem darum, dass CSS, JavaScript, HTML und Bilder so beim Client ankommen, dass dieser die gelieferten Ressourcen möglichst schnell verarbeiten kann.

HTTP-Requests minimieren

Mit jeder CSS-, JavaScript und Bild-Datei muss der Client einen extra Request zum Server ausführen. Dass damit nicht nur der Server mehr zu tun bekommt, sondern auch der Client dadurch langsamer wird, sollte jedem klar sein. Grundsätzlich gilt: Je weniger Requests zwischen Client und Server ausgetauscht werden müssen, desto besser. Natürlich sollten dabei nur wirklich benötigte Daten ausgetauscht werden.

Tipp #1 - JavaScript und CSS kombinieren

Ein erster Schritt zum Minimieren der HTTP-Requests ist, die JavaScript und CSS-Datein in jeweils eine große Datei zusammenzufassen. Das lässt sich ganz einfach in der TypoScript-Konfiguration der Seite mit folgendem Befehl erledigen:

 

config.concatenateJsAndCss = 1

 

Tipp #2 - Bilder in CSS-Sprites kombinieren

Anders als bei CSS und JavaScript ist es deutlich schwieriger Bilder in einer Datei zusammenzufassen, weil HTML grundsätzlich nicht darauf ausgelegt ist mehrere Bilder aus einer Ressource zu beziehen. Aber Dank CSS lässt sich das zumindest bei systemrelevanten Grafiken trotzdem umsetzen. So kann man unter anderem Icons hervorragend zusammenfassen und anschließend mit der CSS-Anweisung background-position wieder in einzelne Bilder aufteilen. Nicht immer lohnt sich der Aufwand, deshalb sollte man die Verwendung von CSS-Sprites immer von Fall zu Fall entscheiden.

Tipp #3 - Bilder einbetten

Manchmal ist es sinnvoll kleinere Grafiken direkt in HTML oder CSS einzubetten, wenn sie wirklich bei jedem Seitenaufruf gebraucht und nur ganz selten geändert werden. Zwar vergrößert sich so der HTML bzw. der CSS-Code, aber wir haben einen HTTP-Request weniger.
Eine genaue Regel lässt sich dafür nicht aufstellen. Ähnlich wie bei den CSS-Sprites muss auch hier je nach Fall entschieden werden.

 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEUAT5EQWpggZZ8wcKZAe61QhrRgkbpwnMF/p8iAp8iQss+fvdagvdawyN3A1OTQ3+vg6vLw9fn///80WK6nAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98JFgszGlKCHcMAAAB7SURBVBjTbY+BDsMgCESxddixIuX+/2MHOrcs2yWa8BDuJPqnqghpXbUA1rsDsmobPfZJKqzMzu7IjvpG7R66EUMD4IwDFnQiR4IWV2FL0Afg2BsWj30ByZFjLLYEehEdKQ5DHbavPFRs2EawSTb7RL2E2+nvpz+f+9ITSugGChbzlKUAAAAASUVORK5CYII=">

 

div.image {
    width: 16px;
    height:           16px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEUAT5EQWpggZZ8wcKZAe61QhrRgkbpwnMF/p8iAp8iQss+fvdagvdawyN3A1OTQ3+vg6vLw9fn///80WK6nAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98JFgszGlKCHcMAAAB7SURBVBjTbY+BDsMgCESxddixIuX+/2MHOrcs2yWa8BDuJPqnqghpXbUA1rsDsmobPfZJKqzMzu7IjvpG7R66EUMD4IwDFnQiR4IWV2FL0Afg2BsWj30ByZFjLLYEehEdKQ5DHbavPFRs2EawSTb7RL2E2+nvpz+f+9ITSugGChbzlKUAAAAASUVORK5CYII=');
}

 

Tipp #4 - Clientseitigen Cache aktivieren

Ein letzter Tipp zum Minimieren der HTTP-Requests ist das Aktivieren des Client-Caches. Dabei wird den HTML-Ressourcen (JavaScript, CSS und Bilder) ein Ablaufdatum mitgegeben, sodass der Client sich merken kann wie lange er die Ressource nicht mehr vom Server neu beziehen muss. Zu beachten ist, dass dann bei Änderungen an den Ressourcen der Client diese nicht mehr sofort umsetzt und es unter Umständen etwas länger dauert, bis eine Änderung tatsächlich überall angekommen ist.
Zum Aktivieren des Client-Caches wird zunächst das Server-Modul mod_expires für den Apache-Webserver benötigt. Sobald das Modul installiert ist, lässt sich der Cache über den folgenden zusätzlichen Code-Snippet in der .htaccess aktivieren:

 

ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/jpg "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType application/font-woff "access plus 6 months"
ExpiresByType application/x-font-ttf "access plus 6 months"
ExpiresByType application/svg+xml "access plus 6 months"
ExpiresByType application/vnd.ms-fontobject "access plus 6 months"
ExpiresByType application/x-shockwave-flash "access plus 6 months"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"

 

Asynchrones Laden

Beim asynchronen Laden von Ressourcen wird die Seite eigentlich nicht schneller, aber für den Nutzer fühlt es sich schneller an, weil gewisse Daten erst dann geladen werden, wenn sie wirklich gebraucht werden.

Tipp #1 – JavaScript in den Footer verschieben

Wenn der Browser eine JavaScript-Datei im HTML-Code findet, dann lädt er diese erst, bevor er mit dem Rendering der Seite weitermacht. Das heißt, unsere eingebunden JavaScript-Dateien blockieren das Rendering und sorgen somit für einen langsameren Aufbau der Seite. Um dagegen vorzugehen kann man den JavaScript-Code einfach in den HTML-Footer verbannen. Da an dieser Stelle bereits alle wichtigen HTML-Elemente gerendert wurden, kann der Seitenaufbau auch nicht mehr blockiert werden. TYPO3 hat an dieser Stelle bereits vorgesorgt und stellt eine entsprechende TypoScript-Konfiguration zur Verfügung:

 

# Verschiebt alle JavaScripts in den Footer
config.moveJsFromHeaderToFooter = 1

# Einzelne JavaScripts in den Footer verschieben
page.includeJSFooter {
  jquery = jquery.min.js
  bootstrap = bootstrap.min.js
}

 

Tipp #2 – JavaScript asynchron laden

JavaScript selbst bietet auch einen eigenen Mechanismus an, mit dem man bestimmte Bibliotheken nachladen kann. Dazu wird der Script-Tag mit JavaScript generiert, wenn das entsprechende Event vom Browser getriggert wurde:

 

(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.trafo2.de/myscript.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

 

Google Analytics zum Beispiel, liefert seine Tracking-Codes bereits in dieser Methode aus und auch Facebook hat sein SDK auf asynchron umgestellt.

Responsegröße reduzieren

Mittlerweile hat zwar die Mehrheit der Nutzer einen schnellen Zugang zu Web, aber dennoch ist es von Vorteil, wenn die eigentliche Antwort eines Servers möglichst gering ausfällt. Denn auch bei Highspeed Glasfaser, DSL und LTE gilt: Je weniger Daten ausgetauscht werden, desto weniger hat der Client zu verarbeiten. Und abgesehen davon freuen sich auch ländlichere Internetnutzer, die über UMTS oder DSL 6000 durch das Netz surfen, über einen reduzierten Datenaustausch.

Tipp #1 - Komprimierung aktivieren

Die gzip-Komprimierung ist mittlerweile zwar schon zum stillen Standard geworden, sollte in diesem Guide allerdings trotzdem erwähnt werden. Die HTML-Ausgabe wird dabei über das gzip-Komprimierungsverfahren minimiert und dann an den Browser übermittelt, der die Daten dann wieder entpackt. Die meisten Webserver bieten dafür eine entsprechende Erweiterung an, wie beispielsweise das Modul mod_deflate für den Apache-Webserver.
Wer TYPO3 nutzt braucht dafür kein extra Server-Modul: Das CMS beherrscht die Komprimierung der HTML-Ausgaben bereits, wenn man im Install-Tool die erforderlichen Einstellungen trifft. Auf Wunsch lässt sich mit dem Parameter [FE][compressionLevel] nicht nur die Komprimierung aktivieren, sondern auch noch die Kompressionsrate erhöhen, was zwar den Response weiter verkleinert, sich allerdings negativ auf Serverlast auswirkt.

Tipp #2 - Bilder optimieren

Auch Bilddateien lassen sich komprimieren, allerdings lässt sich das nicht so einfach über ein Server-Modul aktivieren.
Um Bilder optimal zu komprimieren, gibt es verschiedene Werkzeuge. Das Bildbearbeitungstool Gimp zum Beispiel bietet hierfür einen extra Menüpunkt "Save for Web", der die Bildgröße möglichst gering halten soll.
Wer Bilder über die TYPO3 Contentelemente einbindet hat auch dieses Mal Glück: Komprimierung und Qualität lassen sich über die bereitgestellten Einstellungsmöglichkeiten individuell festlegen - oder auch vom Administrator global einrichten.

Mikro-Optimierung

Es gibt noch so zahlreiche weitere Möglichkeiten, den Code zu verbessern und damit noch mehr Performance aus der Website zu kitzeln, bei denen man sich aber über den tatsächlichen Nutzen streiten kann. Diese Art von Optimierung nennt man Mikro-Optimierung. Die folgende Liste enthält daher nur die wichtigsten Tipps, welche aufgrund der Menge nur sehr kurz gehalten wurden.

Tipp #1 - Umleitungen Vermeiden

Selbsterklärend. Besonders ärgerlich: Beim Betreten der Startseite (z.B. www.trafo2.de) landet man automatisch auf www.trafo2.de/home/. Ganz nebenbei auch für SEO definitiv kein Best Practice.

Tipp #2 - Fehlerhafte Dateiverweise entfernen

Verweise auf Bilder, CSS, JavaScripts, etc., die nicht existieren, sollten entfernt werden, damit keine unnötigen 404-Requests entstehen.

Tipp #3 - @import in CSS vermeiden

Lässt sich am besten umgehen, indem man den CSS-Code in Less oder Sass schreibt und dann einen serverseitigen Compiler verwendet.

Tipp #4 - Skalierte Bilder ausliefern

Die Bilder sollten immer in der Größe ausgeliefert werden, in der sie auch angezeigt werden. Ein Bild, das eigentlich 100x100 Pixel groß ist, aber nur in 50x50 Pixel angezeigt wird, kostet mehr Traffic und zwingt den Browser zu unnötigen Berechnungen der Größe.

Tipp #5 - Bildabmessungen angeben

In den HTML img-Tags sollte im Idealfall immer die Abmessung mit width und height angegeben werden, um den Browser die Berechnung derselbigen abzunehmen.

Serverseitige Optimierung

Bei der serverseitigen Optimierung wird versucht die Berechnungen, die auf dem Server notwendig sind um die Seiten dynamisch auszuliefern, möglichst gering zu halten.

Tipp #1 - Server-Software aktuell halten

Oft genug bringen Major-Updates für Server, PHP, CMS oder Frameworks einen Performance-Schub mit sich. So soll zum Beispiel PHP 7 im Vergleich zu PHP 5.6 bei einem Magento-Shop 30% weniger Arbeitsspeicher verbrauchen und bis zu 3x mehr Requests gleichzeitig abarbeiten können. Es lohnt sich also häufiger einen Blick in den Changelog aller verwendeten Software zu werfen und ggf. ein Update einzuspielen.

Tipp #2 - Opcode-Cache installieren

Normalerweise werden Skriptsprachen wie PHP bei jedem Aufruf neu interpretiert bzw. kompiliert. Das bedeutet natürlich bei jedem Seitenaufruf viel Arbeit für den Server und kann ein großer Nachteil gegenüber nativen Programmiersprachen wie C sein. Um dem entgegenzuwirken wurden Opcode-Caches erfunden, welche die Skripts bei erstmaliger Ausführung fertig interpretieren und anschließend zwischenspeichern, damit das kompilierte Skript bei der nächsten Anfrage schneller ausgeführt werden kann. Bei PHP bis einschließlich Version 5.4 gibt es hierfür die Extension APC. Bei neueren PHP-Installationen ab Version 5.5 ist bereits ein Opcode-Cache vorinstalliert.

Tipp #3 - Caching innerhalb der Anwendung

Die Begriff "Cache" und "Caching" wurden mittlerweile so oft genannt, dass sie einem schon zum Hals heraushängen können, und dennoch ist das Zwischenspeichern und Vorhalten von bestimmten Daten immer noch die beste Methode zum Beschleunigen einer Website. Bei eigenen Anwendungen ist Caching sehr individuell umzusetzen und unterliegt keinen generellen Regeln. TYPO3 hingegen hat einen eingebauten Cache, der - sofern er noch nicht aktiviert wurde - eine enorme Leistungssteigerung bringt:

 

config.no_cache = 0

 

Zu beachten ist, dass die Aktivierung des Caches während der Entwicklungsphase etwas nervig sein kann. Daher empfiehlt es sich, den Cache erst auf dem Produktionssystem zu aktivieren.

An dieser Stelle könnte man auch noch die Caching-Server Varnish und Squid erwähnen, die ganze Webseiten im Cache vorhalten können. Die Erklärung dazu würde aber etwas zu weit gehen und deshalb verzichten wir hier auf eine ausführlichere Beschreibung.

Tipp #4 - Anwendung Analysieren

Oft werden bei einer Anwendung im Hintergrund tausende Funktionen aufgerufen, die eigentlich nicht sein müssen. Mit etwas Geschick lässt sich die Anwendung aber so optimieren, dass der Programmablauf um mehrere tausend Funktionsaufrufe reduziert wird. Hierfür gibt es Tools wie den Profiler von xdebug, die den Ablauf analysieren und aufzeigen, an welcher Stelle des Programms viel Speicher und Zeit verloren geht. Ein sehr aufwendiger Prozess, der viele Stunden kosten, sich im Endeffekt aber richtig lohnen kann.

Tipp #5 - Datenbank-Tuning

Was viele nicht wissen: die Datenbank kann in vielen Fällen ein Nadelöhr bei der Ausführungszeit einer Anwendung sein. Was nützt es, wenn die Anwendung optimal läuft, aber bei Anfragen an die Datenbank jedes Mal wichtige Millisekunden verloren gehen? Man kann unter anderem durch Tuning der Datenbank-Konfiguration einige Verbesserungen der Performance hervorrufen, indem man Query-Caches, Buffer-Sizes und Logs vergrößert, doch das ist noch lange nicht das Ende der Optimerungsarbeiten. Durch geschicktes Setzen von Fremdschlüsseln und Analysieren der Datenbank-Querys (z.B. mit dem EXPLAIN-Befehl), kann man noch weitaus mehr Performance aus der Datenbank herausholen. Ebenso sollte man darüber nachdenken, welche Storage-Engine für welche Tabelle am sinnvollsten ist. Eine Tabelle mit vielen lesenden Zugriffen ist schneller, wenn sie InnoDB verwendet, bei Tabellen mit vielen schreibenden Zugriffen ist dagegen MyISAM die bessere Wahl.

Schlusswort

Wie man unweigerlich erkennt, gibt es keinen Hebel den man einfach umlegen kann "und schon läuft eine Webseite schneller". Vielmehr benötigt es viele kleine Stellschrauben, die es zu verbessern gilt, um am Ende ein optimales Ergebnis zu erzielen.
Zum Abschluss sei noch mal erwähnt, dass Google ein Apache-Modul entwickelt hat, das auf allen Websites einige der hier genannten Tipps automatisch umsetzt. Und auch wenn das für eine vollständige Optimierung bei Weitem nicht ausreicht, hat man zumindest schon mal eine gute Basis, auf der man aufbauen kann.


Ihre Ansprechpartner

Foto Michael Schiller
Michael Schiller

Geschäftsführender Gesellschafter

0201 - 878 499 11 E-Mail senden
Foto Daniel Jarusch
Daniel Jarusch

Geschäftsführender Gesellschafter

0201 - 878 499 12 E-Mail senden