TYPO3

Das Enter­prise Con­tent-Man­age­ment-Sys­tem TYPO3 wurde in dem Jahr 2002 in der finalen Ver­sion 3.0 veröf­fentlicht, bei allen vorheri­gen Veröf­fentlichun­gen han­delte es sich um Beta-Ver­sio­nen [Typ]. Im Rah­men dieser Arbeit wurde die Ver­sion 7.4 des TYPO3 CMS einge­set­zt. Diese Ver­sion lässt sich, gemäß der Roadmap[1], auf die am 10. Novem­ber 2015 veröf­fentlichte Ver­sion 7.6 von TYPO3 updat­en und bietet einen Long-Term-Sup­port für sicher­heit­srel­e­vante Updates bis in das Jahr 2018.

Mit der aktuellen Ver­sion 7 des TYPO3 CMS wurde der grundle­gende Quell­code des Sys­tems über­ar­beit­et und eine Verbesserung der Per­for­mance gegenüber den bish­eri­gen Ver­sio­nen des CMS erzielt [Bri15].

Optimierung der Konfiguration

Nach der Instal­la­tion des TYPO3 CMS auf dem Web­serv­er erfol­gte das Anle­gen der Seit­en­struk­tur und die Über­nahme der Inhalte. Die einzel­nen Tem­plates des Themes wur­den mit den Beze­ich­n­ern zur Ein­bindung dynamis­ch­er Inhalte verse­hen und das entsprechende Typo­Script für die Funk­tion­al­itäten der Web­site angelegt.

Ein client­seit­iges Caching der Inhalte ist bei TYPO3 stan­dard­mäßig aktiviert und erfol­gt durch eine mit­gelieferte HTAC­CESS-Datei, die bere­its viele Opti­mierun­gen zur Verbesserung der Ladezeit bei der Aus­liefer­ung von Web­seit­en berück­sichtigt. Über die Grund­kon­fig­u­ra­tion hin­aus­ge­hende Anpas­sun­gen zur Per­for­manceop­ti­mierung stellt das Sys­tem nicht zur Ver­fü­gung.

Um eine Verbesserung des Ren­der­ings in den Browsern durch die Berück­sich­ti­gung des kri­tis­chen Ren­der­ing Pfades zu erzie­len, wurde der erforder­liche CSS-Quell­code, wie in Kapi­tel 4.2.3 beschrieben, für jedes Tem­plate gener­iert und in den HTML-Dateien der inte­gri­erten Tem­plates mit­tels Inlinestyling hin­ter­legt. Sofern ein Web­seit­en­lay­out von dem Grun­dauf­bau abwe­icht, ist es in TYPO3 erforder­lich, ein sep­a­rates Tem­plate für diese Web­seite zu erstellen und das Tem­plate mit­tels Typo­Script zu verknüpfen.

Die in Kapi­tel 3.5.2 vorgestellte Ein­bindung von Respon­sive Images ist in TYPO3 seit der Ver­sion 6.2 stan­dard­mäßig inte­gri­ert. Die Aktivierung der Funk­tion­al­ität erfol­gt in der Kon­fig­u­ra­tion des Tem­plates über den Con­stant Edi­tor. Dort kann unter dem Punkt Ren­der­ing-type for respon­sive image zwis­chen den Angaben „default“, „img-tag with alter­nate sources as src­set-attribute“ und „pic­ture-tag with source-child-tags“, zu der Ein­bindung von Respon­sive Images, durch das <picture>-Element oder das src­set-Attrib­ut gewählt wer­den. Im Anschluss müssen die von dem Sys­tem zu gener­ieren­den Auflö­sun­gen der Bilder in das Typo­Script des Tem­plate aufgenom­men wer­den. Der fol­gende Auss­chnitt zeigt die Kon­fig­u­ra­tion zur Gener­ierung und Aus­liefer­ung der Bilder in drei Auflö­sun­gen mit ein­er Bre­ite von 480 Pix­eln, 720 Pix­eln und 990 Pix­eln.

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 Iden­ti­fika­tion des User Agent wurde aus der Ver­sion 7 des TYPO3 CMS ent­fer­nt. Eine Def­i­n­i­tion der auszuliefer­n­den Inhalte und Ressourcen, wie bei den vorheri­gen Ver­sio­nen des CMS, ist nicht möglich. Diese Funk­tion­al­ität lässt sich mit der Erweiterung Mobile Helper hinzufü­gen.

Nach der Instal­la­tion von Mobile Helper, über das Repos­i­to­ry von TYPO3, wur­den für alle Tem­plates mobile Ver­sio­nen erstellt. Anschließend erfol­gte eine Ergänzung des be-ste­hen­den Typo­Script mit dem nach­fol­gen­den Quell­code zur Aus­liefer­ung der mobilen Tem­plates bei dem Abruf der Web­site über mobile Endgeräte.

[userFunc = user_lvmobile_isMobile]
  temp.docHead {
    template.file = fileadmin/templates/main/page-mobile.html
  }
[end]

Zur ser­ver­seit­i­gen Opti­mierung und Reduzierung der gener­ierten HTML-Doku­mente wurde die Erweiterung Sourceopt einge­set­zt. Diese opti­miert und minifiziert den Quell­code vor der Aus­liefer­ung an das Endgerät des Nutzers.

Bewertung von TYPO3

Das TYPO3 CMS erforderte in der Grund­kon­fig­u­ra­tion die Def­i­n­i­tion zur Gener­ierung der Respon­sive Images, weit­ere Anpas­sun­gen, wie die Berück­sich­ti­gung des kri­tis­chen Ren­der­ing Pfades, erfol­gten bei der Inte­gra­tion des Tem­plate. Die Kom­prim­ierung der HTML-Doku­mente und die Steuerung der Aus­liefer­ung von bes­timmten Inhal­ten für mobile Endgeräte erfol­gten über die Instal­la­tion von Erweiterun­gen extern­er Anbi­eter.

Die Opti­mierun­gen verbesserten die wahrgenommene Ladezeit bei dem Abruf der Start­seite über einen Desk­top-Rech­n­er um 27 Prozent, gle­ichzeit­ig blieb die Darstel­lungszeit der Unter­seit­en unverän­dert. Durch die automa­tis­che Gener­ierung und Ein­bindung ein­er CSS-Datei im <head>-Element der HTML-Doku­mente kon­nte keine Verbesserung der Bew­er­tung durch Page­Speed Insights erre­icht wer­den (siehe Tabelle 4.17 und 4.18).

Tabelle 4.17: Start­seite aus­geliefert durch TYPO3 beim Abruf über einen Desk­top-Rech­n­er

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 1,1 Sekun­den 0,8 Sekun­den 0,3 Sekun­den 27 %
SpeedIn­dex 657 611 46 7 %
Doc­u­ment Com­plete 1,0 Sekun­den 0,9 Sekun­den 0,1 Sekun­den 10 %
Page­speed Insights 79 / 93 79 / 93 - / - -
YSLOW 93 / A 93 / A - / - -
Ping­dom 98 98 - -

Tabelle 4.18: Unter­seite aus­geliefert durch TYPO3 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,9 Sekun­den - -
SpeedIn­dex 645 629 16 2 %
Doc­u­ment Com­plete 0,9 Sekun­den 0,9 Sekun­den - -
Page­speed Insights 79 / 93 79 / 93 - / - -
YSLOW 94 / A 94 / A - / - -
Ping­dom 98 98 - -

Noch deut­lich­er fall­en hinge­gen die Verbesserun­gen bei einem Abruf der von TYPO3 gener­ierten Web­seit­en durch mobile Endgeräte aus. Die Ladezeit­en kon­nten durch eine Reduzierung der einge­bun­de­nen Ressourcen und des Daten­vol­u­mens reduziert wer­den. Bei dem Abruf der Start­seite über ein 3G-Daten­netz kon­nten das Daten­vol­u­men um 80 Prozent und die Ladezeit um 41 Prozent ver­ringert wer­den (siehe Tabelle 4.19).

Tabelle 4.19: Start­seite aus­geliefert durch TYPO3 beim Abruf über ein 3G-Daten­netz

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 3,3 Sekun­den 1,9 Sekun­den 1,4 Sekun­den 42 %
SpeedIn­dex 2298 1807 491 21 %
Doc­u­ment Com­plete 4,4 Sekun­den 2,6 Sekun­den 1,8 Sekun­den 41 %
Anfra­gen 14 7 7 50 %
Daten­vol­u­men 270 KB 54 KB 216 KB 80 %

Tabelle 4.20: Unter­seite aus­geliefert durch TYPO3 beim Abruf über ein 3G-Daten­netz

Metrik Nor­mal Opti­miert Verbesserung
Visu­al­ly Com­plete 3,2 Sekun­den 1,9 Sekun­den 1,3 Sekun­den 41 %
SpeedIn­dex 2780 1615 1165 42 %
Doc­u­ment Com­plete 3,7 Sekun­den 3,4 Sekun­den 0,3 Sekun­den 8 %
Anfra­gen 12 9 3 25 %
Daten­vol­u­men 211 KB 189 KB 22 KB 10 %

Bei den Unter­seit­en fällt die Reduzierung des Daten­vol­u­mens gemäß der Tabelle 4.20 nicht in gle­ichem Maße wie zuvor bei der Start­seite aus, den­noch verbesserte sich die wahrgenommene Ladezeit um 41 Prozent auf 1,9 Sekun­den. Eine Gegenüber­stel­lung mit den Con­tent-Man­age­ment-Sys­te­men Con­tao und Word­Press erfol­gt in Kapi­tel 4.7.

[1] https://typo3.org/typo3-cms/roadmap/ (abgerufen am 15.11.2015)

Ähnliche Beiträge