Render-blocking Ressourcen sind Dateien, meist CSS und JavaScript, die der Browser laden und verarbeiten muss, bevor er Inhalt der Seite anzeigen kann. Nach MDN blockieren zuerst geladene Stylesheets und Skripte das Rendering und verlängern damit die Zeit bis zur ersten Darstellung und bis zur Interaktion. Ressourcen, die per robots.txt gesperrt sind, sind ein eigener Begriff (blockierte-ressourcen).
Was Lighthouse meldet
Lighthouse nennt zwei Arten von URLs als render-blocking:
<script>-Tags im<head>ohnedeferoderasync<link rel="stylesheet">-Tags ohnedisabled-Attribut oder ohne passendemedia-Abfrage
Die Prüfung gilt ab Lighthouse 13 als veraltet und ist in die Insight „Render-blocking requests“ übergegangen.
Mögliche Lösungen
Für Skripte nennt Lighthouse async oder defer sowie das Entfernen ungenutzten Codes. Kritischer Code kann direkt im <head> stehen. Bei Stylesheets lässt sich kritisches CSS inline einbinden, der Rest per preload laden oder per media-Attribut aufteilen. Bilder, Videos und Schriftdateien blockieren laut Berichten nicht. Blockierende Ressourcen wirken sich demnach auf FCP und LCP aus.
Beispiel
<script src="app.js" defer></script>
<link rel="stylesheet" href="druck.css" media="print">
Das Skript lädt, ohne das Parsen zu stoppen, und das Druck-Stylesheet blockiert die Darstellung am Bildschirm nicht.
Quellen
- Render-blocking – MDN Glossarydeveloper.mozilla.org
- Eliminate render-blocking resources – Lighthouse (Chrome for Developers)developer.chrome.com
- How To Eliminate Render-Blocking Requests – DebugBeardebugbear.com
Stand: