Contao

Das Content-Management-System Contao wurde im Jahr 2006 unter dem Namen TYPOlight als Open Source Projekt veröffentlicht und im Jahr 2010, aufgrund von Verwechselungen mit TYPO3, zu Contao umbenannt [Wika]. In dieser Arbeit wurde Contao in der Version 3.5, die bis in das Jahr 2019[1] durch einen Long-Term-Support mit sicherheitsrelevanten Updates unterstützt wird, eingesetzt.

Optimierungen bei der Installation und Konfiguration

Nach der erfolgreichen Installation von Contao auf dem Webserver folgte das Anlegen der Seitenstruktur, die Übernahme der Inhalte und die Integration der zuvor erstellten Templates. Das CMS liefert bei der Installation eine optimierte HTACCESS-Datei, die jedoch standardmäßig deaktiviert ist und sich erst durch eine Umbenennung mittels FTP-Programm auf dem Webserver aktivieren lässt. Durch diese Maßnahme war es möglich, eine Verbesserung der Ladezeit des Visually Complete um 100 Millisekunden zu erreichen. Im nächsten Schritt erfolgte im Backend von Contao die Aktivierung des internen Cache unter dem Menüpunkt Einstellungen. Hierzu wurde die Option „Nur Servercache verwenden“ ausgewählt und anschließend die Cachezeit in dem Startpunkt der Website auf „24 Stunden“ festgelegt. Nach dem erfolgreichen Aufbau des internen Cache wurde eine erneute Messung der Ladezeit über WebPagetest vorgenommen. Alle Messungen erfolgten von dem Standort Amsterdam mit einer kabelgebundenen Datenverbindung. Die visuelle Darstellung verbesserte sich, ebenso wie die Zeit zum Laden des gesamten Dokumentes, um weitere 100 Millisekunden.

Abbildung 4.4: Messergebnisse nach Aktivierung der HTACCESS und des internen Cache in Contao

Aus der Abbildung 4.4 geht hervor, dass die Aktivierung des internen Cache zu einer Reduzierung der Verarbeitungszeit und damit zu einer Verbesserung der Time to First Byte und der Time to Start Render führte. Der Speed Index verbesserte sich durch die Aktivierung der HTACCESS-Datei von 761 auf 757 gegenüber der Grundinstallation und durch die Aktivierung des internen Cache auf einen Wert von 659. Bei dem Test über ein mobiles 3G-Datennetz, mit einer RTT von 300 Millisekunden, verbesserte sich die Gesamtladezeit um 1,2 Sekunden, von zuvor 5,7 Sekunden auf 4,5 Sekunden. Es fiel hierbei auf, dass auf der Startseite nicht erforderliche Komponenten geladen wurden.

Zur Berücksichtigung mobiler Endgeräte kann bei der Angabe von Seitenlayouts ein abweichendes Template für die Auslieferung definiert werden. Somit ermöglicht es Contao serverseitig die Auslieferung von Inhalten zu steuern, entsprechend dem in Kapitel 3.5.1 vorgestellten Ansatzes RESS zur Reduzierung der HTTP-Anfragen. Um eine Auslieferung nicht erforderlicher Komponenten serverseitig zu vermeiden, wurde das Seitenlayout in Contao dupliziert und eine Version für mobile Endgeräte erstellt. Komponenten, die nicht auf allen Endgeräten erforderlich sind, wie der Content-Slider auf der Startseite, wurden als separate Module angelegt und aus dem Seitenlayout für mobile Endgeräte entfernt. Durch diese Maßnahme konnten vier HTTP-Anfragen auf der Startseite eingespart und das zu übertragende Datenvolumen um 44 Prozent, von 341 Kilobyte auf 192 Kilobyte, reduziert werden. Bei dem Abruf über ein 3G-Datennetz, in Verbindung mit der Emulation eines mobilen Endgerätes durch WebPagetest, reduzierte sich die Zeit des Document Complete von 4,5 Sekunden auf 3,3 Sekunden.

Abbildung 4.5: Vergleich der Ladezeit für die Above the Fold Inhalte auf einem mobilen Endgerät

Die Dauer, bis der sichtbare Bereich auf einem mobilen Endgerät fertig geladen wurde, konnte durch die Entfernung der Web Fonts bei der Auslieferung an mobile Endgeräte von 3,8 Sekunden auf 2,0 Sekunden verbessert werden (siehe Abbildung 4.5).

Seit Version 3.4 unterstützt Contao die Integration und Auslieferung von Bildern als Responsive Images durch das <picture>-Element und das srcset-Attribut. Dazu lässt sich in der Systemkonfiguration unter dem Navigationspunkt Systemverwaltung ein Modul zur Auslieferung von Responsive Images aktivieren. Anschließend können für die automatische Generierung der Bilder die erforderlichen Auflösungen definiert werden. Die Redakteure müssen sich nicht um die Erstellung entsprechender Bilder kümmern, sondern laden das Bild in der höchsten Auflösung, die das Template vorgibt, hoch und wählen das gewünschte Bildformat aus. Kleinere Bilder werden durch das CMS automatisch generiert und der Browser des Nutzers kann, wie in Kapitel 3.5.2 beschrieben, entscheiden, welche Bildgröße für das jeweilige Endgerät geladen wird.

Die Berücksichtigung des kritischen Rendering Pfades erfolgte in Contao durch eine Integration des Inlinestylings in die entsprechenden Templates für die Startseite und die Unterseiten. Sofern ein Template vom Grundaufbau abweicht ist es erforderlich, für die kritischen CSS-Definitionen ein neues Seitenlayout in Contao zu erstellen, damit die richtigen Elemente bei der Generierung des CSS für die Above the Fold Inhalte genutzt werden. Die vollständige CSS-Datei mit allen Definitionen wurde, wie in Kapitel 3.6.5 vorgestellt, mittels des JavaScript LoadCSS asynchron nachgeladen.

Nach dem Abschluss der Optimierung des Systems wurde es dupliziert und auf einer Subdomain eingerichtet, um die Auswirkungen eines Content Delivery Networks in Kombination mit dem CMS zu testen. Als Anbieter wurde erneut MaxCDN gewählt und eine Pull Zone für das Contao CMS angegeben. In dem Backend von Contao erfolgte die Angabe der URL des CDN unter dem Startpunkt der Website für die Auslieferung von Files und Assets. MaxCDN nutzt den normalen Webserver als Origin und lädt die Ressourcen automatisch auf die Server des CDN. Die Aktualisierungen der Ressourcen werden automatisiert übernommen und müssen nicht, wie es beispielsweise bei Amazon CloudFront der Fall ist, manuell vorgenommen werden.

Die Optimierungen von Contao konnten mit Hilfe der Standardfunktionen des Systems realisiert werden. Der Einsatz von externen Erweiterungen für ergänzende Funktionen war somit nicht erforderlich und reduziert den Aufwand bei späteren System-Updates.

Bewertung von Contao

Die Optimierungen des Contao-Systems erzielten, bei dem Abruf über einen Desktop-Rechner mittels WebPagetest, nur geringfügige Verbesserungen im Bereich von 100 Millisekunden. Aus den Tabellen 4.13 und 4.14 geht hervor, dass sich die Bewertung von PageSpeed Insights für die mobilen Endgeräte durch das Weglassen des Content-Sliders und der Web Fonts verbessert hat.

Tabelle 4.13: Startseite ausgeliefert durch Contao beim Abruf über einen Desktop-Rechner

Metrik Normal Optimiert Verbesserung
Visually Complete 1,3 Sekunden 1,2 Sekunden 0,1 Sekunden 8 %
SpeedIndex 791 660 131 17 %
Document Complete 1,3 Sekunden 1,2 Sekunden 0,1 Sekunden 8 %
Pagespeed Insights 73 / 87 100 / 93 27 / 6
YSLOW 92 / A 94 / A 2 / –
Pingdom 97 97

Tabelle 4.14: Unterseite ausgeliefert durch Contao beim Abruf über einen Desktop-Rechner

Metrik Normal Optimiert Verbesserung
Visually Complete 0,9 Sekunden 0,8 Sekunden 0,1 Sekunden 11 %
SpeedIndex 705 545 160 23 %
Document Complete 1,1 Sekunden 0,9 Sekunden 0,2 Sekunden 18 %
Pagespeed Insights 79 / 92 100 / 93 21 / 1
YSLOW 93 / A 94 / A 1 / –
Pingdom 97 97

Eine deutliche Verbesserung der Ladezeit konnte bei dem Abruf über mobile Endgeräte erreicht werden. Die Messung der Ladezeiten in den nachfolgenden Tabellen 4.15 und 4.16 erfolgte über WebPagetest von dem Standort Amsterdam mit einem 3G-Datennetz und der Emulation eines Nexus 5.

Tabelle 4.15: Startseite ausgeliefert durch Contao beim Abruf über ein 3G-Datennetz

Metrik Normal Optimiert Verbesserung
Visually Complete 3,5 Sekunden 1,7 Sekunden 1,8 Sekunden 51 %
SpeedIndex 2598 1412 1186 46 %
Document Complete 5,0 Sekunden 3,0 Sekunden 2,0 Sekunden 40 %
Anfragen 14 6 8 57 %
Datenvolumen 279 KB 52 KB 227 KB 81 %

Tabelle 4.16: Unterseite ausgeliefert durch Contao beim Abruf über ein 3G-Datennetz

Metrik Normal Optimiert Verbesserung
Visually Complete 3,4 Sekunden 1,7 Sekunden 1,7 Sekunden 50 %
SpeedIndex 2980 1169 1811 61 %
Document Complete 5,3 Sekunden 3,3 Sekunden 2,0 Sekunden 38 %
Anfragen 12 9 3 25 %
Datenvolumen 220 KB 188 KB 32 KB 15 %

Die Verbesserung der Ladezeit wurde durch die Nutzung des internen Cache und die Auslieferung passender Inhalte für die mobilen Endgeräte, mit Hilfe der Definition von spezifischen Seitenlayouts, erreicht. Somit konnte die Zeit des Visually Complete um 50 Prozent reduziert werden und der Nutzer erhält nach 1,7 Sekunden alle Inhalte im sichtbaren Bereich angezeigt. Darüber hinaus wurde die Ladezeit Document Complete um 2 Sekunden verringert.

Abbildung 4.6: Document Complete bei dem Abruf der Startseite über ein 3G-Datennetz

Eine Verbesserung der Ladezeit durch die Verwendung eines CDN in Verbindung mit Contao konnte nicht erzielt werden. In gezielten Versuchen wirkte sich der zusätzliche DNS-Lookup negativ auf die Gesamtladezeit aus und verlängerte die Blockierung des Renderings im Browser (siehe Abbildung 4.6). Aus diesem Grund wird in dem weiteren Verlauf dieser Arbeit auf die Verwendung von Content Delivery Networks, zur Auslieferung von externen Ressourcen der HTML-Dokumente, verzichtet.

[1] https://contao.org/de/release-plan.html (abgerufen am 15.11.2015)

Kommentare sind geschlossen.