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.