Render Blocking Resources: Was sie sind und wie du sie eliminierst
Render Blocking Resources verlangsamen deine Webseite. Erfahre was dahinter steckt und wie du sie Schritt für Schritt beseitigst.
Deine Webseite lädt langsam, obwohl der Server eigentlich schnell ist? Die Ursache sind häufig Render Blocking Resources – CSS- und JavaScript-Dateien, die den Browser blockieren, bevor er irgendetwas anzeigen kann. In diesem Artikel erfährst du, was Render Blocking Resources genau sind, wie du sie findest und wie du sie Schritt für Schritt eliminierst.
Wenn du dich allgemein für Ladezeit-Optimierung interessierst, empfehle ich dir zuerst unseren Artikel Website-Ladezeit verbessern.
Was sind Render Blocking Resources?
Wenn ein Browser deine Webseite lädt, verarbeitet er den HTML-Code von oben nach unten. Sobald er auf eine CSS- oder JavaScript-Datei stößt, stoppt er – und zwar komplett. Er lädt die externe Datei herunter, verarbeitet sie und fährt erst dann mit dem Rest der Seite fort.
Das bedeutet: Solange diese Dateien nicht vollständig geladen und verarbeitet sind, sieht der Nutzer nichts. Der Bildschirm bleibt weiß. Das ist das „Render Blocking" – das Blockieren der Darstellung.
CSS als Render Blocking Resource
CSS-Dateien blockieren grundsätzlich immer das Rendering. Der Browser wartet, bis er alle CSS-Regeln kennt, bevor er die Seite zeichnet. Das hat einen guten Grund: Ohne CSS würde die Seite kurz ungestylt aufblitzen (Flash of Unstyled Content), bevor das richtige Design erscheint.
Das Problem entsteht, wenn du viele oder große CSS-Dateien hast. Jede zusätzliche CSS-Datei verlängert die Zeit, bis der Nutzer etwas sieht.
JavaScript als Render Blocking Resource
JavaScript-Dateien ohne besondere Attribute blockieren ebenfalls das Rendering. Der Browser muss jede Datei herunterladen und ausführen, bevor er mit dem HTML-Parsing fortfährt. Bei mehreren großen JS-Dateien im <head> kann das die Ladezeit massiv verlängern.
Render Blocking Resources finden
Google PageSpeed Insights
Der einfachste Weg: Gib deine URL bei PageSpeed Insights ein. Unter „Empfehlungen" zeigt dir Google die Meldung „Render-blockierende Ressourcen eliminieren" mit einer genauen Liste aller blockierenden Dateien und der geschätzten Zeitersparnis.
Lighthouse in Chrome DevTools
Lighthouse ist das gleiche Tool wie PageSpeed Insights, läuft aber lokal in deinem Browser. Öffne die Chrome DevTools (F12), gehe zum Tab „Lighthouse" und starte einen Audit. Unter „Performance" findest du die gleiche Empfehlung mit allen Details.
Chrome DevTools – Coverage Tab
Der Coverage Tab in den Chrome DevTools zeigt dir, wie viel deines CSS und JavaScript tatsächlich auf der aktuellen Seite verwendet wird. Oft sind es weniger als 30 Prozent. Der Rest ist ungenutzter Code, der trotzdem geladen und verarbeitet wird – und das Rendering blockiert.
Mehr dazu und zur Optimierung deiner Core Web Vitals findest du in unserem ausführlichen Guide.
Lösungen: Render Blocking Resources eliminieren
Critical CSS (Inline CSS)
Die wirkungsvollste Maßnahme für CSS: Extrahiere den CSS-Code, der für den sichtbaren Bereich der Seite (Above the Fold) benötigt wird und füge ihn direkt inline in den HTML-Head ein. Das restliche CSS lädst du dann asynchron nach.
<head>
<style>
/* Critical CSS – nur die Styles für den sichtbaren Bereich */
body { font-family: sans-serif; margin: 0; }
.header { background: #333; color: white; padding: 1rem; }
</style>
<link rel="preload" href="/styles/main.css" as="style" onload="this.rel='stylesheet'" />
</head>
Der Nutzer sieht sofort eine gestylte Seite. Das vollständige CSS wird im Hintergrund nachgeladen und übernimmt, sobald es bereit ist.
JavaScript mit defer und async laden
Für JavaScript gibt es zwei Attribute, die das Render Blocking verhindern:
defer: Das Skript wird parallel heruntergeladen, aber erst ausgeführt, nachdem das HTML vollständig geparst wurde. Die Reihenfolge bleibt erhalten.
<script src="/js/main.js" defer></script>
async: Das Skript wird parallel heruntergeladen und sofort ausgeführt, sobald es bereit ist – unabhängig vom HTML-Parsing. Die Reihenfolge ist nicht garantiert.
<script src="/js/analytics.js" async></script>
Die Faustregel: Verwende defer für eigene Skripte, die die Seite benötigt. Verwende async für unabhängige Skripte wie Analytics oder Tracking-Tools.
Ungenutztes CSS und JavaScript entfernen
Der Coverage Tab in Chrome zeigt dir, wie viel Code tatsächlich ungenutzt ist. Typische Ursachen für ungenutztes CSS sind große Frameworks wie Bootstrap, bei denen du nur einen Bruchteil der Styles nutzt, oder CSS-Dateien, die für die gesamte Website geladen werden statt nur für die aktuelle Seite.
Maßnahmen zur Bereinigung:
- PurgeCSS oder UnCSS: Diese Tools analysieren deinen HTML-Code und entfernen alle CSS-Regeln, die nicht verwendet werden.
- Tree Shaking: Moderne Build-Tools wie Webpack oder Rollup entfernen automatisch ungenutzten JavaScript-Code.
- Code Splitting: Teile dein JavaScript in kleinere Dateien auf, die nur auf den Seiten geladen werden, die sie tatsächlich brauchen.
Code Splitting
Statt eine riesige JavaScript-Datei für die gesamte Website zu laden, teilst du den Code in kleinere Chunks auf. Die Startseite lädt nur den Code für die Startseite. Die Produktseite nur den Code für die Produktseite.
Frameworks wie React (mit React.lazy), Vue und Next.js unterstützen Code Splitting nativ. Bei klassischen Websites kannst du Webpack oder Rollup konfigurieren, um den Code automatisch aufzuteilen.
Preloading und Preconnect
Für kritische Ressourcen, die du nicht eliminieren kannst, helfen Preloading-Hints:
<!-- Verbindung zu externen Servern vorab aufbauen -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<!-- Kritische Dateien vorab laden -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
Das eliminiert zwar nicht das Render Blocking selbst, verkürzt aber die Wartezeit, weil der Browser die Dateien früher herunterlädt.
WordPress: Plugins gegen Render Blocking Resources
Für WordPress-Nutzer gibt es mehrere Plugins, die Render Blocking Resources automatisch optimieren:
- Autoptimize: Kombiniert und minimiert CSS/JS, extrahiert Critical CSS und lädt den Rest asynchron.
- WP Rocket: Premium-Plugin mit automatischer CSS-Optimierung, JavaScript-Defer und Critical CSS-Generierung.
- LiteSpeed Cache: Für LiteSpeed-Server besonders effektiv, mit integrierter CSS/JS-Optimierung.
- Asset CleanUp: Erlaubt dir, CSS und JS pro Seite zu deaktivieren – perfekt, um ungenutzten Code zu eliminieren.
Mehr WordPress-spezifische Tipps findest du auch in unserem Artikel zum PageSpeed verbessern.
Checkliste: Render Blocking Resources beseitigen
Hier die wichtigsten Schritte in der richtigen Reihenfolge:
- Analysieren: PageSpeed Insights oder Lighthouse nutzen, um blockierende Ressourcen zu identifizieren.
- Critical CSS: Above-the-Fold-Styles inline einbinden.
- JavaScript defer/async: Alle Skripte im Head mit defer oder async laden.
- Ungenutzten Code entfernen: Mit PurgeCSS oder dem Coverage Tab ungenutzte Styles und Skripte finden und entfernen.
- Code Splitting: JavaScript in seitenspezifische Chunks aufteilen.
- Drittanbieter prüfen: Externe Skripte kritisch hinterfragen – brauchst du wirklich fünf verschiedene Tracking-Tools?
Fazit
Render Blocking Resources sind eine der häufigsten Ursachen für langsame Webseiten. CSS und JavaScript blockieren das Rendering und verlängern die Zeit, bis Nutzer etwas sehen. Mit Critical CSS, defer/async für JavaScript und dem Entfernen ungenutzten Codes kannst du die Ladezeit deutlich verbessern. Teste deine Seite regelmäßig mit einem kostenlosen SEO-Check und PageSpeed Insights, um neue Blocking-Probleme frühzeitig zu erkennen.
Hat dir dieser Artikel geholfen?
Finde heraus wie gut deine Webseite abschneidet — kostenlos und in 30 Sekunden.
Jetzt SEO-Score prüfen