Schritt 1: Überarbeitung der HTML-Dokumente und Stylesheets

Den ersten Schritt der Opti­mierung stellte eine Über­ar­beitung der HTML-Doku­mente und der Stylesheets dar. Um die Anzahl der Anfra­gen an den Web­serv­er zu reduzieren, wur­den die CSS-Dateien und JavaScript-Dateien zu jew­eils ein­er einzi­gen Datei zusam-menge­führt. Dies ermöglichte eine Reduzierung der extern einge­bun­de­nen Skripte um drei, von 18 auf 15 Skripte. Zeit­gle­ich wurde die Ein­bindung des JavaScript aus dem <head>-Element ent­fer­nt und vor dem schließen­den </body>-Element einge­fügt. Das asyn­chrone Laden des JavaScript führte zu Darstel­lungs­fehlern in der Nav­i­ga­tion und kon­nte daher keine Ver­wen­dung find­en.

Die JavaScript-Datei für die Funk­tion­al­ität des Con­tent-Slid­ers war in allen Tem­plates vorhan­den. Jedoch wird diese auss­chließlich in dem Tem­plate der Start­seite benötigt und kon­nte somit aus den anderen Tem­plates ent­fer­nt wer­den. Darüber hin­aus kon­nte eine Verbesserung der Ladezeit durch die Opti­mierung der einge­bun­de­nen Google Web Fonts erre­icht wer­den. Es wer­den auss­chließlich die genutzten Schriftschnitte Nor­mal und Fett einge­bun­den und der Zeichen­satz wurde auf Latin begren­zt. Zuvor wur­den sechs Zeichen­sätze sowie sechs Schriftschnitte geladen, die gemäß Google einen Ein-fluss von 630 Kilo­byte auf die Seit­en­ladezeit hat­ten und durch diese Anpas­sung um 600 Kilo­byte auf einen Ein­fluss von 30 Kilo­byte reduziert wer­den kon­nten.

Die seman­tis­che Struk­tur der HTML-Doku­mente wurde durch die Ent­fer­nung unnötiger Ele­mente vere­in­facht. Im Rah­men der Ausze­ich­nung wur­den die ein­fachen <div>-Ele-mente gegen spez­i­fis­che HTM­L5-Ele­mente mit seman­tis­ch­er Bedeu­tung erset­zt. Die optis­che Darstel­lung in dem Brows­er blieb durch diese Opti­mierun­gen unverän­dert und das Daten­vol­u­men der HTML-Doku­mente des Tem­plate kon­nte um 32 Prozent, von 90 Kilo­byte auf 61 Kilo­byte, ver­ringert wer­den.

Eine umfassende Über­ar­beitung erfuhr das Stylesheet durch den Wech­sel des Ansatzes von ein­er Grace­ful Degra­da­tion, bei der immer von dem leis­tungsstärk­sten Endgerät aus­ge­gan­gen wird, hin zu dem Mobile First Ansatz. Um das Ren­der­ing in den Browsern zu beschle­u­ni­gen wurde der Quell­code in dem Stylesheet, anhand der in Kapi­tel 3.6.4 vorgestell­ten Meth­o­d­en, opti­miert und neu struk­turi­ert. Durch die vor­ange­gan­gene Über­ar­beitung des Auf­baus der HTML-Doku­mente waren Vere­in­fachun­gen bei den CSS-Def­i­n­i­tio­nen möglich. Es wurde eine Reduzierung des Daten­vol­u­mens der CSS-Datei um 54 Prozent, von 24 Kilo­byte auf 11 Kilo­byte, erzielt.

Eine anschließende Minifizierung des Stylesheets über den Web-Dienst CSS Mini­fi­er reduzierte die CSS-Datei um weit­ere 27 Prozent auf 8 Kilo­byte. Eine abschließende Minifizierung der JavaScript-Dateien durch JS Mini­fi­er ver­ringerte die Dateigröße um 55 Prozent, von 33 Kilo­byte auf 15 Kilo­byte.

Durch die Opti­mierun­gen der Tem­plates kon­nte in dem ersten Schritt der Per­for­mance-opti­mierung, wie aus Tabelle 4.2 auf der fol­gen­den Seite her­vorge­ht, eine Reduzierung des Daten­vol­u­mens der HTML-Doku­mente, Stylesheets und JavaScripts um 43 Prozent erzielt wer­den.

Tabelle 4.2: Ergeb­nisse der Opti­mierung der HTML-Doku­mente, Stylesheets und JavaScripts

Opti­mierung Start Schritt 1 Verbesserung
Anfra­gen – Tem­plate Start­seite 18 15 3 17 %
Anfra­gen – Tem­plate Unter­seit­en 17 13 4 24 %
HTML-Doku­mente (alle zusam­men) 90 KB 61 KB 29 KB 32 %
Stylesheets 24 KB 8 KB 16 KB 33 %
JavaScript 34 KB 15 KB 19 KB 44 %
Gesamtes Daten­vol­u­men (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 (Punk­te / Note) 76 / C 80 / B 4 -
Page­Speed Insights (Mobil / Desk­top) 65 / 81 71 / 85 6 / 4 -

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