Render-blockierende Ressourcen
Kurz gesagt
Render-blockierende Ressourcen sind CSS- oder JS-Dateien, die das Rendering einer Seite aufhalten, bis sie vollständig heruntergeladen und verarbeitet sind.
Browser pausieren das Zeigen von Inhalten, bis render-blockierende Ressourcen fertig sind. Das blockiert First Contentful Paint und schadet LCP. Techniken dagegen: inline Critical CSS, defer/async JS-Attribute, Preload für Essentials, Code-Splitting.
Beispiel
Eine Site lädt 450KB CSS im Head ohne Splitting. LCP 4,2s. Nach Extrahieren von 14KB Critical CSS inline und Lazy-Loading des Rests: LCP 2,1s.
Häufig gestellte Fragen
Unterschied zwischen defer und async?
Beide verhindern JS-Blockieren des HTML-Parsings. Defer läuft nach Parsing, in Reihenfolge. Async läuft beim Download, out-of-order.
Verwandte Begriffe
Weiterführende Links
- → Unser Service: SEO