Render-Blocking

TL;DR

Render-Blocking-Ressourcen verhindern die Darstellung der Seite, bis sie geladen sind. Lösung: Kritisches inline, Rest deferred.

Was ist Render-Blocking?

Render-Blocking bedeutet, dass der Browser mit dem Rendern wartet, bis bestimmte Ressourcen (CSS, JS) komplett geladen und verarbeitet sind. Das verzögert den First Paint.

Was blockiert das Rendering?

• CSS im Head: Standardmäßig render-blocking
• JavaScript im Head: Ohne async/defer blockierend
• Fonts: Können Text-Rendering blockieren

Warum CSS blockiert

Der Browser muss das komplette CSS kennen, bevor er das Layout berechnen kann. Sonst würde die Seite "springen" (FOUC – Flash of Unstyled Content).

Lösungen

• Critical CSS: Above-the-Fold Styles inline
• async/defer: Für nicht-kritisches JS
• media-Queries: CSS nur für relevante Breakpoints laden
• Preload: Kritische Ressourcen priorisieren

Render-Blocking und Nachhaltigkeit

Früheres Rendering ist effizienter:

• Schneller sichtbare Inhalte
• Weniger gefühlte Wartezeit
• Nutzer kann früher interagieren

Fazit

Render-Blocking-Ressourcen sind ein häufiges Performance-Problem. Mit Critical CSS und async/defer lässt sich der First Paint deutlich beschleunigen.