Wie man nicht verwendete CSS in WordPress entfernt (der richtige Weg)

Als Betreiber von WordPress-Websites sind wir alle bestrebt, eine schnelle und optimale Benutzererfahrung zu bieten. Das hält nicht nur die Besucher bei der Stange, sondern trägt auch dazu bei, dass unsere Websites in den Suchergebnissen besser platziert werden.

Bei der Verbesserung der WordPress-Leistung übersehen viele Anfänger ungenutztes CSS. Dabei handelt es sich um Code, der von Themes oder Plugins hinzugefügt wurde und für die Funktionalität oder das Design Ihrer Website nicht unbedingt erforderlich ist. Das Laden dieses unnötigen Codes kann dazu führen, dass Webseiten langsamer geladen werden.

Unser Team optimiert WordPress-Websites seit über einem Jahrzehnt. In diesem Leitfaden zeigen wir Ihnen die Methoden, die wir für das Entfernen von ungenutztem CSS am effektivsten finden, ohne Ihre Website zu zerstören, und führen Sie Schritt für Schritt durch den Prozess.

Was ist unbenutztes CSS in WordPress?

Ungenutztes CSS in WordPress ist CSS-Code, der auf Ihrer Website geladen wird, aber eigentlich nicht benötigt wird, um die Seite anzuzeigen.

Der zusätzliche Code kann dazu führen, dass der Browser eines Besuchers etwas länger braucht, um eine Seite zu rendern, was zu einer schlechten Nutzererfahrung führt. Die langsameren Ladezeiten können sich sogar auf Ihr Suchranking auswirken, was zu weniger Verkehr auf Ihrer Website führt.

Mit Google Pagespeed Insights können Sie sehen, wie sich ungenutzter CSS-Code auf Ihre Website auswirkt. Es zeigt Ihnen einen Abschnitt mit dem Titel „Ungenutzte CSS entfernen“ mit Details zu den CSS-Dateien, die Ihre Ladezeiten beeinträchtigen.

Warum wird unbenutztes CSS in WordPress hinzugefügt?

CSS wird verwendet, um das Erscheinungsbild Ihrer WordPress-Website zu gestalten. Ihr WordPress-Theme enthält CSS, wobei das meiste davon in einer einzigen style.css-Datei enthalten ist.

Zusätzlich zum CSS Ihres Themes laden Ihre WordPress-Plugins auch ihr eigenes CSS.

WooCommerce lädt beispielsweise CSS für die Anzeige von Produkten, ein Plugin für die Seitenerstellung fügt sein eigenes CSS hinzu, um Ihre benutzerdefinierten Seiten anzuzeigen, und ein Plugin für die Formularerstellung enthält CSS für die Gestaltung Ihrer Formulare.

Dann haben Sie Ihre Webschriften, Symbolschriften und andere Elemente, die ebenfalls ihre eigenen CSS-Dateien hinzufügen müssen.

Normalerweise sind diese Dateien sehr klein und werden schnell geladen. Wenn Ihre WordPress-Website jedoch viele dieser Dateien enthält, können sich die Auswirkungen summieren und einen spürbaren Einfluss auf die Geschwindigkeit Ihrer Website haben.

Wie entfernt man nicht verwendete CSS in WordPress

Es gibt verschiedene Möglichkeiten, wie Sie ungenutztes CSS auf Ihrer WordPress-Website reduzieren können.

Es wäre jedoch eine ziemlich schwierige Aufgabe, alle nicht verwendeten CSS in WordPress vollständig zu entfernen. Aufgrund der Art und Weise, wie WordPress hinter den Kulissen arbeitet, können einige nicht verwendete CSS schwer zu finden und zu entfernen sein.

Wir zeigen Ihnen zwei Methoden zum Entfernen von ungenutztem CSS, und Sie können diejenige wählen, die für Sie am besten geeignet ist.

Methode 1: Ungenutzte CSS in WordPress mit WP Rocket entfernen

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

Wir sind der Meinung, dass dies die beste Lösung für Anfänger ist, da sie einfacher ist und das Hauptziel, eine bessere Erfahrung für Ihre Nutzer zu bieten, erreicht wird. Das bedeutet, dass Ihre Website bei Geschwindigkeitstests schnell geladen wird und sich auch für Ihre Nutzer schnell anfühlt.

Zunächst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ WP Rocket besuchen und auf die Registerkarte „Datei-Optimierung“ wechseln.

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

Da sich diese Funktion von WP Rocket noch im Beta-Stadium befindet, werden Sie erneut gefragt, ob Sie die Einstellung aktivieren möchten. Sie können fortfahren und auf die Schaltfläche „Activate Remove Unused CSS“ klicken.

Sobald die Option „Unbenutzte CSS entfernen“ aktiviert ist, können Sie im 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 blättern und auf die Schaltfläche „Änderungen speichern“ klicken.

Wenn Sie das tun, beginnt WP Rocket mit der Verarbeitung Ihrer CSS-Dateien und zeigt Ihnen einen Fortschrittsbalken an.

Es wird einige Minuten dauern, bis das Plugin die nicht verwendeten CSS-Dateien von Ihrer Website entfernt hat.

Wenn das Plugin den Vorgang abgeschlossen hat, wird die Meldung „Remove Unused CSS is complete!“ angezeigt.

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

Render-Blocking-CSS für WordPress entfernen

Mit WP Rocket können Sie Ihre CSS-Dateien optimieren und Rendering-blockierende CSS aus Ihrer Website entfernen.

Zunächst können Sie in WP Rocket zur Registerkarte „Datei-Optimierung“ navigieren. Scrollen Sie von hier aus nach unten zum Abschnitt „CSS-Dateien“ und aktivieren Sie das Kontrollkästchen neben der Option „CSS-Lieferung optimieren“.

Diese Option erzeugt eine CSS-Datei, die nur den CSS-Code enthält, der für die Darstellung des sichtbaren Teils Ihrer Website erforderlich ist. Diese Datei wird zuerst geladen, die Seite wird Ihren Besuchern angezeigt, und dann werden andere CSS-Dateien mit einer Technologie namens „deferred loading“ geladen.

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

Nachdem Sie die Option „Optimize CSS delivery“ aktiviert haben, klicken Sie auf die Schaltfläche „Save Changes“ (Änderungen speichern) und warten Sie darauf, dass WP Rocket die erforderliche CSS-Datei für alle Ihre Beiträge und Seiten erstellt. Es wird auch automatisch den Cache für Ihre Website löschen.

Danach können Sie die Leistung Ihrer Website erneut mit Google Pagespeed Insights testen.

Zusätzliche Verbesserungen bei der Dateiübertragung zur Steigerung der Leistung

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 tragen zu einer geringfügigen Verbesserung der Gesamtgeschwindigkeit bei, was in der Summe zu einem schnelleren Ladeerlebnis für Ihre Besucher führt.

Sie sehen auch Optionen zum Minifizieren und Kombinieren von CSS-Dateien. Diese Optionen reduzieren HTTP-Anfragen und sorgen für einen zusätzlichen Geschwindigkeitsschub.

Allerdings müssen Sie Ihre Website sorgfältig überprüfen, um sicherzustellen, dass nach der Aktivierung dieser Einstellungen nichts kaputt ist.

Außerdem können Sie die gleiche Optimierung für JavaScript-Dateien auf Ihrer Website anwenden.

Sie können sie verkleinern und kombinieren, um sie als eine einzige Datei zu verwenden, und das Laden von JavaScript-Dateien aufschieben, um die Leistung zu verbessern.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie WP Rocket in WordPress richtig einrichten.

Methode 2: Ungenutzte CSS in WordPress mit Asset CleanUp entfernen

Diese Methode ist ein wenig fortgeschritten, aber unglaublich leistungsfähig und ermöglicht es Ihnen, ungenutzte CSS von jeder Seite Ihrer WordPress-Website 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.

Zunächst müssen Sie das Asset Cleanup-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Asset CleanUp “ Einstellungen aufrufen und zur Registerkarte Testmodus wechseln. Hier müssen Sie die Option „Testmodus aktivieren“ aktivieren.

So können Sie als Administrator verschiedene Einstellungen ausprobieren und testen, ohne dass die Besucher der Website davon betroffen sind.

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 holt zunächst Ihre Homepage und zeigt Ihnen alle CSS- und JavaScript-Dateien, die auf dieser Seite geladen sind.

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 die betreffende Seite, den Beitragstyp oder die gesamte Website entladen.

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

Auf dem Bearbeitungsbildschirm für Beiträge finden Sie das Feld Asset CleanUp direkt unter dem Beitragseditor.

Das Plugin holt und listet automatisch alle Dateien und Assets 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 zu testen, nachdem Sie ungenutztes CSS oder JavaScript entfernt haben, um sicherzustellen, dass alles einwandfrei funktioniert.

Sobald Sie mit dem Entladen und Entfernen nicht benötigter CSS- und JavaScript-Dateien fertig sind, 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 des nicht verwendeten CSS-Hinweises zu sehen.

Expertenanleitungen zur Verbesserung der WordPress-Leistung

Da Sie nun wissen, wie Sie Ihre Website durch das Entfernen von ungenutztem CSS beschleunigen können, möchten Sie vielleicht einige andere Anleitungen zur Verbesserung der WordPress-Performance sehen:

• Der ultimative Leitfaden zur Steigerung der Geschwindigkeit und Leistung von WordPress
• Wie man die Leistung von WooCommerce beschleunigt
• Wie man einen Website-Geschwindigkeitstest richtig durchführt (beste Tools)
• Wichtige Metriken, die Sie auf Ihrer WordPress-Website messen sollten
• Optimieren von Core Web Vitals für WordPress (ultimative Anleitung)
• Verwendung des GTmetrix-Plugins zur Verbesserung der Leistung von WordPress-Websites
• Wie Sie die CSS-Auslieferung von WordPress leicht optimieren können
• Schnellstes WordPress-Hosting (Leistungstests)
• Wie man Bilder für die Webleistung optimiert, ohne an Qualität zu verlieren
• Beste WordPress Caching Plugins zur Beschleunigung Ihrer Website

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie ungenutztes CSS in WordPress einfach entfernen können. Vielleicht interessieren Sie sich auch für unseren vollständigen Leitfaden zu den Kosten für die Erstellung einer Website und unsere Expertenauswahl für das beste verwaltete WordPress-Hosting.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.