Das Enterprise Content-Management-System TYPO3 wurde in dem Jahr 2002 in der finalen Version 3.0 veröffentlicht, bei allen vorherigen Veröffentlichungen handelte es sich um Beta-Versionen [Typ]. Im Rahmen dieser Arbeit wurde die Version 7.4 des TYPO3 CMS eingesetzt. Diese Version lässt sich, gemäß der Roadmap[1], auf die am 10. November 2015 veröffentlichte Version 7.6 von TYPO3 updaten und bietet einen Long-Term-Support für sicherheitsrelevante Updates bis in das Jahr 2018.
Mit der aktuellen Version 7 des TYPO3 CMS wurde der grundlegende Quellcode des Systems überarbeitet und eine Verbesserung der Performance gegenüber den bisherigen Versionen des CMS erzielt [Bri15].
Optimierung der Konfiguration
Nach der Installation des TYPO3 CMS auf dem Webserver erfolgte das Anlegen der Seitenstruktur und die Übernahme der Inhalte. Die einzelnen Templates des Themes wurden mit den Bezeichnern zur Einbindung dynamischer Inhalte versehen und das entsprechende TypoScript für die Funktionalitäten der Website angelegt.
Ein clientseitiges Caching der Inhalte ist bei TYPO3 standardmäßig aktiviert und erfolgt durch eine mitgelieferte HTACCESS-Datei, die bereits viele Optimierungen zur Verbesserung der Ladezeit bei der Auslieferung von Webseiten berücksichtigt. Über die Grundkonfiguration hinausgehende Anpassungen zur Performanceoptimierung stellt das System nicht zur Verfügung.
Um eine Verbesserung des Renderings in den Browsern durch die Berücksichtigung des kritischen Rendering Pfades zu erzielen, wurde der erforderliche CSS-Quellcode, wie in Kapitel 4.2.3 beschrieben, für jedes Template generiert und in den HTML-Dateien der integrierten Templates mittels Inlinestyling hinterlegt. Sofern ein Webseitenlayout von dem Grundaufbau abweicht, ist es in TYPO3 erforderlich, ein separates Template für diese Webseite zu erstellen und das Template mittels TypoScript zu verknüpfen.
Die in Kapitel 3.5.2 vorgestellte Einbindung von Responsive Images ist in TYPO3 seit der Version 6.2 standardmäßig integriert. Die Aktivierung der Funktionalität erfolgt in der Konfiguration des Templates über den Constant Editor. Dort kann unter dem Punkt Rendering-type for responsive image zwischen den Angaben „default“, „img-tag with alternate sources as srcset-attribute“ und „picture-tag with source-child-tags“, zu der Einbindung von Responsive Images, durch das <picture>-Element oder das srcset-Attribut gewählt werden. Im Anschluss müssen die von dem System zu generierenden Auflösungen der Bilder in das TypoScript des Template aufgenommen werden. Der folgende Ausschnitt zeigt die Konfiguration zur Generierung und Auslieferung der Bilder in drei Auflösungen mit einer Breite von 480 Pixeln, 720 Pixeln und 990 Pixeln.
tt_content.image.20.1.sourceCollection {
small.maxW = 480
small.srcsetCandidate = 480w
middle.maxW = 720
middle.srcsetCandidate = 720w
large.maxW = 990
large.srcsetCandidate = 990w
}
Integration von Erweiterungen
Die Möglichkeit zur Identifikation des User Agent wurde aus der Version 7 des TYPO3 CMS entfernt. Eine Definition der auszuliefernden Inhalte und Ressourcen, wie bei den vorherigen Versionen des CMS, ist nicht möglich. Diese Funktionalität lässt sich mit der Erweiterung Mobile Helper hinzufügen.
Nach der Installation von Mobile Helper, über das Repository von TYPO3, wurden für alle Templates mobile Versionen erstellt. Anschließend erfolgte eine Ergänzung des be-stehenden TypoScript mit dem nachfolgenden Quellcode zur Auslieferung der mobilen Templates bei dem Abruf der Website über mobile Endgeräte.
[userFunc = user_lvmobile_isMobile]
temp.docHead {
template.file = fileadmin/templates/main/page-mobile.html
}
[end]
Zur serverseitigen Optimierung und Reduzierung der generierten HTML-Dokumente wurde die Erweiterung Sourceopt eingesetzt. Diese optimiert und minifiziert den Quellcode vor der Auslieferung an das Endgerät des Nutzers.
Bewertung von TYPO3
Das TYPO3 CMS erforderte in der Grundkonfiguration die Definition zur Generierung der Responsive Images, weitere Anpassungen, wie die Berücksichtigung des kritischen Rendering Pfades, erfolgten bei der Integration des Template. Die Komprimierung der HTML-Dokumente und die Steuerung der Auslieferung von bestimmten Inhalten für mobile Endgeräte erfolgten über die Installation von Erweiterungen externer Anbieter.
Die Optimierungen verbesserten die wahrgenommene Ladezeit bei dem Abruf der Startseite über einen Desktop-Rechner um 27 Prozent, gleichzeitig blieb die Darstellungszeit der Unterseiten unverändert. Durch die automatische Generierung und Einbindung einer CSS-Datei im <head>-Element der HTML-Dokumente konnte keine Verbesserung der Bewertung durch PageSpeed Insights erreicht werden (siehe Tabelle 4.17 und 4.18).
Tabelle 4.17: Startseite ausgeliefert durch TYPO3 beim Abruf über einen Desktop-Rechner
| Metrik | Normal | Optimiert | Verbesserung | |
| Visually Complete | 1,1 Sekunden | 0,8 Sekunden | 0,3 Sekunden | 27 % |
| SpeedIndex | 657 | 611 | 46 | 7 % |
| Document Complete | 1,0 Sekunden | 0,9 Sekunden | 0,1 Sekunden | 10 % |
| Pagespeed Insights | 79 / 93 | 79 / 93 | – / – | – |
| YSLOW | 93 / A | 93 / A | – / – | – |
| Pingdom | 98 | 98 | – | – |
Tabelle 4.18: Unterseite ausgeliefert durch TYPO3 beim Abruf über einen Desktop-Rechner
| Metrik | Normal | Optimiert | Verbesserung | |
| Visually Complete | 0,9 Sekunden | 0,9 Sekunden | – | – |
| SpeedIndex | 645 | 629 | 16 | 2 % |
| Document Complete | 0,9 Sekunden | 0,9 Sekunden | – | – |
| Pagespeed Insights | 79 / 93 | 79 / 93 | – / – | – |
| YSLOW | 94 / A | 94 / A | – / – | – |
| Pingdom | 98 | 98 | – | – |
Noch deutlicher fallen hingegen die Verbesserungen bei einem Abruf der von TYPO3 generierten Webseiten durch mobile Endgeräte aus. Die Ladezeiten konnten durch eine Reduzierung der eingebundenen Ressourcen und des Datenvolumens reduziert werden. Bei dem Abruf der Startseite über ein 3G-Datennetz konnten das Datenvolumen um 80 Prozent und die Ladezeit um 41 Prozent verringert werden (siehe Tabelle 4.19).
Tabelle 4.19: Startseite ausgeliefert durch TYPO3 beim Abruf über ein 3G-Datennetz
| Metrik | Normal | Optimiert | Verbesserung | |
| Visually Complete | 3,3 Sekunden | 1,9 Sekunden | 1,4 Sekunden | 42 % |
| SpeedIndex | 2298 | 1807 | 491 | 21 % |
| Document Complete | 4,4 Sekunden | 2,6 Sekunden | 1,8 Sekunden | 41 % |
| Anfragen | 14 | 7 | 7 | 50 % |
| Datenvolumen | 270 KB | 54 KB | 216 KB | 80 % |
Tabelle 4.20: Unterseite ausgeliefert durch TYPO3 beim Abruf über ein 3G-Datennetz
| Metrik | Normal | Optimiert | Verbesserung | |
| Visually Complete | 3,2 Sekunden | 1,9 Sekunden | 1,3 Sekunden | 41 % |
| SpeedIndex | 2780 | 1615 | 1165 | 42 % |
| Document Complete | 3,7 Sekunden | 3,4 Sekunden | 0,3 Sekunden | 8 % |
| Anfragen | 12 | 9 | 3 | 25 % |
| Datenvolumen | 211 KB | 189 KB | 22 KB | 10 % |
Bei den Unterseiten fällt die Reduzierung des Datenvolumens gemäß der Tabelle 4.20 nicht in gleichem Maße wie zuvor bei der Startseite aus, dennoch verbesserte sich die wahrgenommene Ladezeit um 41 Prozent auf 1,9 Sekunden. Eine Gegenüberstellung mit den Content-Management-Systemen Contao und WordPress erfolgt in Kapitel 4.7.
[1] https://typo3.org/typo3-cms/roadmap/ (abgerufen am 15.11.2015)
