Contao

Das Con­tent-Man­age­ment-Sys­tem Con­tao wurde im Jahr 2006 unter dem Namen TYPO­light als Open Source Pro­jekt veröf­fentlicht und im Jahr 2010, auf­grund von Ver­wech­selun­gen mit TYPO3, zu Con­tao umbe­nan­nt [Wika]. In dieser Arbeit wurde Con­tao in der Ver­sion 3.5, die bis in das Jahr 2019[1] durch einen Long-Term-Sup­port mit sicher­heit­srel­e­van­ten Updates unter­stützt wird, einge­set­zt.

Optimierungen bei der Installation und Konfiguration

Nach der erfol­gre­ichen Instal­la­tion von Con­tao auf dem Web­serv­er fol­gte das Anle­gen der Seit­en­struk­tur, die Über­nahme der Inhalte und die Inte­gra­tion der zuvor erstell­ten Tem­plates. Das CMS liefert bei der Instal­la­tion eine opti­mierte HTAC­CESS-Datei, die jedoch stan­dard­mäßig deak­tiviert ist und sich erst durch eine Umbe­nen­nung mit­tels FTP-Pro­gramm auf dem Web­serv­er aktivieren lässt. Durch diese Maß­nahme war es möglich, eine Verbesserung der Ladezeit des Visu­al­ly Com­plete um 100 Mil­lisekun­den zu erre­ichen. Im näch­sten Schritt erfol­gte im Back­end von Con­tao die Aktivierung des inter­nen Cache unter dem Menüpunkt Ein­stel­lun­gen. Hierzu wurde die Option „Nur Server­cache ver­wen­den“ aus­gewählt und anschließend die Cachezeit in dem Start­punkt der Web­site auf „24 Stun­den“ fest­gelegt. Nach dem erfol­gre­ichen Auf­bau des inter­nen Cache wurde eine erneute Mes­sung der Ladezeit über Web­Pagetest vorgenom­men. Alle Mes­sun­gen erfol­gten von dem Stan­dort Ams­ter­dam mit ein­er kabel­ge­bun­de­nen Daten­verbindung. Die visuelle Darstel­lung verbesserte sich, eben­so wie die Zeit zum Laden des gesamten Doku­mentes, um weit­ere 100 Mil­lisekun­den.

Abbil­dung 4.4: Messergeb­nisse nach Aktivierung der HTACCESS und des inter­nen Cache in Con­tao

Aus der Abbil­dung 4.4 geht her­vor, dass die Aktivierung des inter­nen Cache zu ein­er Reduzierung der Ver­ar­beitungszeit und damit zu ein­er Verbesserung der Time to First Byte und der Time to Start Ren­der führte. Der Speed Index verbesserte sich durch die Aktivierung der HTAC­CESS-Datei von 761 auf 757 gegenüber der Grundin­stal­la­tion und durch die Aktivierung des inter­nen Cache auf einen Wert von 659. Bei dem Test über ein mobiles 3G-Daten­netz, mit ein­er RTT von 300 Mil­lisekun­den, verbesserte sich die Gesamt­ladezeit um 1,2 Sekun­den, von zuvor 5,7 Sekun­den auf 4,5 Sekun­den. Es fiel hier­bei auf, dass auf der Start­seite nicht erforder­liche Kom­po­nen­ten geladen wur­den.

Zur Berück­sich­ti­gung mobil­er Endgeräte kann bei der Angabe von Seit­en­lay­outs ein abwe­ichen­des Tem­plate für die Aus­liefer­ung definiert wer­den. Somit ermöglicht es Con­tao ser­ver­seit­ig die Aus­liefer­ung von Inhal­ten zu steuern, entsprechend dem in Kapi­tel 3.5.1 vorgestell­ten Ansatzes RESS zur Reduzierung der HTTP-Anfra­gen. Um eine Aus­liefer­ung nicht erforder­lich­er Kom­po­nen­ten ser­ver­seit­ig zu ver­mei­den, wurde das Seit­en­lay­out in Con­tao dupliziert und eine Ver­sion für mobile Endgeräte erstellt. Kom­po­nen­ten, die nicht auf allen Endgeräten erforder­lich sind, wie der Con­tent-Slid­er auf der Start­seite, wur­den als sep­a­rate Mod­ule angelegt und aus dem Seit­en­lay­out für mobile Endgeräte ent­fer­nt. Durch diese Maß­nahme kon­nten vier HTTP-Anfra­gen auf der Start­seite einges­part und das zu über­tra­gende Daten­vol­u­men um 44 Prozent, von 341 Kilo­byte auf 192 Kilo­byte, reduziert wer­den. Bei dem Abruf über ein 3G-Daten­netz, in Verbindung mit der Emu­la­tion eines mobilen Endgerätes durch Web­Pagetest, reduzierte sich die Zeit des Doc­u­ment Com­plete von 4,5 Sekun­den auf 3,3 Sekun­den.

Abbil­dung 4.5: Ver­gle­ich der Ladezeit für die Above the Fold Inhalte auf einem mobilen Endgerät

Die Dauer, bis der sicht­bare Bere­ich auf einem mobilen Endgerät fer­tig geladen wurde, kon­nte durch die Ent­fer­nung der Web Fonts bei der Aus­liefer­ung an mobile Endgeräte von 3,8 Sekun­den auf 2,0 Sekun­den verbessert wer­den (siehe Abbil­dung 4.5).

Seit Ver­sion 3.4 unter­stützt Con­tao die Inte­gra­tion und Aus­liefer­ung von Bildern als Respon­sive Images durch das <picture>-Element und das src­set-Attrib­ut. Dazu lässt sich in der Sys­temkon­fig­u­ra­tion unter dem Nav­i­ga­tion­spunkt Sys­temver­wal­tung ein Mod­ul zur Aus­liefer­ung von Respon­sive Images aktivieren. Anschließend kön­nen für die automa­tis­che Gener­ierung der Bilder die erforder­lichen Auflö­sun­gen definiert wer­den. Die Redak­teure müssen sich nicht um die Erstel­lung entsprechen­der Bilder küm­mern, son­dern laden das Bild in der höch­sten Auflö­sung, die das Tem­plate vorgibt, hoch und wählen das gewün­schte Bild­for­mat aus. Kleinere Bilder wer­den durch das CMS automa­tisch gener­iert und der Brows­er des Nutzers kann, wie in Kapi­tel 3.5.2 beschrieben, entschei­den, welche Bild­größe für das jew­eilige Endgerät geladen wird.

Die Berück­sich­ti­gung des kri­tis­chen Ren­der­ing Pfades erfol­gte in Con­tao durch eine Inte­gra­tion des Inlinestylings in die entsprechen­den Tem­plates für die Start­seite und die Unter­seit­en. Sofern ein Tem­plate vom Grun­dauf­bau abwe­icht ist es erforder­lich, für die kri­tis­chen CSS-Def­i­n­i­tio­nen ein neues Seit­en­lay­out in Con­tao zu erstellen, damit die richti­gen Ele­mente bei der Gener­ierung des CSS für die Above the Fold Inhalte genutzt wer­den. Die voll­ständi­ge CSS-Datei mit allen Def­i­n­i­tio­nen wurde, wie in Kapi­tel 3.6.5 vorgestellt, mit­tels des JavaScript Load­C­SS asyn­chron nachge­laden.

Nach dem Abschluss der Opti­mierung des Sys­tems wurde es dupliziert und auf ein­er Sub­do­main ein­gerichtet, um die Auswirkun­gen eines Con­tent Deliv­ery Net­works in Kom­bi­na­tion mit dem CMS zu testen. Als Anbi­eter wurde erneut Max­CDN gewählt und eine Pull Zone für das Con­tao CMS angegeben. In dem Back­end von Con­tao erfol­gte die Angabe der URL des CDN unter dem Start­punkt der Web­site für die Aus­liefer­ung von Files und Assets. Max­CDN nutzt den nor­malen Web­serv­er als Ori­gin und lädt die Ressourcen automa­tisch auf die Serv­er des CDN. Die Aktu­al­isierun­gen der Ressourcen wer­den automa­tisiert über­nom­men und müssen nicht, wie es beispiel­sweise bei Ama­zon Cloud­Front der Fall ist, manuell vorgenom­men wer­den.

Die Opti­mierun­gen von Con­tao kon­nten mit Hil­fe der Stan­dard­funk­tio­nen des Sys­tems real­isiert wer­den. Der Ein­satz von exter­nen Erweiterun­gen für ergänzende Funk­tio­nen war somit nicht erforder­lich und reduziert den Aufwand bei späteren Sys­tem-Updates.

Bewertung von Contao

Die Opti­mierun­gen des Con­tao-Sys­tems erziel­ten, bei dem Abruf über einen Desk­top-Rech­n­er mit­tels Web­Pagetest, nur ger­ingfügige Verbesserun­gen im Bere­ich von 100 Mil­lisekun­den. Aus den Tabellen 4.13 und 4.14 geht her­vor, dass sich die Bew­er­tung von Page­Speed Insights für die mobilen Endgeräte durch das Weglassen des Con­tent-Slid­ers und der Web Fonts verbessert hat.

Tabelle 4.13: Start­seite aus­geliefert durch Con­tao beim Abruf über einen Desk­top-Rech­n­er

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 1,3 Sekun­den 1,2 Sekun­den 0,1 Sekun­den 8 %
SpeedIn­dex 791 660 131 17 %
Doc­u­ment Com­plete 1,3 Sekun­den 1,2 Sekun­den 0,1 Sekun­den 8 %
Page­speed Insights 73 / 87 100 / 93 27 / 6 -
YSLOW 92 / A 94 / A 2 / - -
Ping­dom 97 97 - -

Tabelle 4.14: Unter­seite aus­geliefert durch Con­tao beim Abruf über einen Desk­top-Rech­n­er

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 0,9 Sekun­den 0,8 Sekun­den 0,1 Sekun­den 11 %
SpeedIn­dex 705 545 160 23 %
Doc­u­ment Com­plete 1,1 Sekun­den 0,9 Sekun­den 0,2 Sekun­den 18 %
Page­speed Insights 79 / 92 100 / 93 21 / 1 -
YSLOW 93 / A 94 / A 1 / - -
Ping­dom 97 97 - -

Eine deut­liche Verbesserung der Ladezeit kon­nte bei dem Abruf über mobile Endgeräte erre­icht wer­den. Die Mes­sung der Ladezeit­en in den nach­fol­gen­den Tabellen 4.15 und 4.16 erfol­gte über Web­Pagetest von dem Stan­dort Ams­ter­dam mit einem 3G-Daten­netz und der Emu­la­tion eines Nexus 5.

Tabelle 4.15: Start­seite aus­geliefert durch Con­tao beim Abruf über ein 3G-Daten­netz

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 3,5 Sekun­den 1,7 Sekun­den 1,8 Sekun­den 51 %
SpeedIn­dex 2598 1412 1186 46 %
Doc­u­ment Com­plete 5,0 Sekun­den 3,0 Sekun­den 2,0 Sekun­den 40 %
Anfra­gen 14 6 8 57 %
Daten­vol­u­men 279 KB 52 KB 227 KB 81 %

Tabelle 4.16: Unter­seite aus­geliefert durch Con­tao beim Abruf über ein 3G-Daten­netz

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 3,4 Sekun­den 1,7 Sekun­den 1,7 Sekun­den 50 %
SpeedIn­dex 2980 1169 1811 61 %
Doc­u­ment Com­plete 5,3 Sekun­den 3,3 Sekun­den 2,0 Sekun­den 38 %
Anfra­gen 12 9 3 25 %
Daten­vol­u­men 220 KB 188 KB 32 KB 15 %

Die Verbesserung der Ladezeit wurde durch die Nutzung des inter­nen Cache und die Aus­liefer­ung passender Inhalte für die mobilen Endgeräte, mit Hil­fe der Def­i­n­i­tion von spez­i­fis­chen Seit­en­lay­outs, erre­icht. Somit kon­nte die Zeit des Visu­al­ly Com­plete um 50 Prozent reduziert wer­den und der Nutzer erhält nach 1,7 Sekun­den alle Inhalte im sicht­baren Bere­ich angezeigt. Darüber hin­aus wurde die Ladezeit Doc­u­ment Com­plete um 2 Sekun­den ver­ringert.

Abbil­dung 4.6: Doc­u­ment Com­plete bei dem Abruf der Start­seite über ein 3G-Daten­netz

Eine Verbesserung der Ladezeit durch die Ver­wen­dung eines CDN in Verbindung mit Con­tao kon­nte nicht erzielt wer­den. In geziel­ten Ver­suchen wirk­te sich der zusät­zliche DNS-Lookup neg­a­tiv auf die Gesamt­ladezeit aus und ver­längerte die Block­ierung des Ren­der­ings im Brows­er (siehe Abbil­dung 4.6). Aus diesem Grund wird in dem weit­eren Ver­lauf dieser Arbeit auf die Ver­wen­dung von Con­tent Deliv­ery Net­works, zur Aus­liefer­ung von exter­nen Ressourcen der HTML-Doku­mente, verzichtet.

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

Ähnliche Beiträge