Wie funktioniert der Checker?

Das Tool lädt den HTML-Quellcode deiner Seite und analysiert alle <link>- und <script>-Tags im <head>-Bereich. Render-blockend sind CSS-Dateien ohne media="print" und JavaScript-Dateien ohne async oder defer-Attribut.

Was sind Render-Blocking-Ressourcen?

🎨

Blockierende CSS-Dateien

Jede CSS-Datei im <head> ohne media="print" blockiert das Rendering. Der Browser muss alle Styles laden und parsen, bevor er die erste Seite anzeigt.

⚙️

Blockierende JS-Dateien

JavaScript ohne async oder defer im <head> stoppt das HTML-Parsing vollständig. Der Browser wartet, bis das Script geladen und ausgeführt ist.

📊

Auswirkung auf LCP

Render-Blocking-Ressourcen verzögern direkt den Largest Contentful Paint (LCP). Google bewertet LCP unter 2,5 Sekunden als "gut" — blockierende Ressourcen machen das schwer erreichbar.

🛠️

Die Lösung

CSS: Kritisches CSS inline laden, restliches CSS mit media-Attribut oder JavaScript nachladen. JS: immer defer oder async verwenden, oder ins <body>-Ende verschieben.

async vs. defer: Der Unterschied

Attribut	Download	Ausführung	Eignung
`keine`	Synchron	Sofort, blockiert HTML	Vermeiden
`async`	Parallel	Sobald geladen	Analytics, unabhängige Scripts
`defer`	Parallel	Nach HTML-Parsing	Meiste Scripts, DOM-abhängige Scripts