Beheben Sie 'Nicht verwendetes CSS entfernen' in Lighthouse

Zuletzt überprüft von Arjen Karel im Februar 2026

Was ist nicht verwendetes CSS?

Nicht verwendetes CSS besteht aus CSS-Deklarationen, die nirgendwo auf einer Webseite verwendet werden. Es ist völlig normal, dass ein Teil des CSS nicht verwendet wird. Zum Beispiel, weil einige CSS-Deklarationen für ein anderes Gerät wie einen Desktop oder ein Mobilgerät geschrieben wurden. Manchmal, weil ein Element, das im Stylesheet beschrieben wird (wie ein Button), auf dieser spezifischen Seite nicht verwendet wird. Nicht verwendetes CSS tritt oft auf, wenn Sie ein Framework wie Bootstrap verwenden, bei dem standardmäßig viel mehr Elemente im CSS beschrieben sind, als Sie jemals verwenden werden. Oder wenn Sie Ihre Seite neu gestaltet haben, aber vergessen haben, die alten CSS-Elemente zu entfernen.

Warum ist nicht verwendetes CSS schlecht für die Seitengeschwindigkeit?

CSS verlangsamt das Laden der Seite. Wenn eine Seite geladen wird, ruft der Browser zuerst das HTML von dieser Seite ab. Dieses HTML wird in DOM-Knoten umgewandelt. Danach ruft der Browser alle Stylesheets ab. Die in diesen CSS-Dateien gefundenen Stile werden ebenfalls in ein anderes Format konvertiert, nämlich das CSSOM. Das DOM und das CSSOM werden zu einem Render Tree kombiniert. Erst wenn dieser Render Tree aufgebaut ist, beginnt ein Browser mit dem Zeichnen des ersten Inhalts.

Aufgrund dieses Mechanismus blockieren CSS-Dateien immer das Rendern Ihrer Webseite. Wenn eine CSS-Datei größer ist, als sie sein sollte, dauert es länger, diese Datei herunterzuladen, und das verursacht die erste Verzögerung. Wenn eine CSS-Datei ungenutztes CSS enthält, dauert es länger, den Render Tree aufzubauen.

Die mediane Seite liefert 79 KB CSS auf Mobilgeräten aus, aber laut dem 2024 Web Almanac werden 52 KB davon auf der aktuellen Seite nicht verwendet. Das sind 66% verschwendetes CSS. Beim 90. Perzentil erreicht das nicht verwendete CSS 212 KB. Und 85% aller Seiten fallen beim Audit render-blocking resources durch, wobei CSS die Hauptursache ist.

Nicht verwendetes CSS verzögert direkt den First Contentful Paint (FCP) und den Largest Contentful Paint (LCP), weil der Browser keine Pixel zeichnet, bis das gesamte CSS heruntergeladen und geparst ist. Auf Seiten mit schwerem CSS beeinträchtigt es auch die INP, da größere Stylesheets die Kosten für Stilneuberechnungen während der Benutzerinteraktionen erhöhen.

Wie man nicht verwendetes CSS manuell findet

In Google Chrome können Sie ungenutztes CSS in der Übersicht Code Coverage anzeigen. Code Coverage ist Teil der Chrome DevTools. DevTools ist eine Reihe von integrierten Tools, die in jedem Chrome-Browser verfügbar sind.

Öffnen Sie zunächst die DevTools mit der Tastenkombination Strg-Umschalt-J. Geben Sie dann Strg-Umschalt-P ein, um die Befehlspalette zu öffnen. Tippen Sie nun 'coverage' ein. Wählen Sie Coverage aus und laden Sie die Seite neu. Sie sehen nun eine Übersicht der CSS- und JavaScript-Dateien, die von der Seite geladen und verwendet werden. Darüber hinaus können Sie sehen, wie groß die Dateien sind und wie viel des Codes tatsächlich verwendet wird. Klicken Sie auf eine CSS-Datei, um zu sehen, welche CSS-Regeln auf der aktuellen Seite verwendet (grün) und welche nicht verwendet (rot) werden.

Wie man die Warnung 'Nicht verwendetes CSS entfernen' behebt

Es gibt verschiedene Möglichkeiten, die Meldung 'Nicht verwendetes CSS entfernen' in Lighthouse zu beheben. Wenn die Behebung der Warnung aus irgendeinem Grund nicht möglich ist, könnten Sie die CSS-Bereitstellung optimieren, um sicherzustellen, dass nicht verwendetes CSS weniger Einfluss auf die Ladezeit Ihrer Seite hat. Ich werde die Optionen zur Behebung von nicht verwendetem CSS unten kurz besprechen.

1. Das ungenutzte CSS manuell löschen

Der logischste und beste Weg, aber auch der aufwendigste Weg, ist natürlich das manuelle Entfernen des ungenutzten CSS. Die Schritte sind einfach:

1. Sichern Sie Ihre originalen CSS-Dateien. Sie könnten zu viel CSS entfernen.
2. Öffnen Sie den Tab Code Coverage in Google Chrome und sehen Sie sich pro CSS-Datei an, welche Deklarationen Sie nicht benötigen.
3. Öffnen Sie die CSS-Datei auf dem Server (oder lokal) und überprüfen Sie jede nicht verwendete CSS-Deklaration. Bestimmen Sie, ob sie entfernt werden kann. Aber seien Sie vorsichtig: Eine nicht verwendete CSS-Deklaration auf einer Seite könnte auf einer anderen Seite benötigt werden. Das müssen Sie selbst beurteilen!
4. Überprüfen Sie pro CSS-Deklaration, ob sie nicht im CSS dupliziert ist. Dupliziertes CSS wird ebenfalls als ungenutzt markiert.
5. Überprüfen Sie jede CSS-Regel auf Kurzschreibweisen. Ist es möglich, das CSS zu kürzen? Dann kürzen Sie es!

2. Das CSS in mehrere Dateien aufteilen

Es gibt einen einfachen Weg, die Anzahl der CSS-Regeln schnell zu reduzieren! Laden Sie nur die Stile, die Sie für Ihr Gerät benötigen. Ihre Seite wird oft auf Mobilgeräten besucht. Sie müssen eigentlich nicht die Stile für Desktop und Druck für dieses Mobilgerät herunterladen. Diese Stile nicht herunterzuladen spart Zeit und verkürzt somit die kritische Anfragekette in Lighthouse.

Verwenden Sie dazu das media-Attribut. Das media-Attribut stellt sicher, dass ein Stylesheet nur verwendet wird, wenn das media-Attribut mit den Medien übereinstimmt, die Sie gerade verwenden.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

Sie können den media-Attribut-Trick auch verwenden, um unkritisches CSS zu laden, ohne das Rendern zu blockieren:

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Dies lädt das CSS ohne Render-Blockierung, indem es als media="print" markiert wird, und wechselt dann zu media="all", sobald es geladen ist.

3. Verwenden Sie ein automatisches CSS-Bereinigungstool

Es gibt eine Reihe von intelligenten Tools, die Ihre CSS-Dateien automatisch für Sie bereinigen und alle ungenutzten CSS-Referenzen entfernen können. Obwohl die Tools erstaunlich gut funktionieren, sind sie nicht fehlerfrei. Manchmal entfernen diese Tools zu viele CSS-Deklarationen. Verwenden Sie sie also sorgfältig und überprüfen Sie Ihr CSS immer selbst. Das beste CSS-Bereinigungstool ist PurgeCSS. PurgeCSS läuft auf Node.js und lässt sich in Webpack, PostCSS und Vite integrieren. Es verwendet Content-Extraktoren, um Ihre HTML-, JavaScript- und Vorlagendateien nach Klassennamen zu durchsuchen, und entfernt dann alle CSS-Selektoren, die nicht gefunden werden. Sie können auch PurifyCSS online für eine schnelle Analyse ausprobieren.

4. Critical CSS

Critical CSS ist eine Sammlung von CSS-Regeln, die im Viewport (dem sichtbaren Teil) Ihrer Website benötigt werden. Mit anderen Worten: Critical CSS ist das CSS, das erforderlich ist, um den sichtbaren Teil Ihrer Seite zu rendern.

Es gibt eine Reihe von Tools, die Critical CSS aus Ihrer Seite extrahieren können. Das Critical CSS wird dann inline, im Head Ihrer Seite platziert, während die originale CSS-Datei asynchron geladen wird (damit der Browser sie später verwenden kann).

Dies löst das Problem des nicht verwendeten CSS nicht vollständig. Letztendlich wird das nicht verwendete CSS geladen und geparst, aber Ihr Browser wird in der ersten Render-Phase nicht davon gestört.

Das am häufigsten verwendete Tool zum Finden und Extrahieren von Critical CSS ist das Node.js-Skript Critical. Es gibt auch Online-Tools wie Critical Path CSS Generator.

5. Die CSS-Dateien minifizieren

Ungenutztes CSS verlangsamt eine Seite, wie Sie oben gelesen haben, auf 2 Arten. Die erste ist, weil die CSS-Dateien größer sind und daher mehr Zeit zum Herunterladen benötigen.

Wir können diesem Problem entgegenwirken, indem wir die CSS-Dateigröße durch Minifizierung der CSS-Dateien reduzieren. Das geschieht durch einen CSS-Minifier. Ein CSS-Minifier verkleinert CSS-Dateien, indem er Leerzeichen, Kommentare und Formatierungen entfernt. Außerdem kann ein CSS-Minifier Variablen und CSS-Code umschreiben, sodass er weniger Bytes für die Übertragung benötigt.

Ein bekanntes CSS-Minify-Tool ist css-minify. Minifizieren Sie alle Ihre CSS-Dateien über die Befehlszeile mit dem Befehl css-minify -f dateiname. Es gibt auch verschiedene Online-CSS-Minifier wie cssminifier.com.

6. Kompilieren Sie Ihr CSS-Framework neu

Verwenden Sie ein CSS-Framework wie Bootstrap CSS? Das ist ein CSS-Framework, mit dem Sie Ihre gesamte Seite stylen können. Dieses Framework ist so umfassend, dass die Chancen gut stehen, dass Sie große Teile davon niemals verwenden werden.

Glücklicherweise haben die Macher von Bootstrap und anderen CSS-Frameworks dies berücksichtigt. Dieses Framework ist in SASS geschrieben. Das ist eine Sprache, die CSS sehr ähnlich ist. Sie besteht aus mehreren kleinen SASS-Dateien, die einfache Variablen und Funktionen verwenden können. Das macht es einfach, das Framework mit ein wenig Wissen selbst anzupassen und zu personalisieren. Sie können einfach Teile weglassen, die Sie nicht verwenden, und es leicht in 1 finale CSS-Datei kompilieren.

Stellen Sie auch sicher, dass Sie ein CSS-Framework nicht unmodifiziert vom Standard-CDN laden. Laden Sie das Framework herunter und kompilieren Sie es mit SASS genau so, wie Sie es möchten, mit nur den CSS-Klassen, die Sie verwenden.

7. Erwägen Sie eine andere CSS-Strategie

Wollen Sie wirklich schnell sein? Dann könnte es eine Idee sein, Ihre CSS-Strategie zu überdenken. Wie das gemacht wird, hängt von Ihrer Seite ab. Es führen viele Wege nach Rom.

Nehmen wir zum Beispiel unsere Seite. Wir laden nur das CSS, das wir pro Seite wirklich benötigen. Die CSS-Klassen werden von unserem CMS automatisch nur dann importiert, wenn sie benötigt werden. Wir platzieren das CSS inline (im Head der Seite). Das erspart uns eine zusätzliche Netzwerkanfrage. Diese Lösung ist blitzschnell und einfach zu warten.

Ein aufmerksamer Leser könnte denken: "Was ist mit CSS-Caching? CSS ist schneller, wenn die endgültigen CSS-Dateien zwischengespeichert sind." Ja, das stimmt. Deshalb verwenden wir Speculation Rules, um Seiten im sichtbaren Viewport vorzuladen, sodass eine Seite immer aus dem Cache abgerufen wird, einschließlich CSS.

Beheben Sie 'Nicht verwendetes CSS entfernen' in WordPress

Sind Sie bereit, ungenutztes CSS zu entfernen? So legen Sie in WordPress los. In WordPress kann CSS auf 3 Arten hinzugefügt werden:

• Direkt in das Template. In Ihrem Template-Ordner befindet sich eine Datei namens header.php. In dieser Datei gibt es oft Template-spezifische CSS-Dateien. Sie könnten diese CSS-Dateien wie oben beschrieben ändern. Vergessen Sie nicht, Ihre originalen CSS-Dateien zu sichern, und denken Sie daran, dass ein Theme-Update Ihre CSS-Dateien überschreiben kann.
• CSS, das von einem Plugin hinzugefügt wird. Plugins in WordPress können unbegrenzt CSS-Dateien in Ihr HTML einfügen. Diese Plugins verwenden die Funktionen wp_register_style und wp_enqueue_style. Die meisten Plugins machen sich nicht die Mühe zu prüfen, ob sie auf der aktuellen Seite aktiv sind. Sie injizieren einfach CSS in jede Seite, obwohl auf dieser Seite kein Bedarf für das plugin-spezifische CSS besteht. Das begegnet mir jeden Tag. Wenn das der Fall ist, können Sie die Funktionen wp_dequeue_style und wp_deregister_style verwenden, um diese Stile von den Seiten zu entfernen. Das ist eine Präzisionsarbeit. Wenn Sie sich unsicher sind, wie Sie dies beheben können, wenden Sie sich an Ihren Entwickler oder bitten Sie mich um Hilfe. Sie können auch das Plugin Asset CleanUp verwenden, mit dem Sie pro Seitentyp festlegen können, welche Plugins, Stile und Skripte geladen werden dürfen.
• CSS, das von JavaScript hinzugefügt wird. Es ist auch möglich, Stylesheets mit JavaScript in die Seite zu injizieren. Genau wie Stylesheets können Sie diese Skripte pro Seite mit der Funktion wp_dequeue_script deaktivieren. Wenn das JavaScript nicht geladen wird, wird auch das Stylesheet nicht injiziert. Wenn Sie das Skript und das Stylesheet benötigen, aber nicht direkt nach dem Laden, ist es möglich, das Laden von JavaScript zu verschieben, über das defer-Attribut des Skripts. Tun Sie das, indem Sie diesen Code in die functions.php einfügen:

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

Nachdem Sie Ihr nicht verwendetes CSS reduziert haben, überprüfen Sie die Verbesserung mit Real User Monitoring. In unseren CoreDash-Daten sehen Seiten, die Critical CSS inlinen und den Rest verzögern, eine mediane FCP-Verbesserung von 320ms.