Critical Rendering Path
Bevor eine Webseite im Browser angezeigt wird geschehen für den Nutzer nicht ersichtlich, mehrere Dinge. Das HTML wird heruntergeladen und ein DOM wird aufgebaut. Die verlinkten CSS-Dateien werden heruntergeladen und geparst. Ebenfalls werden auch die JavaScipt-Dateien heruntergeladen und ausgeführt.
Alle diese Schritte blockieren das Rendern (Anzeigen) der Webseite im Browser. Nachdem der DOM aufgebaut ist, wird ein CSSOM (CSS Object Model) aufgebaut. Auch dieses benötigt Zeit und blockiert.
Nach dem DOM und dem CSSOM berechnet der Browser das Layout der Webseite und teilt diese in CSS-Boxen ein. Nachdem die Berechnung des Layouts erfolgt ist werden die Farben auf der Seite berechnet und anschliessend angezeigt.
Optimierungen
Man hat verschiedene Möglichkeiten zur Optimierung des CRP. Man kann z. B. nur gewisse, benötigte Styles (Navbar, Main-Content) inline vor allen anderen Styles machen.
Ebenfalls gibt es die Möglichkeit JavaScripts asynchron zu laden (nicht blockierend). Somit kann man JS-Dateien, welche nicht sofort benötigt werden asynchron nachladen (bsp. Google Analytics).
Netflix z. B. zeigt dem Benutzer erst einmal eine Vorschau in schwarz-weiss, wo danach Bilder hinein gerendert werden.
Weitere Artikel
Understanding the critical rendering path
An introduction to web performance and the critical rendering path
How CSS works: Parsing & painting CSS in the critical rendering path