Wie man ungenutztes CSS in WordPress entfernt (Der richtige Weg)

Als Besitzer von WordPress-Websites streben wir alle danach, eine schnelle und optimale Benutzererfahrung zu bieten. Dies hält nicht nur die Besucher bei der Stange, sondern hilft unseren Websites auch, in den Suchergebnissen höher zu ranken.

Möglicherweise wissen Sie nicht, dass Ihre Themes und Plugins oft viel mehr CSS-Code laden, als Ihre Seiten benötigen. Dieses nicht verwendete CSS verlangsamt Ihre Website möglicherweise heimlich.

Jede zusätzliche Codezeile, die Ihre Besucher herunterladen müssen, verlängert die Ladezeit um wertvolle Sekunden. Und in der heutigen Zeit kann selbst eine Sekunde Verzögerung Sie Besucher und Verkäufe kosten.

Deshalb haben wir diesen vollständigen Leitfaden zur richtigen Entfernung von ungenutztem CSS aus WordPress zusammengestellt. Wir zeigen Ihnen die genauen Methoden, die wir verwenden, um aufgeblähte Stylesheets zu bereinigen und Websites zu beschleunigen, ohne etwas zu beschädigen.

Was ist ungenutztes CSS in WordPress?

Ungenutztes CSS in WordPress bezieht sich auf CSS-Code , der auf Ihren Webseiten geladen wird, aber nicht tatsächlich verwendet wird, um etwas Sichtbares auf diesen spezifischen Seiten zu gestalten.

Dieser zusätzliche Code zwingt die Browser der Besucher, unnötige Dateien herunterzuladen und zu verarbeiten, was die Ladezeiten Ihrer Seiten verlangsamt. Selbst ein paar zusätzliche Sekunden können Ihre Benutzererfahrung und Ihre Suchmaschinenrankings beeinträchtigen und Sie potenziell Besucher und Konversionen kosten.

Sie können leicht überprüfen, ob ungenutztes CSS Ihre Website beeinträchtigt, indem Sie sie durch Google Pagespeed Insights laufen lassen. Suchen Sie in Ihren Ergebnissen nach der Warnung „Remove unused CSS“. Sie zeigt Ihnen genau, welche Dateien die Dinge verlangsamen.

Warum lädt WordPress nicht verwendeten CSS-Code?

Die Sache ist die: WordPress wurde nicht so konzipiert, dass es wählerisch ist, welches CSS es lädt. Ihr WordPress-Theme wird mit einer Master-Stylesheet-Datei (normalerweise style.css genannt) geliefert, die Styling-Regeln für jedes mögliche Element enthält, selbst für solche, die Sie vielleicht nie verwenden werden.

Aber Ihr Theme ist nur der Anfang. Jedes Plugin, das Sie installieren, fügt seine eigenen CSS-Dateien hinzu. WooCommerce lädt Shop-Styling auf jeder Seite (auch auf Ihren Blogbeiträgen), Page Builder laden ihr CSS global, und Kontaktformular-Plugins laden Formularstile auf Seiten ohne Formulare.

Fügen Sie benutzerdefinierte Schriftarten, Icon-Bibliotheken und andere Designelemente hinzu, und Sie erhalten eine Menge CSS-Bloat. Während jede einzelne Datei klein sein mag, summieren sie sich schnell und beeinträchtigen die Geschwindigkeit Ihrer Website.

So entfernen Sie ungenutztes CSS in WordPress

Nun zur guten Nachricht: Es gibt mehrere effektive Möglichkeiten, ungenutztes CSS auf Ihrer WordPress-Website zu bereinigen. Wir haben mehrere Ansätze getestet und Methoden gefunden, die zuverlässig funktionieren, ohne Ihre Website zu beeinträchtigen.

Hier ist, was Sie im Voraus wissen müssen: Das vollständige Eliminieren von 100 % ungenutztem CSS ist aufgrund der dynamischen Inhaltsladung von WordPress nahezu unmöglich. Einige CSS-Dateien müssen für interaktive Elemente, bedingte Inhalte und verschiedene Seitentypen bereitgehalten werden.

Aber keine Sorge, Sie brauchen keine Perfektion, um große Verbesserungen zu erzielen. Schon das Entfernen von 50-70 % des ungenutzten CSS kann Ihre Website dramatisch beschleunigen.

Wir zeigen Ihnen zwei bewährte Methoden, die die richtige Balance zwischen Leistungssteigerung und Website-Stabilität bieten, sodass Sie den Ansatz wählen können, der Ihrem Komfortniveau entspricht.

1. Unbenutztes CSS in WordPress mit WP Rocket entfernen
2. Remove Unused CSS in WordPress Using Asset CleanUp

Methode 1: Nicht verwendetes CSS in WordPress mit WP Rocket entfernen

Diese Methode ist einfacher und wird für Anfänger empfohlen. Sie verbessert die allgemeine Auslieferung von CSS-Dateien auf Ihrer WordPress-Website erheblich, einschließlich der Entfernung des größten Teils des ungenutzten CSS.

Wir halten es für die beste Lösung für Anfänger, da es einfacher ist und das Hauptziel erreicht, Ihren Benutzern eine bessere Erfahrung zu bieten. Das bedeutet, dass Ihre Website auf Geschwindigkeitstest-Tools schnell lädt und sich auch für Ihre Benutzer schnell anfühlt.

Zuerst müssen Sie das WP Rocket Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen » WP Rocket besuchen und zum Tab „Dateioptimierung“ wechseln.

Als Nächstes müssen Sie zum Abschnitt CSS-Dateien scrollen und dann das Kontrollkästchen neben der Option „Nicht verwendeten CSS-Code entfernen (Beta)“ aktivieren.

Da diese Funktion von WP Rocket sich im Beta-Stadium befindet, werden Sie nochmals gefragt, ob Sie die Einstellung aktivieren möchten. Sie können fortfahren und auf die Schaltfläche „Nicht verwendeten CSS-Code entfernen aktivieren“ klicken.

Sobald die Option „Ungenutztes CSS entfernen“ aktiv ist, können Sie unter dem Feld „CSS-Safelist“ CSS-Dateinamen, IDs oder Klassen angeben, die nicht entfernt werden sollen.

Geben Sie sie einfach in das Feld ein.

Als Nächstes müssen Sie Ihre Änderungen speichern, indem Sie nach unten scrollen und auf die Schaltfläche „Änderungen speichern“ klicken.

Wenn Sie dies tun, beginnt WP Rocket mit der Verarbeitung Ihrer CSS-Dateien und zeigt Ihnen eine Fortschrittsanzeige an.

Es dauert einige Minuten, bis das Plugin die ungenutzten CSS-Dateien von Ihrer Website verarbeitet und entfernt hat.

Sie sehen die Meldung „Entfernen von ungenutztem CSS abgeschlossen!“, wenn das Plugin den Vorgang abgeschlossen hat.

Besuchen Sie jetzt das Google Pagespeed Insights-Tool und testen Sie die Leistung Ihrer Website.

Render-blockierendes CSS für WordPress entfernen

WP Rocket ermöglicht es Ihnen, Ihre CSS-Dateien zu optimieren und render-blocking CSS von Ihrer Website zu entfernen.

Um zu beginnen, können Sie zum Tab „Dateioptimierung“ in WP Rocket navigieren. Scrollen Sie von hier aus zum Abschnitt „CSS-Dateien“ und aktivieren Sie dann das Kontrollkästchen neben der Option „CSS-Bereitstellung optimieren“.

Diese Option generiert eine CSS-Datei, die nur den CSS-Code enthält, der zum Anzeigen des sichtbaren Teils Ihrer Website benötigt wird. Sie lädt diese Datei zuerst, zeigt die Seite Ihren Besuchern an und lädt dann andere CSS-Dateien mithilfe einer Technologie namens verzögertes Laden.

Durch das Entfernen dieses render-blocking CSS wird Ihre Website für Benutzer viel schneller sichtbar, als wenn Sie alle CSS-Dateien laden müssten, bevor die Seite angezeigt wird.

Nachdem Sie die Option „CSS-Bereitstellung optimieren“ aktiviert haben, klicken Sie auf die Schaltfläche „Änderungen speichern“ und warten Sie, bis WP Rocket die notwendige CSS-Datei für alle Ihre Beiträge und Seiten generiert hat. Es wird auch automatisch den Cache Ihrer Website löschen.

Sobald Sie fertig sind, können Sie Ihre Website-Leistung mit Google Pagespeed Insights erneut testen.

Zusätzliche Anpassungen der Dateilieferung zur Leistungssteigerung

WP Rocket ermöglicht es Ihnen auch, Abfragezeichenfolgen aus statischen Dateien zu entfernen, Google Fonts-Dateien zu kombinieren und HTML zu minimieren.

All diese Optimierungen führen zu kleinen Verbesserungen Ihrer Gesamtgeschwindigkeit, die sich zu einer schnelleren Ladeerfahrung für Ihre Besucher summieren.

Sie sehen auch Optionen zum Minimieren und Kombinieren von CSS-Dateien. Diese Optionen reduzieren HTTP-Anfragen und verschaffen Ihnen einen zusätzlichen Geschwindigkeitsvorteil.

Sie müssen jedoch Ihre Website sorgfältig überprüfen, um sicherzustellen, dass nichts beschädigt ist, nachdem Sie diese Einstellungen aktiviert haben.

Zusätzlich können Sie die gleiche Optimierung für JavaScript-Dateien auf Ihrer Website anwenden.

Sie können sie minimieren und kombinieren, um sie als einzelne Datei zu servieren, und das Laden von JavaScript-Dateien verzögern, um die Leistung zu verbessern.

Weitere Details finden Sie in unserem Schritt-für-Schritt-Tutorial zum richtigen Einrichten von WP Rocket in WordPress.

Methode 2: Ungenutztes CSS in WordPress mit Asset CleanUp entfernen

Diese Methode ist etwas fortgeschritten, aber unglaublich leistungsfähig und ermöglicht es Ihnen, ungenutztes CSS von jeder Seite Ihrer WordPress-Website einfach zu entfernen.

Es ist jedoch etwas kompliziert, und Sie müssen die Funktionalität und das Erscheinungsbild Ihrer Website gründlich testen, um sicherzustellen, dass nichts kaputt ist.

Zuerst müssen Sie das Plugin Asset Cleanup installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie die Seite Asset CleanUp » Einstellungen aufrufen und zum Tab Testmodus wechseln. Von hier aus müssen Sie die Option 'Testmodus aktivieren' einschalten.

Dies ermöglicht es Ihnen, verschiedene Einstellungen auszuprobieren und sie als Administrator zu testen, ohne die Website-Besucher zu beeinträchtigen.

Danach müssen Sie die Seite Asset CleanUp » CSS/JS Manager besuchen. Von hier aus können Sie unerwünschte CSS- und JavaScript-Dateien seitenweise entladen.

Es wird zuerst Ihre Homepage abrufen und Ihnen alle CSS- und JavaScript-Dateien anzeigen, die auf dieser Seite geladen werden.

Sie müssen nach unten scrollen und die geladenen Dateien überprüfen. Wenn Sie eine Datei sehen, die Sie nicht benötigen, können Sie sie für diese spezielle Seite, diesen Beitragstyp oder die gesamte Website entladen.

Das Plugin ermöglicht es Ihnen auch, hier bestimmte Beiträge oder Seiten auszuwählen, oder Sie können auf dieselben Optionen zugreifen, indem Sie den Beitrag oder die Seite wie gewohnt bearbeiten.

Auf dem Beitragsbearbeitungsbildschirm finden Sie die Asset CleanUp-Box direkt unter dem Beitragseditor.

Das Plugin ruft automatisch alle Dateien und Assets ab und listet sie auf, die geladen werden, wenn ein Besucher diese Seite auf Ihrer Website aufruft.

Sie können dann einfach die ungenutzten CSS- oder JavaScript-Dateien entladen, die Sie auf dieser Seite nicht benötigen.

Wichtig: Vergessen Sie nicht, Ihre Website nach dem Entfernen von ungenutztem CSS oder JavaScript zu testen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Sobald Sie ungenutzte CSS- und JavaScript-Dateien entladen und entfernt haben, können Sie zur Einstellungsseite des Plugins zurückkehren und den „Testmodus“ ausschalten.

Vergessen Sie nicht, auf die Schaltfläche 'Alle Einstellungen aktualisieren' zu klicken, um Ihre Änderungen zu speichern.

Sie können Ihre Website jetzt mit Google Pagespeed Insights testen, um die Änderung der Benachrichtigung über ungenutztes CSS zu sehen.

Experten-Anleitungen zur Verbesserung der WordPress-Performance

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ungenutztes CSS in WordPress einfach entfernen können. Möglicherweise möchten Sie auch einige andere Anleitungen zur Verbesserung der WordPress-Leistung lesen:

• Der ultimative Leitfaden zur Steigerung von WordPress-Geschwindigkeit & Leistung
• So beschleunigen Sie die WooCommerce-Leistung
• So führen Sie einen Website-Geschwindigkeitstest richtig durch (die besten Tools)
• Wichtige Metriken, die Sie auf Ihrer WordPress-Website messen sollten
• So optimieren Sie Core Web Vitals für WordPress (Ultimativer Leitfaden)
• So verwenden Sie das GTmetrix-Plugin zur Verbesserung der WordPress-Website-Leistung
• Wie Sie die Auslieferung von WordPress CSS einfach optimieren
• Schnellstes WordPress Hosting (Performance-Tests)
• Wie man Bilder für Web-Performance optimiert, ohne Qualität zu verlieren
• Die besten WordPress-Caching-Plugins, um Ihre Website zu beschleunigen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.