Zurück zum Glossar

Begriff

Critical Rendering Path

Der Critical Rendering Path ist die Sequenz, die der Browser durchläuft, um HTML/CSS/JS in Pixel zu verwandeln Parsing, Render-Tree, Layout, Paint. Optimierung verkürzt First Paint und LCP.

Critical Rendering Path — ausführlicher erklärt

Der Critical Rendering Path beschreibt die Schritte zwischen “HTML kommt vom Server an” und “Pixel auf dem Bildschirm”. Vereinfacht: HTML parsen → DOM bauen, CSS parsen → CSSOM bauen, beide kombinieren → Render-Tree, dann Layout (Geometrie), dann Paint (Farben/Pixel), dann Compositing.

Synchrone Render-Blocking-Resources (CSS, sync JS) bremsen diese Pipeline an mehreren Stellen aus, weil der Browser nicht ohne CSSOM rendern und nicht ohne JS-Ausführung sicher weiter parsen kann. Die Optimierungs-Idee: kritischen Pfad auf das absolute Minimum reduzieren (kritisches CSS inline, JS deferred, Webfonts non-blocking) — der erste Frame entsteht früher, FCP und LCP profitieren direkt.

Beispiel / Praxisbezug

Lighthouse-Audit “Critical Rendering Path” zeigt für eine Landing-Page 5 Round-Trips (HTML, 3× CSS, 1× JS) bis zum First Paint. Nach Inlining von Above-the-Fold-CSS und defer auf JS bleibt 1 Round-Trip — First Paint von 2,1 s auf 0,7 s.

Abgrenzung zu ähnlichen Begriffen

Render-Blocking Resources sind ein konkreter Engpass im CRP. Time to First Paint ist das Resultat des CRP. Hydration kommt erst danach — sie macht serverseitig gerendertes HTML interaktiv.

Entdecke mehr