Bevor der Browser Ihre Webseite anzeigen kann, muss er HTML parsen, CSS laden und JavaScript ausführen. Manche Ressourcen blockieren dabei den gesamten Rendervorgang – die Seite bleibt weiß, bis sie vollständig geladen sind. Diese „render-blocking” Ressourcen zu eliminieren ist einer der wirkungsvollsten Schritte für bessere Core Web Vitals und damit für bessere Rankings.
Was sind Render-Blocking Ressourcen?
Wenn der Browser auf ein <link rel="stylesheet"> oder <script> im <head> trifft, stoppt er das Rendering und wartet bis die Ressource vollständig geladen und verarbeitet ist. Erst dann wird die Seite gerendert.
Render-blocking CSS: Alle Stylesheets im <head> blockieren das Rendering standardmäßig. Der Browser kann die Seite nicht anzeigen bevor er weiß wie sie aussehen soll.
Render-blocking JavaScript: Alle <script> Tags ohne async oder defer im <head> blockieren das Rendering komplett.
Render-blocking Ressourcen sind laut Google PageSpeed Insights einer der häufigsten Faktoren für schlechte LCP-Werte. In einer Analyse von 10.000 Websites hatten 95 % mindestens eine render-blocking Ressource.
JavaScript optimieren
async und defer nutzen
<!-- Blockiert Rendering: -->
<script src="script.js"></script>
<!-- Lädt parallel, führt sofort aus: -->
<script src="script.js" async></script>
<!-- Lädt parallel, führt nach HTML-Parsing aus: -->
<script src="script.js" defer></script>async: Script wird parallel geladen und sofort ausgeführt wenn verfügbar. Reihenfolge nicht garantiert. Geeignet für unabhängige Scripts (Analytics, Ads).
defer: Script wird parallel geladen und nach vollständigem HTML-Parsing ausgeführt. Reihenfolge garantiert. Geeignet für die meisten Website-Scripts.
Faustregel: Alle <script> Tags im <head> sollten defer haben. Scripts am Ende des <body> sind automatisch nicht blocking.
Scripts in den Footer verschieben
Scripts die erst nach dem DOM-Aufbau benötigt werden (z.B. Slider, Formulare, Tracking) können ans Ende des <body> verschoben werden.
CSS optimieren
CSS komplett zu eliminieren ist nicht möglich – der Browser braucht Styles. Aber Sie können die Auswirkungen reduzieren:
Critical CSS inlinen
Critical CSS sind die Styles die für den Above-the-Fold-Bereich nötig sind – alles was der Nutzer sofort sieht. Werden diese Styles direkt in den <head> als <style> inline eingebettet, kann der Browser die sichtbare Seite rendern bevor externe Stylesheets geladen sind.
<head>
<!-- Kritische Styles inline: -->
<style>
body { font-family: sans-serif; margin: 0; }
header { background: #fff; }
/* ... kritische Styles ... */
</style>
<!-- Restliche CSS nicht-blockierend: -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
</head>Tools wie Critical (npm) oder PurgeCSS können Critical CSS automatisch extrahieren. In WordPress lässt sich Critical CSS mit WP Rocket oder NitroPack automatisieren. Manuell ist die Extraktion aufwendig, aber der Performance-Gewinn ist erheblich.
Nicht benötigte CSS entfernen
Viele Themes und Plugins laden CSS für Features die auf einer bestimmten Seite nicht genutzt werden. PurgeCSS analysiert welche CSS-Klassen tatsächlich verwendet werden und entfernt den Rest.
Ressourcen vorausladen
Mit preload können kritische Ressourcen vorausgeladen werden bevor der Browser sie im HTML-Parsing entdeckt:
<!-- Font preloaden: -->
<link rel="preload" href="/fonts/heading.woff2" as="font" crossorigin>
<!-- Kritisches CSS preloaden: -->
<link rel="preload" href="/css/critical.css" as="style">
<!-- Hero-Bild preloaden: -->
<link rel="preload" href="/images/hero.webp" as="image">Besonders wertvoll: Schriftarten und das Hero-Bild preloaden – beides hat direkten Einfluss auf LCP.
Messung und Diagnose
Nach der Eliminierung render-blocking Ressourcen verbessert sich der FCP (First Contentful Paint) in den meisten Fällen um 20–40 % – was direkte positive Auswirkungen auf Google-Rankings hat.
Google PageSpeed Insights: Zeigt unter „Render-blocking resources” konkret welche Ressourcen blockieren und wie viel Zeit sie kosten.
Chrome DevTools: Performance-Tab → Flamegraph zeigt welche Ressourcen wann laden und was blockiert.
WebPageTest.org: Waterfall-Chart visualisiert die komplette Ladereihenfolge mit blockierenden Ressourcen.
In WordPress umsetzen
WP Rocket: Defer-Optionen für JavaScript, CSS-Kombinierung und Critical CSS sind integriert. Eine der einfachsten Lösungen.
Autoptimize: Kostenlose Alternative die CSS/JS kombiniert und defer aktiviert.
Manuell in functions.php:
// Scripts defer laden
add_filter('script_loader_tag', function($tag, $handle) {
if (!is_admin()) {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}, 10, 2);Mehr Informationen zu Core Web Vitals finden Sie in unserem Artikel über WordPress Core Web Vitals.