Critical CSS extrahieren für besseres LCP und Above-the-Fold-Performance
Performance

Critical CSS extrahieren: Above-the-Fold optimieren für besseres LCP

Shift07 Team
16. Mai 2026
10 Min. Lesezeit
Performance

Wenn eine Website lädt, muss der Browser zunächst alle CSS-Dateien herunterladen und verarbeiten, bevor er die Seite darstellen kann. Das führt zu einem Render-Blocking-Problem: Der Nutzer sieht nichts, bis alle Stylesheets geladen sind — selbst wenn der Inhalt oberhalb des sichtbaren Bereichs (Above the Fold) nur einen Bruchteil des CSS benötigt. Critical CSS zu extrahieren und direkt im HTML einzubetten löst dieses Problem und verbessert messbar den Largest Contentful Paint (LCP).

Dieser Artikel erklärt, was Critical CSS ist, wie du es extrahierst und einbindest, welche Tools du dafür nutzt und was du dabei beachten musst.

Was ist Critical CSS?

Critical CSS bezeichnet den minimalen CSS-Code, der benötigt wird, um den sichtbaren Bereich einer Webseite beim ersten Laden darzustellen — also alles, was der Nutzer sieht, ohne scrollen zu müssen. Der restliche CSS-Code (für Footer, weitere Abschnitte, mobile Layouts etc.) wird als Non-Critical CSS bezeichnet und kann verzögert geladen werden.

Das Konzept leitet sich aus der Above-the-Fold-Optimierung ab: Was der Nutzer sofort sieht, muss sofort da sein. Was unterhalb der Sichtlinie liegt, kann nachgeladen werden. Dieser Ansatz ist direkt mit dem LCP-Wert verknüpft, dem wichtigsten Core Web Vital für wahrgenommene Ladegeschwindigkeit.

Google wertet den LCP als stärksten Ranking-Faktor unter den Core Web Vitals. Ein LCP unter 2,5 Sekunden gilt als „gut" — Critical CSS ist eine der effektivsten Maßnahmen, um diesen Wert zu erreichen.

Warum Render-Blocking CSS das LCP zerstört

Standardmäßig lädt HTML-Code Stylesheets mit einem <link rel="stylesheet">-Tag im <head>. Der Browser stoppt dabei das Rendern vollständig, bis alle verlinkten CSS-Dateien geladen und geparst wurden. Bei einem 200-KB-Framework wie Bootstrap oder Tailwind CSS kann das 300–800 ms Renderblockierung bedeuten — auf mobilen Verbindungen deutlich mehr.

Das führt zu folgender Render-Kette:

  1. HTML wird empfangen
  2. Browser entdeckt <link rel="stylesheet">
  3. Rendern stoppt — warten auf CSS-Download
  4. CSS wird heruntergeladen (300–800 ms)
  5. CSS wird geparst
  6. Browser rendert die Seite
  7. LCP wird ausgelöst

Wenn du das CSS für den sichtbaren Bereich direkt im HTML inline bereitstellst und den Rest asynchron lädst, springst du direkt von Schritt 1 zu Schritt 5 — für den kritischen Bereich.

Mehr dazu, wie Render-Blocking-Ressourcen generell entfernt werden, erklärt unser Artikel zu Render-Blocking-Ressourcen entfernen. Den Render-Blocking-Checker von Shift07 kannst du nutzen, um sofort zu sehen, welche CSS- und JS-Dateien auf deiner Website das Rendern blockieren: Render-Blocking-Ressourcen-Checker.

Critical CSS extrahieren: Die Methoden

Methode 1: Automatisch mit Critical / Penthouse (Node.js)

Das populärste Tool zur automatischen Extraktion ist critical von Addy Osmani. Es startet einen Headless-Browser, ruft die Seite auf und extrahiert genau den CSS-Code, der für das initiale Rendering des sichtbaren Bereichs benötigt wird.

npm install -g critical

# Für eine einzelne HTML-Datei
critical index.html --inline --minify --base ./ --dest index-critical.html

# Oder als Gulp/Grunt/Webpack-Plugin
npm install critical --save-dev

Das Tool nimmt dabei den Viewport in Betracht. Für unterschiedliche Gerätegrößen kannst du mehrere Viewport-Dimensionen angeben:

const critical = require('critical');

critical.generate({
  inline: true,
  base: 'dist/',
  src: 'index.html',
  dest: 'index.html',
  width: 1300,
  height: 900,
  dimensions: [
    { width: 375, height: 812 },   // iPhone
    { width: 768, height: 1024 },  // iPad
    { width: 1440, height: 900 }   // Desktop
  ]
});

Methode 2: Penthouse (mehr Kontrolle)

Penthouse ist das Kernel-Modul hinter dem critical-Package und bietet mehr Feinsteuerung. Es eignet sich besonders für SPAs und React/Vue-Anwendungen, bei denen JavaScript für das erste Rendering ausgeführt werden muss:

const penthouse = require('penthouse');

penthouse({
  url: 'https://deine-website.de',
  css: './dist/styles.css',
  width: 1440,
  height: 900,
  renderWaitTime: 500,      // ms warten bis JS gerendert hat
  timeout: 30000,
  puppeteerLaunchArgs: ['--no-sandbox']
})
.then(criticalCss => {
  // criticalCss direkt in