Bewertung der Optimierung der Templates

Zur Quantifizierung der Optimierungen an den Templates wurde ein Vergleich der einzelnen Schritte anhand regelbasierter Bewertungskriterien vorgenommen und in den Tabellen 4.7 und 4.8 zusammengefasst. Die Betrachtung des Template für die Startseite erfolgte, aufgrund des abweichenden Layouts, separat zu dem Template der Unterseiten.

Tabelle 4.7: Bewertung der Optimierungen der Startseite anhand regelbasierter Kriterien

Metrik
Start Schritt 1 Schritt 2 Schritt 3 Schritt 4
YSLOW (Punkte / Note) 76 / C 81 / B 81 / B 94 / A 94 / A
PageSpeed Insights (Mobil / Desktop) 65 / 81 71 / 85 71 / 86 79 / 93 79 / 93
Pingdom 82 84 84 99 99

Tabelle 4.8: Bewertung der Optimierungen der Unterseiten anhand regelbasierter Kriterien

Metrik Start Schritt 1 Schritt 2 Schritt 3 Schritt 4
YSLOW (Punkte / Note) 76 / C 83 / B 87 / B 96 / A 96 / A
PageSpeed Insights (Mobil / Desktop) 66 / 81 73 / 87 73 / 88 79 / 93 79 / 93
Pingdom 82 85 84 98 98

Aus den Tabellen 4.7 und 4.8 lässt sich herleiten, dass jeder Schritt bei der Optimierung eine Verbesserung der Bewertungen zur Folge hatte. Wird der kritische Rendering Pfad aus dem dritten Schritt berücksichtigt, ist bei PageSpeed Insights ein Ergebnis von 100 / 100 (Mobil / Desktop) möglich. Ausschließlich die Einbindung des Stylesheets in dem <head>-Element der HTML-Dokumente führt folglich zu der niedrigeren Bewertung von 79 / 93 der Templates. Um bei der Bewertung durch YSLOW einen Score von 100 zu erreichen, ist die Nutzung eines CDN erforderlich sowie der Verzicht auf den Einsatz einer Web Font über externe Anbieter wie Google Web Fonts. Diese könnten beispielsweise lokal über das eigene CDN ausgeliefert werden.

Eine Reduzierung des zu übertragenden Datenvolumens wurde bei der Optimierung des HTML-Aufbaus, der Bilder und durch serverseitige Maßnahmen erzielt. In Tabelle 4.9 wird die Verbesserung des zu übertragenden Datenvolumens bei dem Abruf über einen Desktop-Rechner und in Tabelle 4.10 über ein mobiles Endgerät dargestellt.

Tabelle 4.9: Übertragenes Datenvolumen bei dem Abruf mittels Desktop-Rechner in Google Chrome

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

Tabelle 4.10: Übertragenes Datenvolumen bei dem Abruf mittels iPhone 6 in Google Chrome

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

Die in diesem Kapitel erstellten statischen HTML-Templates ermöglichen keine Steuerung der Auslieferung spezifischer Elemente und Ressourcen. Erfolgt ein Abruf der Startseite über mobile Endgeräte, könnte das Datenvolumen, durch die serverseitige Entfernung des Content-Sliders und der zugehörigen Ressourcen, um 192 Kilobyte reduziert werden. Weitere 29 Kilobyte ließen sich durch die Vermeidung der Einbindung von Web Fonts einsparen. Diese beiden Maßnahmen würden zu einer Verringerung des Datenvolumens um 81 Prozent bei dem Abruf über mobile Endgeräte führen.

In den nachfolgenden Beiträgen wird die Steuerung auszuliefernder Inhalte, mittels des vorgestellten Ansatzes RESS, für die Content-Management-Systeme umgesetzt.