Kritisches CSS und renderblockierende Ressourcen
Binden Sie kritisches CSS für den sichtbaren Seitenbereich inline ein und verzögern Sie unkritische Stile, um das Rendern nicht zu blockieren.
Kritisches CSS und renderblockierende Ressourcen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
So rendert der Browser
Der Browser parst HTML in ein DOM und CSS in ein CSSOM, führt beide zu einem Renderbaum zusammen, berechnet anschließend das Layout und führt den Paint aus. CSS blockiert das Rendering, bis das CSSOM vollständig ist – jedes Byte CSS auf dem kritischen Pfad verzögert den ersten Paint.
Was ist Critical CSS?
Critical CSS ist die minimale Menge an Styles, die zum Rendern des sichtbaren Inhalts erforderlich ist. Wenn Sie diese Styles in <style>-Tags im <head> einbetten, entfällt für die initiale Ansicht die render-blockierende Anfrage nach dem Stylesheet.
Render-blockierende Ressourcen
Jedes <link rel="stylesheet"> im Head blockiert das Rendering. Skripte ohne async/defer blockieren außerdem das Parsen des HTML. Das Reduzieren render-blockierender Ressourcen verbessert direkt Largest Contentful Paint (LCP) und First Contentful Paint (FCP).
Critical CSS extrahieren
Tools wie critical (npm), Penthouse und auf Puppeteer basierende Extractors rendern eine Seite bei bestimmten Viewport-Größen und erfassen die Styles, die auf sichtbare Elemente angewendet werden. Die Ausgabe wird eingebettet; das vollständige Stylesheet wird asynchron geladen.
Nicht kritisches CSS asynchron laden
Laden Sie das vollständige Stylesheet ohne Blockierung, indem Sie media="print" mit einem onload-Tausch verwenden, oder das Muster rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Media Queries als Ladehinweise
CSS-Dateien, die mit einer nicht passenden Media Query geladen werden, z. B. media="print", werden mit niedriger Priorität heruntergeladen und blockieren das Rendering nicht. Dies ist der klassische Trick, um Stylesheets zu laden, ohne den kritischen Pfad zu blockieren.
HTTP/2 und CSS-Aufteilung
Durch Multiplexing mit HTTP/2 verursacht die Aufteilung von CSS in viele kleine Dateien weniger Overhead als bei HTTP/1. Laden Sie nur das für jede Route benötigte CSS – etwa home.css und checkout.css – statt eines monolithischen Bundles, das Styles für jede Seite enthält.
CSS und der Preload-Scanner
Der Preload-Scanner des Browsers erkennt Stylesheet-<link>-Tags frühzeitig und beginnt mit dem Download, bevor der HTML-Parser sie erreicht. Stellen Sie sicher, dass sich Stylesheets im <head> und nicht im Body befinden, damit der Preload-Scanner sie früh findet.
Auswirkungen des Render-Blockings messen
Das Network-Panel der Chrome DevTools zeigt die Blockierungszeit von Ressourcen in der Wasserfalldarstellung. Lighthouse meldet „Eliminate render-blocking resources“ und weist die möglichen Einsparungen für jede Ressource aus. WebPageTest zeigt renderBlockingResources in seiner Filmstreifenansicht.
Critical CSS auf dem Server
Frameworks wie Next.js und Astro betten Critical CSS während des SSR automatisch ein. Der Server ermittelt, welche Styles auf das initiale HTML angewendet werden, und fügt sie direkt ein – ein clientseitiger Extraktionsschritt ist nicht erforderlich.
Praktische Abwägungen
Wenn Sie zu viel CSS einbetten, vergrößert sich das HTML, wodurch sich TTFB verschlechtert und die Cache-Effizienz sinkt (HTML wird nicht so lange gecacht wie CSS-Dateien). Beschränken Sie eingebettetes Critical CSS auf höchstens 14 KB, damit es in das erste TCP-Congestion-Window passt.
Wissensüberprüfung
Warum verzögert ein render-blockierendes Stylesheet First Contentful Paint?
Zusammenfassung
Critical CSS bettet die Styles für den sichtbaren Bereich ein, um render-blockierende Verzögerungen zu vermeiden. Laden Sie das verbleibende CSS asynchron mithilfe von Preload oder Media-Query-Tricks. Messen Sie die Auswirkungen mit Lighthouse und DevTools und streben Sie für optimale Performance eine Critical-CSS-Nutzlast von weniger als 14 KB an.
Häufig gestellte Fragen
Ist die Lektion „Kritisches CSS und renderblockierende Ressourcen“ kostenlos?
Ja — der vollständige Text von „Kritisches CSS und renderblockierende Ressourcen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Kritisches CSS und renderblockierende Ressourcen“?
Binden Sie kritisches CSS für den sichtbaren Seitenbereich inline ein und verzögern Sie unkritische Stile, um das Rendern nicht zu blockieren. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Kritisches CSS und renderblockierende Ressourcen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Kritisches CSS und renderblockierende Ressourcen
- Layout, Paint und Composite: Die Rendering-Pipeline
- will-change und Layer-Promotion
- CSS-Abdeckung und ungenutzte Stile