TYPO3

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)

Kommentare sind geschlossen.