Schritt 3: Serverseitige Optimierung und das kritische Rendering

Der dritte Schritt der Per­for­manceop­ti­mierung des Tem­plates umfasste die Opti­mierung der Datenüber­tra­gun­gen zwis­chen Web­serv­er und Brows­er sowie das anschließende client­seit­ige Ren­der­ing. Ser­ver­seit­ig wur­den mit Hil­fe ein­er HTAC­CESS-Datei die in Kapi­tel 3 beschriebe­nen Funk­tio­nen Keep-Alive, die Kom­prim­ierung per GZIP und das client­seit­ige Caching sta­tis­ch­er Ressourcen aktiviert.

Der Ein­fluss extern­er Ressourcen auf die Above the Fold Time wurde anhand des kri­tis­chen Ren­der­ing Pfades in dem Brows­er über­prüft. Haupt­säch­lich ver­ant­wortlich für Verzögerun­gen bei dem Ren­der­ing war die Ein­bindung der JavaScript-Bib­lio­thek jQuery und der Web Fonts über externe Anbi­eter. Die erforder­liche Zeit für den DNS-Lookup führte zu ein­er Verzögerung zwis­chen 0,1 und 0,3 Sekun­den. Um eine Opti­mierung zu erre­ichen, ist jQuery lokal über den Web­serv­er einge­bun­den wor­den. Für die Google Web Fonts war dieses Vorge­hen nicht möglich. Eben­so kon­nte keine Verbesserung der Ladezeit durch den in Kapi­tel 3.6.7 vorgestell­ten Web Font Loader erzielt wer­den. Infolgedessen wurde die CSS-Datei zur Ein­bindung zunächst in dem <head>-Element des HTML-Doku­mentes angegeben. Um das Ren­der­ing zu beschle­u­ni­gen, wurde der Crit­i­cal Path CSS Gen­er­a­tor zur Gener­ierung von Inlinestyles genutzt. Diese wur­den für jedes Tem­plate indi­vidu­ell gener­iert und einge­bun­den. Das voll­ständi­ge Stylesheet wurde durch das JavaScript load­C­SS asyn­chron nachge­laden. Mit diesen Änderun­gen kon­nten bei der Bew­er­tung durch Google Page­Speed Insights 100 von 100 möglichen Punk­ten erzielt wer­den. Eine schnellere Gener­ierung der sicht­baren Inhalte im Brows­er blieb jedoch aus und das zu über­tra­gende Daten­vol­u­men erhöhte sich trotz der Kom­prim­ierung um 2 Kilo­byte für jedes HTML-Doku­ment. Aus diesem Grund wurde auf die Nutzung von Inlinestyles für den kri­tis­chen Ren­der­ing Pfad bei der weit­eren Erstel­lung des Themes verzichtet.

Die ser­ver­seit­ige Kom­prim­ierung der textbasierten Ressourcen führte zu ein­er weit­eren Reduzierung des zu über­tra­gen­den Daten­vol­u­mens (siehe Tabelle 4.4). Die Def­i­n­i­tio­nen zum client­seit­i­gen Caching dienen zumeist für ergänzende Anweisun­gen, viele Brows­er hal­ten die bish­er über­tra­ge­nen Ressourcen stan­dard­mäßig für eine gewisse Zeit vor.

Tabelle 4.4: Ergeb­nisse der ser­ver­seit­i­gen Opti­mierun­gen per HTACCESS

Opti­mierung Schritt 2 Schritt 3 Verbesserung
Erster Abruf Start­seite 282 KB 259 KB 23 KB 8 %
Zweit­er Abruf Start­seite 282 KB 5 KB 277 KB 98 %
Erster Abruf Unter­seite (nur Text) 105 KB 89 KB 16 KB 15 %
Zweit­er Abruf Unter­seite (nur Text) 105 KB 2 KB 102 KB 98 %
YSLOW (Punk­te / Note) 81 / B 95 / A 14 -
Page­Speed Insights (Mobil / Desk­top) 71 / 86 79 / 93 8 / 7 -