Was sind Render-Blocking Ressourcen?
Wenn ein Browser eine Website lädt, verarbeitet er den HTML-Code von oben nach unten. Stößt er dabei auf eine CSS- oder JavaScript-Datei, muss er warten, bis diese vollständig geladen und verarbeitet ist, bevor er mit dem Rendern (Anzeigen) der Seite weitermachen kann. Diese Dateien nennt man „Render-Blocking Ressourcen".
Das Resultat: Die weiße Seite bleibt länger leer, der Nutzer sieht nichts, obwohl der Server längst geantwortet hat.
Warum ist das ein Problem?
Render-Blocking Ressourcen sind einer der häufigsten Gründe für einen schlechten LCP-Wert und werden von Google PageSpeed Insights direkt als kritische Warnung ausgegeben. Sie verschlechtern:
- Den LCP (Largest Contentful Paint)
- Den TTFB-Folgewert (First Contentful Paint)
- Das subjektive Ladegefühl
Häufige Quellen von Render-Blocking in WordPress
- Google Fonts, die im
<head>synchron geladen werden - Plugin-CSS-Dateien, die auf jeder Seite laden (auch wenn das Plugin nur auf manchen Seiten aktiv ist)
- JavaScript-Dateien ohne
defer- oderasync-Attribut - Slider-Plugins (Slick, Swiper) die ihr JS im
<head>einbinden
Lösungen im Überblick
- JavaScript:
defer-Attribut hinzufügen, das Script wird nach dem HTML-Parsen ausgeführt:<script src="..." defer></script> - CSS: Kritisches CSS inline in den
<head>einbetten, unkritisches CSS mitmedia="print"laden und per JS aktivieren - Google Fonts:
<link rel="preconnect">verwenden und Fonts lokal hosten - WordPress: WP Rocket oder LiteSpeed Cache haben „Delay JS" und „Remove Unused CSS" Features
Wie prüfe ich ob meine Website betroffen ist?
Öffnen Sie Google PageSpeed Insights und schauen Sie unter „Diagnostics" nach dem Eintrag „Eliminate render-blocking resources". Dort werden alle betroffenen Dateien mit ihrer Verzögerungs-Zeit gelistet.