Schritt 3: Serverseitige Optimierung und das kritische Rendering

Der dritte Schritt der Performanceoptimierung des Templates umfasste die Optimierung der Datenübertragungen zwischen Webserver und Browser sowie das anschließende clientseitige Rendering. Serverseitig wurden mit Hilfe einer HTACCESS-Datei die in Kapitel 3 beschriebenen Funktionen Keep-Alive, die Komprimierung per GZIP und das clientseitige Caching statischer Ressourcen aktiviert.

Der Einfluss externer Ressourcen auf die Above the Fold Time wurde anhand des kritischen Rendering Pfades in dem Browser überprüft. Hauptsächlich verantwortlich für Verzögerungen bei dem Rendering war die Einbindung der JavaScript-Bibliothek jQuery und der Web Fonts über externe Anbieter. Die erforderliche Zeit für den DNS-Lookup führte zu einer Verzögerung zwischen 0,1 und 0,3 Sekunden. Um eine Optimierung zu erreichen, ist jQuery lokal über den Webserver eingebunden worden. Für die Google Web Fonts war dieses Vorgehen nicht möglich. Ebenso konnte keine Verbesserung der Ladezeit durch den in Kapitel 3.6.7 vorgestellten Web Font Loader erzielt werden. Infolgedessen wurde die CSS-Datei zur Einbindung zunächst in dem <head>-Element des HTML-Dokumentes angegeben. Um das Rendering zu beschleunigen, wurde der Critical Path CSS Generator zur Generierung von Inlinestyles genutzt. Diese wurden für jedes Template individuell generiert und eingebunden. Das vollständige Stylesheet wurde durch das JavaScript loadCSS asynchron nachgeladen. Mit diesen Änderungen konnten bei der Bewertung durch Google PageSpeed Insights 100 von 100 möglichen Punkten erzielt werden. Eine schnellere Generierung der sichtbaren Inhalte im Browser blieb jedoch aus und das zu übertragende Datenvolumen erhöhte sich trotz der Komprimierung um 2 Kilobyte für jedes HTML-Dokument. Aus diesem Grund wurde auf die Nutzung von Inlinestyles für den kritischen Rendering Pfad bei der weiteren Erstellung des Themes verzichtet.

Die serverseitige Komprimierung der textbasierten Ressourcen führte zu einer weiteren Reduzierung des zu übertragenden Datenvolumens (siehe Tabelle 4.4). Die Definitionen zum clientseitigen Caching dienen zumeist für ergänzende Anweisungen, viele Browser halten die bisher übertragenen Ressourcen standardmäßig für eine gewisse Zeit vor.

Tabelle 4.4: Ergebnisse der serverseitigen Optimierungen per HTACCESS

Optimierung Schritt 2 Schritt 3 Verbesserung
Erster Abruf Startseite 282 KB 259 KB 23 KB 8 %
Zweiter Abruf Startseite 282 KB 5 KB 277 KB 98 %
Erster Abruf Unterseite (nur Text) 105 KB 89 KB 16 KB 15 %
Zweiter Abruf Unterseite (nur Text) 105 KB 2 KB 102 KB 98 %
YSLOW (Punkte / Note) 81 / B 95 / A 14
PageSpeed Insights (Mobil / Desktop) 71 / 86 79 / 93 8 / 7

Kommentare sind geschlossen.