Schritt 1: Überarbeitung der HTML-Dokumente und Stylesheets

Den ersten Schritt der Optimierung stellte eine Überarbeitung der HTML-Dokumente und der Stylesheets dar. Um die Anzahl der Anfragen an den Webserver zu reduzieren, wurden die CSS-Dateien und JavaScript-Dateien zu jeweils einer einzigen Datei zusam-mengeführt. Dies ermöglichte eine Reduzierung der extern eingebundenen Skripte um drei, von 18 auf 15 Skripte. Zeitgleich wurde die Einbindung des JavaScript aus dem <head>-Element entfernt und vor dem schließenden </body>-Element eingefügt. Das asynchrone Laden des JavaScript führte zu Darstellungsfehlern in der Navigation und konnte daher keine Verwendung finden.

Die JavaScript-Datei für die Funktionalität des Content-Sliders war in allen Templates vorhanden. Jedoch wird diese ausschließlich in dem Template der Startseite benötigt und konnte somit aus den anderen Templates entfernt werden. Darüber hinaus konnte eine Verbesserung der Ladezeit durch die Optimierung der eingebundenen Google Web Fonts erreicht werden. Es werden ausschließlich die genutzten Schriftschnitte Normal und Fett eingebunden und der Zeichensatz wurde auf Latin begrenzt. Zuvor wurden sechs Zeichensätze sowie sechs Schriftschnitte geladen, die gemäß Google einen Ein-fluss von 630 Kilobyte auf die Seitenladezeit hatten und durch diese Anpassung um 600 Kilobyte auf einen Einfluss von 30 Kilobyte reduziert werden konnten.

Die semantische Struktur der HTML-Dokumente wurde durch die Entfernung unnötiger Elemente vereinfacht. Im Rahmen der Auszeichnung wurden die einfachen <div>-Ele-mente gegen spezifische HTML5-Elemente mit semantischer Bedeutung ersetzt. Die optische Darstellung in dem Browser blieb durch diese Optimierungen unverändert und das Datenvolumen der HTML-Dokumente des Template konnte um 32 Prozent, von 90 Kilobyte auf 61 Kilobyte, verringert werden.

Eine umfassende Überarbeitung erfuhr das Stylesheet durch den Wechsel des Ansatzes von einer Graceful Degradation, bei der immer von dem leistungsstärksten Endgerät ausgegangen wird, hin zu dem Mobile First Ansatz. Um das Rendering in den Browsern zu beschleunigen wurde der Quellcode in dem Stylesheet, anhand der in Kapitel 3.6.4 vorgestellten Methoden, optimiert und neu strukturiert. Durch die vorangegangene Überarbeitung des Aufbaus der HTML-Dokumente waren Vereinfachungen bei den CSS-Definitionen möglich. Es wurde eine Reduzierung des Datenvolumens der CSS-Datei um 54 Prozent, von 24 Kilobyte auf 11 Kilobyte, erzielt.

Eine anschließende Minifizierung des Stylesheets über den Web-Dienst CSS Minifier reduzierte die CSS-Datei um weitere 27 Prozent auf 8 Kilobyte. Eine abschließende Minifizierung der JavaScript-Dateien durch JS Minifier verringerte die Dateigröße um 55 Prozent, von 33 Kilobyte auf 15 Kilobyte.

Durch die Optimierungen der Templates konnte in dem ersten Schritt der Performance-optimierung, wie aus Tabelle 4.2 auf der folgenden Seite hervorgeht, eine Reduzierung des Datenvolumens der HTML-Dokumente, Stylesheets und JavaScripts um 43 Prozent erzielt werden.

Tabelle 4.2: Ergebnisse der Optimierung der HTML-Dokumente, Stylesheets und JavaScripts

Optimierung Start Schritt 1 Verbesserung
Anfragen – Template Startseite 18 15 3 17 %
Anfragen – Template Unterseiten 17 13 4 24 %
HTML-Dokumente (alle zusammen) 90 KB 61 KB 29 KB 32 %
Stylesheets 24 KB 8 KB 16 KB 33 %
JavaScript 34 KB 15 KB 19 KB 44 %
Gesamtes Datenvolumen (HTML, CSS, JS) 148 KB 84 KB 64 KB 43 %
Google Web Font impact on page load time[1] 630 KB 30 KB 600 KB 95 %
YSLOW (Punkte / Note) 76 / C 80 / B 4
PageSpeed Insights (Mobil / Desktop) 65 / 81 71 / 85 6 / 4

[1] gemäß der Angabe von Google in der Übersicht bei der Auswahl der Google Web Font „Open Sans“