⚡ Critical CSS: was es ist, wie man es generiert und die eigene Website beschleunigt
Ihre Seite benötigt 3 Sekunden zum Laden, und Besucher springen ab. Sie öffnen Google PageSpeed Insights, und dort steht es in Rot: „Eliminate render-blocking CSS." Kommt Ihnen das bekannt vor? Laut HTTP Archive-Daten für 2025 lädt die mediane Seite 7 externe Stylesheets, und das durchschnittliche CSS-Gewicht hat 120 KB überschritten. Jede Datei im <head> ist eine Barriere zwischen dem Nutzer und dem Inhalt.
Das Problem ist nicht „schweres" CSS. Der Browser rendert keinen einzigen Pixel, bevor er ALLE Styles heruntergeladen und geparst hat. Selbst die, die einen Footer bei Pixel 4000 gestalten. Die Lösung ist Critical CSS: eine Technik, die aus Ihrem vollständigen Stylesheet nur das extrahiert, was für den sichtbaren Viewport benötigt wird, und es direkt im <head> einbettet. Der Rest lädt asynchron und blockiert nichts.
Wir haben Critical CSS in allen techblog-Projekten implementiert und einen funktionierenden Workflow aufgebaut: von der manuellen Generierung in 30 Sekunden bis zur vollständigen Automatisierung per Gulp und WordPress-Plugins. Nachfolgend eine Schritt-für-Schritt-Anleitung ohne unnötigen Ballast.
💡 Kurzer Überblick:
- Verstehen Sie die Mechanik des Render-Blockings und warum der Browser auf CSS wartet, selbst wenn das HTML bereits bereitsteht
- Wählen Sie das richtige Werkzeug: einen kostenlosen Online-Generator in 10 Sekunden, Penthouse für npm-Projekte oder die Kombination WP Rocket / Autoptimize für WordPress
- Richten Sie einen Gulp-Workflow für die automatische Critical-CSS-Neugenerierung bei jedem Deployment ein
- Vermeiden Sie typische Fallstricke: FOUC, JS-Inhalte, Media-Query-Probleme
Was Critical CSS ist und warum der Browser langsamer wird
Der Browser baut zwei Strukturen auf: das DOM aus HTML und das CSSOM aus Styles. Bis das CSSOM bereit ist, pausiert das Rendering. Das ist render-blockierendes CSS: Die Seite bleibt leer, bis alle Stylesheets im <head> geladen sind.
Google PageSpeed Insights diagnostiziert das Problem direkt:
Ihre Seite hat 3 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern. Keiner der Inhalte oberhalb der Falz kann gerendert werden, ohne auf das Laden der folgenden Ressourcen zu warten.
Der Begriff „above the fold" stammt aus dem Zeitungsbereich. Im Web bezeichnet er den sichtbaren Bereich vor dem Scrollen: etwa 600 px auf Desktop-Rechnern, 900 px auf Laptops, 400 px auf Smartphones. Die meisten Entwickler arbeiten mit sicheren Werten von 1300 px Breite und 900 px Höhe.
Critical CSS ist der minimale Satz an Styles, der benötigt wird, um genau diesen Bereich zu rendern. Grid, Navigation, Schriften, Hero-Sektion. Alles andere wird zurückgestellt und lädt asynchron: Die Seite erscheint sofort, während zusätzliche Styles im Hintergrund laden.
Die Zahlen sind signifikant. Laut Googles Daten reduziert das Inlining von Critical CSS den First Contentful Paint auf mobilen Geräten um 0,5 bis 1,2 Sekunden. Im E-Commerce wirkt sich das direkt auf die Conversion aus: Untersuchungen von Portent zeigten, dass Seiten mit einem FCP unter 1 Sekunde dreimal besser konvertieren als Seiten mit einem FCP von 3 Sekunden.
Generierungswerkzeuge: vom kostenlosen Online-Tool bis zur kommerziellen API
Critical CSS manuell zu generieren ist unmöglich. Sie benötigen ein Werkzeug, das die Seite in einem Headless-Browser rendert und nur die tatsächlich verwendeten Styles extrahiert. Hier sind drei funktionierende Optionen.
Tool | Typ | Kosten | Automatisierung | Am besten geeignet für |
|---|---|---|---|---|
Critical Path CSS Generator | Online | Kostenlos | Nein | Einzelseiten, Einstieg |
Penthouse | npm-Paket | Kostenlos | Ja, via Gulp/Skripte | Entwickler, Stapelverarbeitung |
criticalcss.com | SaaS | Ab $10/Monat | Ja, API + WordPress | Produktion, große Websites |
Critical Path CSS Generator: online, in 10 Sekunden
Der Critical Path CSS Generator von Jonas Ohlsson ist ein kostenloses Tool, mit dem sich der Einstieg lohnt. Die Oberfläche ist einfach: Seiten-URL einfügen, Ihr VOLLSTÄNDIGES CSS einfügen (auch 200 KB minifiziert), Button klicken, Styles für den Above-the-fold-Bereich erhalten.
Vorteile: keine Einstiegshürde. Kein Node.js, npm oder Skripte erforderlich. Nachteile: rein manuelle Arbeit. Sie bearbeiten jede Seite einzeln, und wenn sich Styles ändern, wiederholen Sie alles. Funktioniert für eine 5-Seiten-Site, aber bei 50 Seiten wird es mühsam.
Der Entwickler des Generators brachte später den kommerziellen Dienst criticalcss.com heraus, eine Weiterentwicklung derselben Idee mit automatischen Updates, Screenshot-Validierung und einer API für die Stapelverarbeitung.
Penthouse: Kommandozeilen-Generator für Gulp
Penthouse (über 2680 Sterne auf GitHub) ist ein npm-Paket desselben Autors. Unter der Haube arbeiten Puppeteer und ein headless Chromium. Es öffnet die Seite, ermittelt das für einen bestimmten Viewport verwendete CSS und verwirft den Rest.
Installation:
1 npm install --save-dev penthouse
Minimaler Aufruf aus einem Node-Skript:
1 const penthouse = require('penthouse'); 2 const fs = require('fs'); 3 4 penthouse({ 5 url: 'https://example.com', 6 cssString: fs.readFileSync('./style.css', 'utf8'), 7 width: 1300, 8 height: 900 9 }).then(criticalCss => { 10 fs.writeFileSync('./critical.css', criticalCss); 11 });
Breite 1300 und Höhe 900 sind empirisch sichere Werte. Media Queries, die breiter als der kritische Viewport sind, werden standardmäßig entfernt. Um sie zu behalten, nutzen Sie das Flag keepLargerMediaQueries: true.
Wichtiger Hinweis: Penthouse läuft mit deaktiviertem JavaScript. Wenn der Above-the-Fold-Inhalt von einem JS-Framework generiert wird, ist das HTML vor der Hydration leer und Penthouse findet keine Styles. Die Lösung: Server-Side Rendering (SSR) oder der Parameter forceInclude mit Selektoren, die zwingend erhalten bleiben sollen.
WP Rocket und Autoptimize: zwei WordPress-Plugins
Wenn Ihre Seite auf WordPress läuft, ist die manuelle Generierung von Critical CSS unnötiger Aufwand. Viele Seiten, sich vervielfältigende Templates, wechselnde Styles. Zwei Plugins lösen die Aufgabe vollständig.
WP Rocket ist ein Premium-Plugin (59 €/Jahr für 1 Seite, 119 € für 3, 299 € für 50). Die integrierte Option „Remove Unused CSS" generiert automatisch Critical CSS für jede Seite, bettet es im <head> ein und lädt den Rest asynchron nach. Zwei Checkboxen, und die Empfehlung „Eliminate render-blocking resources" ist erledigt. Bonus: Der integrierte Rocket Insights-Hub, betrieben von GTmetrix, zeigt Metriken direkt aus dem WordPress-Admin an.
Autoptimize ist ein kostenloses Plugin mit einer Option „Inline and Defer CSS". Die Basisversion generiert EINE Critical-CSS-Datei für die gesamte Site, was in der Praxis nicht funktioniert (unterschiedliche Seiten, unterschiedlicher Above-the-Fold-Inhalt). Die Lösung: Integration mit dem criticalcss.com-Dienst (WordPress-Tarif, ab 10 $/Monat). Das Plugin fordert Critical CSS automatisch per API an, bettet es ein und aktualisiert es bei Änderungen.
Für die meisten WordPress-Nutzer löst die Kombination WP Rocket oder Autoptimize + criticalcss.com das Problem vollständig. Der Rest dieses Artikels richtet sich an diejenigen, die individuelle Sites erstellen.
Manueller Workflow: Generierung, Einfügung, Verifikation
Wenn Sie eine Site ohne CMS erstellen, gliedert sich der Prozess in vier Schritte.
Schritt 1. Kopieren Sie Ihr GESAMTES CSS. Führen Sie alle Site-Styles in EINER Datei zusammen. Wenn Sie Sass schreiben, kompilieren Sie es. Wenn Sie ein Framework wie Bootstrap oder Tailwind nutzen, binden Sie dessen CSS vollständig ein. Raten Sie nicht, was „wahrscheinlich nicht benötigt wird"; der Generator wird es herausfinden.
Schritt 2. Generieren Sie Critical CSS über den Online-Generator oder Penthouse. Das Ergebnis ist ein minifizierter Block von Styles, die nur für den Above-the-Fold-Bereich verantwortlich sind.
Schritt 3. Fügen Sie das Critical CSS in einen <style>-Tag innerhalb des <head> ein. Das ist entscheidend: Inline-Styles erzeugen keine zusätzlichen HTTP-Requests und werden vom Browser sofort verarbeitet. Das Ergebnis sieht etwa so aus:
1 <!DOCTYPE html> 2 <html lang="ru"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style> 7 <title>Page Title</title> 8 </head>
Schritt 4. Externes CSS und JS aus dem <head> ans Ende der Seite verschieben, vor das schließende </body>. Ja, <link rel="stylesheet"> im Footer ist laut Spezifikation technisch nicht valide, funktioniert aber in der Praxis in allen Browsern und löst das Blocking-Problem. Die Alternative ist loadCSS von der Filament Group für asynchrones Laden von Styles ohne Verschiebung in den Footer.
Prüfen Sie abschließend mit Google PageSpeed Insights. Ist die Empfehlung „Render-blockierende Ressourcen eliminieren" verschwunden? Dann haben Sie alles richtig gemacht.
Gulp + Penthouse: Automatisierung für Projekte ohne WordPress
Jede Stiländerung erfordert eine Neugenerierung des Critical CSS. Dies manuell zu erledigen, ist stumpfsinnig mühsam. Gulp automatisiert den Prozess.
Unser Produktions-Workflow:
1 // gulpfile.js 2 const gulp = require('gulp'); 3 const penthouse = require('penthouse'); 4 const fs = require('fs'); 5 const urlList = require('./criticalcss-pagelist.json'); 6 7 gulp.task('criticalcss', function () { 8 urlList.urls.forEach(function (item) { 9 penthouse({ 10 url: item.link, 11 css: './css/style.min.css', 12 width: 1300, 13 height: 900, 14 keepLargerMediaQueries: false, 15 renderWaitTime: 100, 16 timeout: 30000 17 }).then(function (criticalCss) { 18 fs.writeFileSync(item.output, criticalCss); 19 console.log('✓ Critical CSS generated: ' + item.link); 20 }).catch(function (err) { 21 console.error('✗ Error for ' + item.link + ': ' + err.message); 22 }); 23 }); 24 });
Die Datei criticalcss-pagelist.json mit der Liste der URLs und Ausgabedateien:
1 { 2 "urls": [ 3 { "link": "https://example.com", "output": "./critical/home.php" }, 4 { "link": "https://example.com/about", "output": "./critical/about.php" }, 5 { "link": "https://example.com/contact", "output": "./critical/contact.php" } 6 ] 7 }
Wir schreiben die Ausgabe in PHP-Dateien, die das CSS umschließen und per include in den <head> des entsprechenden Templates eingefügt werden. Passen Sie dies an Ihren Stack an: Schreiben Sie in .css, binden Sie es per Server-Side-Include ein, was auch immer für Sie funktioniert.
Ausführen: gulp criticalcss, und alle Seiten werden in einem Durchlauf verarbeitet. Hängen Sie die Aufgabe beim Deployment in CI/CD ein, und das Critical CSS bleibt aktuell.
Probleme, auf die Sie stoßen werden
Critical CSS hat seine Tücken. Hier ist, was wir in der Praxis erlebt haben.
Flash of Unstyled Content (FOUC). Critical CSS deckte ein Element nicht ab, und der Nutzer sieht ein Stilflackern, wenn die vollständigen Styles laden. Ursache: Inhalt, der per absolute oder transform außerhalb des Viewports positioniert ist und vom Generator übersehen wurde. Lösung: das forceInclude-Flag mit dem Selektor des problematischen Elements.
JS-generierte Inhalte. Fast alle Generatoren (Penthouse, Online-Tool) laufen mit deaktiviertem JavaScript. Wenn Ihre Landingpage mit React, Vue oder Angular ohne serverseitiges Rendering erstellt wurde, ist das HTML leer und der Generator hat nichts zu analysieren. Die einzige zuverlässige Lösung: Aktivieren Sie SSR auf Framework-Ebene. Die Alternative ist die manuelle Angabe von Selektoren per forceInclude, aber das ist fragil.
Media Queries. Standardmäßig entfernt Penthouse Regeln, deren min-width den angegebenen Viewport überschreitet. Wenn Sie keepLargerMediaQueries: true nicht setzen, gehen Desktop-Styles verloren und die Seite zerbricht auf breiten Bildschirmen. Überprüfen Sie die Ergebnisse stets bei tatsächlichen Auflösungen.
Caching. Sie haben Critical CSS generiert, deployed, ändern eine Woche später den Header-Stil, aber die alte Version sitzt im <head>. Ohne CI/CD-Automatisierung vergessen Sie die Neugenerierung. Die Gulp-Aufgabe beim Deployment löst dies vollständig.
⁉️🤔 Häufig gestellte Fragen
Ist Critical CSS für jede Seite verpflichtend?
Nein, nicht für jede Seite. Wenn Ihre Seite eine einzige 20 KB große CSS-Datei hat und der FCP bereits unter einer Sekunde liegt, ist der Nutzen vernachlässigbar. Wenn der
<head>jedoch 3-4 Stylesheets mit insgesamt rund 100 KB enthält, bringt Critical CSS eine messbare Verbesserung. Für eine einfache Landingpage benötigt der Online-Generator 10 Minuten. Für einen WordPress-Shop erledigt das WP Rocket mit ein paar Checkboxen. Prüfen Sie PageSpeed Insights: Wenn „Eliminate render-blocking resources" ganz oben steht, tun Sie es.
Kann ich einfach alle <link>-Tags in den Footer verschieben und mir den Aufwand sparen?
Technisch nein. Die HTML-Spezifikation verlangt
<link rel="stylesheet">nur im<head>. In der Praxis rendern Browser Seiten mit<link>im Footer, aber Sie erhalten einen Flash of Unstyled Content (FOUC), bis die Styles geladen sind. Akzeptabel für eine einfache Visitenkartenseite, nicht für ein kommerzielles Projekt. Der richtige Ansatz: Critical CSS inline im<head>, asynchrones Laden des Rests perloadCSSodermedia="print"mitonload="this.media='all'". Das Verschieben in den Footer ist ein Workaround, der auf Kosten visuellen Flackerns funktioniert.
Was hat sich mit HTTP/3 und Early Hints geändert?
HTTP/3 und 103 Early Hints erlauben es dem Browser, mit dem Laden kritischer Ressourcen zu beginnen, bevor die vollständige Serverantwort eintrifft. Dies reduziert die Latenz, beseitigt aber nicht das Render-Blocking: Styles müssen weiterhin heruntergeladen und geparst werden. Early Hints und Critical CSS arbeiten zusammen, nicht anstelle voneinander: Early Hints beschleunigt die Auslieferung, Critical CSS beschleunigt das erste Rendering. Die beiden Techniken verstärken sich gegenseitig.
Penthouse wurde seit 4 Jahren nicht aktualisiert. Ist es noch relevant?
Die letzte Version von Penthouse (v2.3.3) erschien 2022, aber das Paket bleibt funktionsfähig: Es läuft auf Puppeteer und Chromium, die stabil sind. Die Kernfunktionalität (Generierung von verwendetem CSS für einen bestimmten Viewport) erfordert keine häufigen Updates. Eine Alternative ist Critical von Addy Osmani (12.000+ Sterne), das aktivere Updates erhält und ebenfalls mit Gulp/Grunt integriert.
Wie gehe ich mit dynamischen Seiten um, deren Inhalt vom Nutzer abhängt?
Bei Seiten mit Personalisierung (Nutzer-Dashboard, Warenkorb, Admin-Panel) wird Critical CSS nicht für einen bestimmten Nutzer generiert, sondern für die allgemeine Struktur: Header, Sidebar, Grid. Dynamische Inhalte gehen in den asynchronen Teil. Wenn Styles für einen nutzerspezifischen Above-the-Fold-Block essenziell sind, fügen Sie die entsprechenden Selektoren per
forceIncludehinzu. Generieren Sie Critical CSS basierend auf der allgemeinen Seitenstruktur und überlassen Sie personalisierte Blöcke dem asynchronen Laden, mitforceIncludefür geschäftskritische Elemente.
Sollten Sie Critical CSS in Ihrem Projekt implementieren
Wenn Ihre Seite mehr als eine CSS-Datei im <head> lädt, bringt Critical CSS messbare Geschwindigkeitsgewinne. Für eine dreiseitige Landingpage benötigt der Online-Generator 10 Minuten. Für einen WordPress-Blog oder -Shop zwei Checkboxen in WP Rocket. Für ein individuelles Projekt macht sich eine Stunde Einrichtung von Gulp und Penthouse bereits beim ersten Deployment bezahlt.
Die Einstiegshürde ist niedriger, als sie scheint. Nutzen Sie den kostenlosen Online-Generator, kopieren Sie das CSS Ihrer Seite, fügen Sie es ein, und in 30 Sekunden sehen Sie Ergebnisse. Wenn Sie Automatisierung wünschen, kehren Sie zum Abschnitt über den Gulp-Workflow zurück: Er löst das Problem vollständig. Die Ladegeschwindigkeit mit ein paar Stunden Arbeit zu verdoppeln, ist ein Angebot, das man schwer ablehnen kann.
Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.