Bewertung der Optimierung der Templates

Zur Quan­tifizierung der Opti­mierun­gen an den Tem­plates wurde ein Ver­gle­ich der einzel­nen Schritte anhand regel­basiert­er Bew­er­tungskri­te­rien vorgenom­men und in den Tabellen 4.7 und 4.8 zusam­menge­fasst. Die Betra­ch­tung des Tem­plate für die Start­seite erfol­gte, auf­grund des abwe­ichen­den Lay­outs, sep­a­rat zu dem Tem­plate der Unter­seit­en.

Tabelle 4.7: Bew­er­tung der Opti­mierun­gen der Start­seite anhand regel­basiert­er Kri­te­rien

Metrik
Start Schritt 1 Schritt 2 Schritt 3 Schritt 4
YSLOW (Punk­te / Note) 76 / C 81 / B 81 / B 94 / A 94 / A
Page­Speed Insights (Mobil / Desk­top) 65 / 81 71 / 85 71 / 86 79 / 93 79 / 93
Ping­dom 82 84 84 99 99

Tabelle 4.8: Bew­er­tung der Opti­mierun­gen der Unter­seit­en anhand regel­basiert­er Kri­te­rien

Metrik Start Schritt 1 Schritt 2 Schritt 3 Schritt 4
YSLOW (Punk­te / Note) 76 / C 83 / B 87 / B 96 / A 96 / A
Page­Speed Insights (Mobil / Desk­top) 66 / 81 73 / 87 73 / 88 79 / 93 79 / 93
Ping­dom 82 85 84 98 98

Aus den Tabellen 4.7 und 4.8 lässt sich her­leit­en, dass jed­er Schritt bei der Opti­mierung eine Verbesserung der Bew­er­tun­gen zur Folge hat­te. Wird der kri­tis­che Ren­der­ing Pfad aus dem drit­ten Schritt berück­sichtigt, ist bei Page­Speed Insights ein Ergeb­nis von 100 / 100 (Mobil / Desk­top) möglich. Auss­chließlich die Ein­bindung des Stylesheets in dem <head>-Element der HTML-Doku­mente führt fol­glich zu der niedrigeren Bew­er­tung von 79 / 93 der Tem­plates. Um bei der Bew­er­tung durch YSLOW einen Score von 100 zu erre­ichen, ist die Nutzung eines CDN erforder­lich sowie der Verzicht auf den Ein­satz ein­er Web Font über externe Anbi­eter wie Google Web Fonts. Diese kön­nten beispiel­sweise lokal über das eigene CDN aus­geliefert wer­den.

Eine Reduzierung des zu über­tra­gen­den Daten­vol­u­mens wurde bei der Opti­mierung des HTML-Auf­baus, der Bilder und durch ser­ver­seit­ige Maß­nah­men erzielt. In Tabelle 4.9 wird die Verbesserung des zu über­tra­gen­den Daten­vol­u­mens bei dem Abruf über einen Desk­top-Rech­n­er und in Tabelle 4.10 über ein mobiles Endgerät dargestellt.

Tabelle 4.9: Über­tra­genes Daten­vol­u­men bei dem Abruf mit­tels Desk­top-Rech­n­er in Google Chrome

Abruf Start Schritt 1 Schritt 2 Schritt 3 Schritt 4 Verbesserung
Start­seite 359 KB 321 KB 282 KB 259 KB 259 KB 100 KB 28 %
Unter­seite (ohne Bilder) 196 KB 145 KB 105 KB 89 KB 90 KB 106 KB 54 %
Unter­seite (zwei Bilder) 348 KB 297 KB 240 KB 224 KB 222 KB 126 KB 36 %

Tabelle 4.10: Über­tra­genes Daten­vol­u­men bei dem Abruf mit­tels iPhone 6 in Google Chrome

Abruf Start Schritt 1 Schritt 2 Schritt 3 Schritt 4 Verbesserung
Start­seite 496 KB 343 KB 292 KB 270 KB 274 KB 222 KB 45 %
Unter­seite (ohne Bilder) 330 KB 108 KB 92 KB 77 KB 77 KB 253 KB 76 %
Unter­seite (zwei Bilder) 483 KB 261 KB 163 KB 148 KB 148 KB 335 KB 69 %

Die in diesem Kapi­tel erstell­ten sta­tis­chen HTML-Tem­plates ermöglichen keine Steuerung der Aus­liefer­ung spez­i­fis­ch­er Ele­mente und Ressourcen. Erfol­gt ein Abruf der Start­seite über mobile Endgeräte, kön­nte das Daten­vol­u­men, durch die ser­ver­seit­ige Ent­fer­nung des Con­tent-Slid­ers und der zuge­höri­gen Ressourcen, um 192 Kilo­byte reduziert wer­den. Weit­ere 29 Kilo­byte ließen sich durch die Ver­mei­dung der Ein­bindung von Web Fonts eins­paren. Diese bei­den Maß­nah­men wür­den zu ein­er Ver­ringerung des Daten­vol­u­mens um 81 Prozent bei dem Abruf über mobile Endgeräte führen.

In den nach­fol­gen­den Beiträ­gen wird die Steuerung auszuliefer­n­der Inhalte, mit­tels des vorgestell­ten Ansatzes RESS, für die Con­tent-Man­age­ment-Sys­teme umge­set­zt.