Was ist der kritische Pfad beim Rendern von Webseiten?

Dies ist eine Abfolge von Schritten, die der Browser ausführt, um den Inhalt der Seite auf dem Bildschirm anzuzeigen, beginnend mit dem Abrufen des HTML-Dokuments. Dazu gehören:

1. Aufbau des DOM (Document Object Model): Parsen des HTML-Codes und Erstellen eines Baums von Objekten, die die Struktur des Dokuments repräsentieren.
2. Aufbau des CSSOM (CSS Object Model): Parsen von CSS-Dateien und Inline-Stilen, um einen Baum von Objekten zu erstellen, die die Stile der Elemente repräsentieren.
3. Aufbau des Renderbaums: Vereinigung von DOM und CSSOM. Es wird ein Baum nur der renderbaren Elemente mit angewendeten Stilen erstellt.
4. Layout (oder Reflow): Bestimmung der geometrischen Maße und der Position jedes Elements auf der Seite.
5. Paint (oder Repaint): Ausfüllen der Pixel auf dem Bildschirm basierend auf dem Renderbaum und den Layout-Daten.

Die Optimierung des kritischen Renderpfads zielt darauf ab, dass der Browser den ersten bedeutungsvollen Inhalt (First Meaningful Paint) oder die Interaktivität (Time to Interactive) so schnell wie möglich anzeigt. Dies wird erreicht durch Minimierung blockierender Ressourcen (JS und CSS), Optimierung der Ressourcengröße und deren Laden zum richtigen Zeitpunkt.