Füge den HTML-Quellcode deiner Seite ein und sieh sofort, welche CSS- und JavaScript-Dateien das Rendern blockieren – und damit deinen LCP und das Google-Ranking ausbremsen. Inklusive konkreter Empfehlungen zu async, defer, preload und media.
Tipp: Im Browser Rechtsklick → "Seitenquelltext anzeigen" → alles kopieren und hier einfügen.
Jede CSS- und JS-Ressource einzeln bewertet – grün = nicht blockierend, rot = blockiert das Rendern.
Wenn ein Browser eine Seite lädt, muss er bestimmte Dateien vollständig herunterladen und verarbeiten, bevor er auch nur ein einziges Pixel anzeigen kann. Diese Dateien nennt man render-blocking Ressourcen. Standardmäßig blockieren externe Stylesheets (<link rel="stylesheet">) und synchrone Skripte (<script src="..."> ohne async oder defer) das erste Rendern. Je mehr davon im <head> stehen, desto später erscheint sichtbarer Inhalt – und desto schlechter wird dein Largest Contentful Paint (LCP), eine der drei Core Web Vitals, die Google direkt als Ranking-Signal nutzt.
Weniger blockierende Ressourcen heißt: der Browser zeigt sichtbaren Inhalt früher. Das verbessert LCP und First Contentful Paint direkt.
"Render-blocking Ressourcen eliminieren" ist eine der häufigsten Empfehlungen in Google PageSpeed Insights und Lighthouse.
Studien zeigen: jede Sekunde Ladezeit erhöht die Absprungrate. Schnelle Seiten halten Besucher und verbessern Nutzersignale.
| Ressource | Lösung | Wirkung |
|---|---|---|
| JS, das nicht für den ersten Pixel nötig ist | defer | Lädt parallel, führt nach dem Parsen in Reihenfolge aus |
| Unabhängige Skripte (Analytics, Ads) | async | Lädt parallel, führt sofort bei Verfügbarkeit aus |
| Moderne Module | type="module" | Wird automatisch deferred geladen |
| CSS nur für Druck | media="print" | Blockiert das Bildschirm-Rendering nicht mehr |
| Above-the-fold-CSS | Critical CSS inline | Rest per preload nachladen |
Blockierend:
<script src="app.js"></script>Optimiert:
<script src="app.js" defer></script>Verwandte Tools: Page-Speed-Estimator · Performance-Budget-Planer · Viewport-Meta-Tag-Checker
Mehr dazu im Blog: Render-Blocking-Ressourcen entfernen · Performance-Budget erstellen · Core Web Vitals verbessern
Render-blocking Ressourcen sind nur ein Performance-Faktor. Entdecke alle technischen SEO-Probleme deiner Website mit unserer kostenlosen Analyse.
Kostenlos analysieren