Berücksichtigung des kritischen Rendering Pfades

Die vom Nutzer wahrgenommene Ladezeit ein­er Web­seite lässt sich durch eine gezielte Opti­mierung der Above the Fold Time bee­in­flussen. Anhand des kri­tis­chen Ren­der­ing Pfades kön­nen die Ressourcen, die bei dem erst­ma­li­gen Abruf der Web­seite für die Darstel­lung der Inhalte im sicht­baren Bere­ich erforder­lich sind, iden­ti­fiziert wer­den. Um eine möglichst kurze Above the Fold Time zu erre­ichen, lassen sich Ressourcen und Def­i­n­i­tio­nen, die außer­halb des kri­tis­chen Pfades liegen, im Hin­ter­grund herun­ter­laden, ohne dass der Nutzer dies wahrn­immt [Fri14].

Zur Opti­mierung der Darstel­lung direkt sicht­bar­er Inhalte in dem Brows­er, lassen sich die dafür erforder­lichen CSS-Def­i­n­i­tio­nen mit­tels Inlinestyling in das <head>-Element des HTML-Doku­mentes übernehmen. Der erforder­liche CSS-Quell­code des kri­tis­chen Pfades kann mit dem Crit­i­cal Path CSS Gen­er­a­tor, anhand des Quell­codes der CSS-Datei und einem Abruf der Web­seite, automa­tisch gener­iert wer­den.

Der kri­tis­che Pfad in den CSS-Def­i­n­i­tio­nen ein­er jeden Web­seite ist indi­vidu­ell, daher muss dieser für jede Seite einzeln gener­iert und anschließend in das HTML-Doku­ment einge­fügt wer­den [Ber15]. Um eine Block­ierung des Ren­der­ings zu ver­mei­den, ist die voll­ständi­ge CSS-Datei asyn­chron per JavaScript nachzu­laden [Dav13]. Dazu bietet sich die Nutzung des vorge­fer­tigten JavaScript load­C­SS von Scott Jehl an [Jeh14b]. Weit­er­hin wird von Bar­bara Bermes emp­fohlen, dass das HTML-Doku­ment und alle Inhalte des kri­tis­chen Ren­der­ing Pfades, mit­tels GZIP kom­prim­iert, ein Daten­vol­u­men von max­i­mal 14 Kilo­byte aufweisen soll­ten. Andern­falls wer­den diese nicht inner­halb der ersten Round Trip Time aus­geliefert und die Ladezeit der Web­seite verzögert sich ins­beson­dere bei der Nutzung mobil­er Daten­verbindun­gen [Ber15].

Abbil­dung 3.6: Ver­such mit und ohne kri­tis­chem CSS über ein 3G-Daten­netz in Web­Pagetest

In Abbil­dung 3.6 wird die Verbesserung des Ren­der­ings bei der Berück­sich­ti­gung des kri­tis­chen Pfades im HTML-Doku­ment durch Inlinestyling verdeut­licht. Der Ver­such erfol­gte über ein 3G-Daten­netz mit­tels Web­Pagetest. Die Gesamt­ladezeit der sicht­baren Inhalte kon­nte um 0,2 Sekun­den reduziert wer­den, während die wahrgenommene Ladezeit um 19 Prozent, von 2,1 auf 1,7 Sekun­den, ver­ringert wurde (siehe Abbil­dung 3.7).

Abbil­dung 3.7: Verbesserung der visuellen Darstel­lung durch Inlinestyling