Berücksichtigung des kritischen Rendering Pfades

Die vom Nutzer wahrgenommene Ladezeit einer Webseite lässt sich durch eine gezielte Optimierung der Above the Fold Time beeinflussen. Anhand des kritischen Rendering Pfades können die Ressourcen, die bei dem erstmaligen Abruf der Webseite für die Darstellung der Inhalte im sichtbaren Bereich erforderlich sind, identifiziert werden. Um eine möglichst kurze Above the Fold Time zu erreichen, lassen sich Ressourcen und Definitionen, die außerhalb des kritischen Pfades liegen, im Hintergrund herunterladen, ohne dass der Nutzer dies wahrnimmt [Fri14].

Zur Optimierung der Darstellung direkt sichtbarer Inhalte in dem Browser, lassen sich die dafür erforderlichen CSS-Definitionen mittels Inlinestyling in das <head>-Element des HTML-Dokumentes übernehmen. Der erforderliche CSS-Quellcode des kritischen Pfades kann mit dem Critical Path CSS Generator, anhand des Quellcodes der CSS-Datei und einem Abruf der Webseite, automatisch generiert werden.

Der kritische Pfad in den CSS-Definitionen einer jeden Webseite ist individuell, daher muss dieser für jede Seite einzeln generiert und anschließend in das HTML-Dokument eingefügt werden [Ber15]. Um eine Blockierung des Renderings zu vermeiden, ist die vollständige CSS-Datei asynchron per JavaScript nachzuladen [Dav13]. Dazu bietet sich die Nutzung des vorgefertigten JavaScript loadCSS von Scott Jehl an [Jeh14b]. Weiterhin wird von Barbara Bermes empfohlen, dass das HTML-Dokument und alle Inhalte des kritischen Rendering Pfades, mittels GZIP komprimiert, ein Datenvolumen von maximal 14 Kilobyte aufweisen sollten. Andernfalls werden diese nicht innerhalb der ersten Round Trip Time ausgeliefert und die Ladezeit der Webseite verzögert sich insbesondere bei der Nutzung mobiler Datenverbindungen [Ber15].

Abbildung 3.6: Versuch mit und ohne kritischem CSS über ein 3G-Datennetz in WebPagetest

In Abbildung 3.6 wird die Verbesserung des Renderings bei der Berücksichtigung des kritischen Pfades im HTML-Dokument durch Inlinestyling verdeutlicht. Der Versuch erfolgte über ein 3G-Datennetz mittels WebPagetest. Die Gesamtladezeit der sichtbaren Inhalte konnte um 0,2 Sekunden reduziert werden, während die wahrgenommene Ladezeit um 19 Prozent, von 2,1 auf 1,7 Sekunden, verringert wurde (siehe Abbildung 3.7).

Abbildung 3.7: Verbesserung der visuellen Darstellung durch Inlinestyling

Kommentare sind geschlossen.