Nicht verwendetes CSS reduzieren: So beheben Sie die Warnung

Q: Wie finde ich ungenutztes CSS auf meiner Seite?

Mit dem Coverage-Werkzeug der Chrome DevTools. Show Coverage über das Befehlsmenü ausführen, die Seite neu laden, und der rote Anteil jeder CSS-Datei ist der ungenutzte Code.

Q: Wie entferne ich ungenutztes CSS mit Tailwind?

Tailwind purgt automatisch über die content-Einstellung. Jede Datei auflisten, die Klassen verwendet, damit der Compiler nur Referenziertes behält. Zur Laufzeit dynamisch gebildete Klassen auf eine Safelist setzen, sonst werden sie entfernt.

Wenn PageSpeed Insights oder Lighthouse „Nicht verwendetes CSS reduzieren" meldet (die genaue Formulierung kann je nach Lighthouse-Version abweichen), wurden Stylesheet-Regeln gefunden, die Ihre Seite lädt und parst, aber auf keinem Element anwendet. Weil CSS standardmäßig renderblockierend ist, kosten diese ungenutzten Regeln mehr als nur Bytes: Sie verzögern den Moment, in dem der Browser überhaupt etwas zeichnen kann. Dieser Leitfaden erklärt, was die Warnung bedeutet und wie Sie ungenutztes CSS entfernen.

Was die Empfehlung bedeutet

Bevor ein Browser eine Seite zeichnen kann, baut er aus jedem eingebundenen Stylesheet ein internes Modell aller Stilregeln auf. Dafür lädt und parst er jede CSS-Datei vollständig. Jede Regel, deren Selektoren auf der aktuellen Seite kein Element treffen, ist ungenutzt. Sie wurde ausgeliefert und geparst, ohne etwas zu bewirken. Lighthouse misst das über die Code-Abdeckung von Chrome und meldet die geschätzte verschwendete Übertragungsgröße pro Datei.

Das ungenutzte CSS stammt meist aus wenigen Quellen. Ein großes CSS-Framework wird vollständig geladen, obwohl die Seite nur einen Bruchteil nutzt. Ein globales Stylesheet wird auf jeder Seite ausgeliefert, sodass jede Seite die Stile aller anderen mitträgt. Page-Builder, Plugins und Drittanbieter-Widgets binden ihre eigenen Stylesheets sitewide ein. Und alte Regeln bleiben lange bestehen, nachdem das Markup, für das sie gedacht waren, längst entfernt wurde.

Warum es für Ladezeit und Core Web Vitals zählt

Jedes im <head> eingebundene Stylesheet ist renderblockierend. Der Browser zeichnet nicht, bevor das Stilmodell steht, deshalb verzögert ein aufgeblähtes Stylesheet voller ungenutzter Selektoren direkt den First Contentful Paint und in der Folge den Largest Contentful Paint. Weil die Core Web Vitals ein Google-Ranking-Signal sind, verbessert weniger CSS zugleich die Nutzererfahrung und die Sichtbarkeit. Die Aufgabe grenzt eng an das Beseitigen renderblockierender Ressourcen, denn ein kleineres Stylesheet ist einer der wichtigsten Wege, den kritischen Pfad freizumachen.

Ungenutztes CSS entfernen

1. Zuerst finden mit dem Coverage-Werkzeug

Mit dem Messen beginnen. DevTools öffnen, Strg+Umschalt+P (Cmd+Umschalt+P auf dem Mac) drücken, Show Coverage ausführen und die Seite neu laden. Der Coverage-Tab listet jede CSS-Datei mit einem rot-grünen Balken, rot ist der Anteil, der geladen, aber nie genutzt wurde. Das zeigt, welche Stylesheets das meiste tote Gewicht tragen.

2. Ungenutztes CSS beim Build purgen

Der dauerhafteste Fix ist, ungenutzte Selektoren schon beim Build zu entfernen. PurgeCSS durchsucht Ihre Vorlagen und entfernt CSS-Regeln, die nie referenziert werden. Bei Tailwind CSS ist dieser Mechanismus eingebaut: Die content-Konfiguration nennt die zu durchsuchenden Dateien, und nur die dort gefundenen Klassen werden erzeugt.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,php}'],
  // nur gefundene Klassen landen im finalen CSS
};

PurgeCSS für nicht Tailwind-basierte Builds nutzt denselben Ansatz mit einer Safelist für Klassen, die JavaScript erst zur Laufzeit hinzufügt:

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  css: ['./src/styles.css'],
  safelist: ['is-active', /^modal-/],
};

3. CSS pro Vorlage statt eines globalen Stylesheets

Ein einziges Stylesheet auf jeder Seite zwingt jede Seite, Stile mitzuladen, die sie nicht braucht. Seiten- oder vorlagenspezifisches CSS hält jede Datei schlank. Das zählt besonders bei großen Websites, auf denen Shop, Artikel und Landingpage kaum Stile teilen.

4. Kritisches CSS inline, den Rest asynchron laden

Das wenige CSS für den sichtbaren Bereich inline in den <head> stellen und das vollständige Stylesheet ohne Blockade nachladen:

<link rel="preload" href="/styles.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

So zeichnet der Browser das kritische CSS sofort und wendet den Rest an, sobald er eintrifft.

5. Ungenutztes CSS in WordPress ohne Code entfernen

In WordPress stammt das meiste ungenutzte CSS von Plugins und Page-Buildern, die ihre Stylesheets auf jeder Seite laden. Nicht mehr genutzte Plugins entfernen, da jedes sitewide CSS einbinden kann, und ein schlankes Theme wählen. Caching-Plugins wie WP Rocket oder Perfmatters bieten eine Funktion zum Entfernen ungenutzten CSS, die pro Seite kritisches CSS erzeugt. Aktivieren, dann wichtige Vorlagen testen, weil eine automatische Entfernung gelegentlich eine tatsächlich benötigte Regel streicht.

6. Kombinieren, minifizieren, kein @import

Kleine Stylesheets sinnvoll zusammenfassen, das Ergebnis im Produktions-Build minifizieren und CSS-@import vermeiden, das Stylesheets nacheinander lädt und den kritischen Pfad verlängert.

Den Fix prüfen

Neu bauen, dann Lighthouse oder PageSpeed Insights erneut ausführen und bestätigen, dass die verschwendeten Bytes gesunken und der rote Coverage-Anteil kleiner ist. Auf fehlende Stile achten: Hat ein Purge-Werkzeug Klassen entfernt, die JavaScript zur Laufzeit hinzufügt, diese Klassen auf eine Safelist setzen, damit sie den Build überstehen. Laborwerte reagieren sofort, die Felddaten im Chrome UX Report folgen über ein nachlaufendes 28-Tage-Fenster. Mehrere Vorlagen testen, weil sich ungenutztes CSS je Vorlage stark unterscheidet.

Häufige Fragen

Was bedeutet „nicht verwendetes CSS reduzieren"?

Ihre Seite lädt Stylesheet-Regeln, die auf keinem Element angewendet werden. Der Browser lädt und parst sie trotzdem, um das Stilmodell aufzubauen, was das Rendering blockiert und den ersten Farbauftrag verzögert. Die Empfehlung heißt je nach Sprache auch „ungenutztes CSS".

Wie finde ich ungenutztes CSS auf meiner Seite?

Mit dem Coverage-Werkzeug der Chrome DevTools. Show Coverage über das Befehlsmenü ausführen, die Seite neu laden, und der rote Anteil jeder CSS-Datei ist der ungenutzte Code.

Wie entferne ich ungenutztes CSS mit Tailwind?

Tailwind purgt automatisch über die content-Einstellung. Jede Datei auflisten, die Klassen verwendet, damit der Compiler nur Referenziertes behält. Zur Laufzeit dynamisch gebildete Klassen auf eine Safelist setzen, sonst werden sie entfernt.

Kann das Entfernen von CSS meine Seite kaputt machen?

Ja, wenn ein Purge-Werkzeug eine Klasse entfernt, die JavaScript zur Laufzeit setzt, da sie im durchsuchten Markup nicht vorkommt. Vorbeugen durch Safelisting dynamischer Klassen und Testen jeder wichtigen Vorlage nach dem Build.

Wie entferne ich ungenutztes CSS in WordPress ohne Programmierung?

Nicht genutzte Plugins und Page-Builder-Module entfernen, ein schlankes Theme wählen und die Funktion zum Entfernen ungenutzten CSS in einem Caching-Plugin wie WP Rocket oder Perfmatters aktivieren. Danach wichtige Seiten testen, weil die automatische Entfernung gelegentlich das Styling stört.

Verbessert das Reduzieren von CSS die Core Web Vitals und das Ranking?

Ja. Ein kleineres renderblockierendes Stylesheet lässt den Browser früher zeichnen und verbessert First Contentful Paint und Largest Contentful Paint. Da die Core Web Vitals ein Ranking-Signal sind, nützt der Gewinn Nutzern und Sichtbarkeit zugleich.

Nicht verwendetes CSS reduzieren