Zurück zum Glossar

Begriff

Render-Blocking Resources

Render-Blocking Resources sind CSS- und JavaScript-Dateien, die der Browser lädt und parst, bevor er rendern kann. Verzögern FCP und LCP — minimieren via async/defer, kritisches CSS inline, ungenutztes CSS entfernen.

Render-Blocking Resources — ausführlicher erklärt

Standardmäßig blockiert externes CSS und synchrones JavaScript im <head> den Render-Prozess: Der Browser muss die Datei laden, parsen und ausführen, bevor er den ersten Pixel auf den Bildschirm zeichnet. Bei langsamer Verbindung oder vielen Render-Blocking-Dateien addieren sich die Latenzen, FCP und LCP wandern in den roten Bereich.

Zwei Hebel: CSS wird aufgesplittet — kritisches “Above-the-Fold”-CSS inline ins HTML, der Rest async geladen (media="print" onload=...-Trick oder native rel="preload"-Patterns). JavaScript mit async (lädt parallel, führt sofort aus) oder defer (lädt parallel, führt nach DOMContentLoaded aus) markieren — beides macht Skripte nicht-render-blocking.

Beispiel / Praxisbezug

Eine WordPress-Site lädt vier Plugin-CSS-Dateien synchron im <head>. Lighthouse meldet 1,2 s “Eliminate render-blocking resources”. Lösung: kritisches CSS extrahieren und inline einbetten, restliche CSS async laden (rel="preload" as="style" + onload swap). Render-Blocking-Zeit fällt auf nahe null.

Abgrenzung zu ähnlichen Begriffen

Critical Rendering Path ist der Gesamtprozess; Render-Blocking-Resources sind ein konkreter Engpass darin. Lazy Loading betrifft Bilder und Iframes (unten auf der Seite) — andere Optimierung, andere Zielmetrik (LCP für Hero-Bilder, nicht generelles Render-Blocking).

Entdecke mehr