Render-Blocking-Ressourcen-Checker
Kurze Antwort
Finden Sie Skripte und Stylesheets, die das Rendern blockieren, sowie Skript-Gewohnheiten, die Seiten bremsen: fehlendes async/defer, Inline-Event-Handler und document.write.
Was es macht
Prüft das HTML einer Seite in zwei Teilen. Render-blockierende Ressourcen: Skripte in `<head>` ohne `async` oder `defer`, Stylesheets, die das Rendering blockieren, und CSS-`@import`-Regeln. Skript-Hygiene: wie viele externe und inline Skripte die Seite lädt, ob externe Skripte `async` oder `defer` verwenden, inline Event-Handler wie `onclick`, `document.write`-Aufrufe und ob ES-Module verwendet werden.
Warum es wichtig ist
Ein Browser muss jedes blockierende Skript und Stylesheet in `<head>` herunterladen und ausführen, bevor er etwas malen kann, was First Contentful Paint und oft auch Largest Contentful Paint verzögert. `document.write` verschlimmert das noch – Chrome kann sich weigern, damit eingefügte Skripte bei langsamen Verbindungen auszuführen – und inline Handler stehen einer strikten Content-Security-Policy im Weg.
Wie es funktioniert
-
Geben Sie eine Seiten-URL ein oder fügen Sie deren HTML ein
-
Wir parsen den `<head>`-Bereich und jedes `<script>` auf der Seite
-
Wir markieren render-blockierende Skripte und Stylesheets und prüfen die Skripte dann auf async/defer, inline Handler und document.write
-
Sie erhalten ein Ergebnis für jeden Teil, mit den markierten Ressourcen
Beispiel-Ein- und Ausgabe
url: https://rankproof.eu/tools
Render-blockierende Ressourcen: 2 <script src="analytics.js"> blocking <link rel="stylesheet" href="theme.css"> blocking kein @import in CSS OK Skript-Hygiene Skripte: 7 (5 extern, 2 inline) externe Skripte nutzen async oder defer warn keine inline Event-Handler OK kein document.write OK verwendet ES-Module OK 0 von 2 Bereichen sehen gut aus
Wer es nutzt
-
Performance-Ingenieur
Verschieben Sie vor einer stark frequentierten Saison jedes blockierende Skript auf async oder defer und prüfen Sie erneut, dass nichts Neues in `<head>` gelandet ist.
-
Frontend-Entwickler
Finden Sie das Analytics- oder Widget-Snippet, das noch synchron lädt, und stellen Sie es auf verzögertes Laden um.
-
SEO-Spezialist
Prüfen Sie die Vorlagen hinter Ihren langsamsten Seiten und übergeben Sie die markierten Ressourcen an das Entwicklungsteam.
Häufig gestellte Fragen
Wie entblockiere ich ein Stylesheet?
Fügen Sie für unkritisches CSS `media="print"` und `onload="this.media='all'"` hinzu. Für kritisches CSS binden Sie es inline in `<style>`-Tags ein.
Kann ich einfach alle meine Skripte defer setzen?
Nicht immer – Skripte, die vor dem ersten Rendering laufen müssen, für das Layout erforderliche Polyfills und inline Skripte können nicht immer warten. Prüfen Sie sie nach Wirkung.
Was ist das Problem mit document.write?
Es zwingt den Browser, das Parsen anzuhalten, und Chrome kann die damit eingefügten Skripte bei langsamen Verbindungen blockieren. Fügen Sie Elemente stattdessen mit DOM-Methoden ein.
Warum werden inline Event-Handler markiert?
Handler wie `onclick="…"` mischen Verhalten in das Markup und benötigen `unsafe-inline` in einer Content-Security-Policy. Binden Sie Listener stattdessen über eine Skriptdatei ein.
Was ist mit Drittanbieter-Widgets?
Laden Sie sie mit `<script async>` oder über einen Tag-Manager mit verzögertem Laden. Noch besser: Laden Sie Widgets unterhalb der ersten Bildschirmansicht nur bei Scroll oder Interaktion.