Render-blockierendes JS
Blockierendes JS verzögert das erste Rendering.
Das Thema dieser Seite: JavaScript im kritischen Pfad stoppt den Render und verschiebt LCP nach hinten.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check identifiziert JS-Dateien ohne defer oder async
im Head und bewertet deren Einfluss auf den Render.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Kein blocking JS | Render frei | OK |
| Wenige blocking Skripte | Leichte Verzögerung | Warnung |
| Viele blocking Skripte | Render stoppt | Kritisch |
Kontext & Problemraum
Blocking JS ist typisch bei großen Bundles, veralteten Libraries oder Tag-Manager-Skripten im Head.
| Situation | Symptom | Risiko |
|---|---|---|
| Große Bundles | Render verzögert | LCP steigt |
| Tag Manager im Head | Parsing blockiert | UX leidet |
| Legacy Scripts | Hoher Parse-Aufwand | Performance sinkt |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| Blocking Skripte sichtbar | Render blockiert | defer/async nutzen |
| Nur ein Script blockiert | Hotspot klar | Script splitten |
| Kein Blocking | Signal ok | Beibehalten |
Erklärende Details
Scripts im Head blockieren den HTML-Parser. Mit defer lädt
JavaScript erst nach dem DOM.
<script src="/app.js" defer></script>| Detail | Warum relevant | Hinweis |
|---|---|---|
| defer | Parsing nicht blockiert | Standard für App-Skripte |
| async | Lädt parallel | Nur für unabhängige Skripte |
| Code Splitting | Weniger JS initial | Critical only |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| Abhängigkeiten | Reihenfolge wichtig | defer-Kette prüfen |
| Third-Party Scripts | Nicht kontrollierbar | Nur nötige Tags |
| Inline JS | Parser blockiert | Inline reduzieren |
Render-blockierendes CSS
CSS im kritischen Pfad reduzieren.
INP Proxy
Interaktionen schneller machen.
Gesamtladezeit
Gesamtzeit im Blick.