Wie man unbenutzte CSS in WordPress entfernt (der richtige Weg)

Möchten Sie ungenutzte CSS in WordPress entfernen, damit Ihre Website schneller lädt?

Ungenutztes CSS ist jeder CSS-Code, der von Ihrem WordPress-Theme oder Plugins hinzugefügt wurde und den Sie nicht wirklich benötigen. Das Entfernen dieses CSS-Codes verbessert die Leistung von WordPress und die Benutzerfreundlichkeit.

In diesem Artikel zeigen wir Ihnen, wie Sie ungenutztes CSS in WordPress ganz einfach entfernen können, ohne Ihre Website zu beschädigen.

Was ist ungenutztes 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 Benutzererfahrung führt. Die langsameren Ladezeiten können sich sogar auf Ihr Suchranking auswirken, was zu weniger Traffic auf Ihrer Website führt.

Mit Google Pagespeed Insights können Sie feststellen, wie sich nicht verwendeter CSS-Code auf Ihre Website auswirkt. Dort finden Sie einen Abschnitt mit der Überschrift „Ungenutzte CSS entfernen“, in dem angegeben ist, welche CSS-Dateien die Ladezeiten beeinträchtigen.

Warum wird ungenutztes 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 gibt es noch Ihre Web-Schriftarten, Symbol-Schriftarten 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 sehr viele davon enthält, können sich die Auswirkungen summieren und die Geschwindigkeit Ihrer Website spürbar beeinträchtigen.

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 ungenutzten CSS in WordPress vollständig zu entfernen. Aufgrund der Art und Weise, wie WordPress hinter den Kulissen arbeitet, kann es schwierig sein, einige nicht verwendete CSS zu finden und zu entfernen.

Daher zeigen wir 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. Unbenutzte 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 denken, dass dies die beste Lösung für Anfänger ist, da sie einfacher ist und das Hauptziel, eine bessere Erfahrung für Ihre Benutzer zu bieten, erreicht. Das bedeutet, dass Ihre Website mit Hilfe von 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 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 Einstellungen “ WP Rocket besuchen und auf die Registerkarte „Datei-Optimierung“ wechseln.

Als Nächstes müssen Sie nach unten zum Abschnitt CSS-Dateien scrollen. Hier müssen Sie das Kästchen neben der Option „Optimize CSS delivery“ ankreuzen.

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 „zeitversetztes Laden“ geladen.

Durch das Entfernen dieses Rendering-blockierenden CSS 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 „CSS-Auslieferung optimieren“ aktiviert haben, klicken Sie auf die Schaltfläche „Ä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.

Sobald dies geschehen ist, können Sie die Leistung Ihrer Website erneut mit Google Pagespeed Insights testen.

Zusätzliche Tweaks für die Dateiauslieferung zur Steigerung der Leistung

WP Rocket ermöglicht es Ihnen auch, Query-Strings aus statischen Dateien zu entfernen, Google Fonts-Dateien zu kombinieren und HTML zu minimieren. All diese Optimierungen führen zu kleinen Verbesserungen der Gesamtgeschwindigkeit, die sich zu einem schnelleren Ladeerlebnis für Ihre Besucher summieren.

Sie sehen auch Optionen zum Verkleinern und Kombinieren von CSS-Dateien. Diese Optionen reduzieren HTTP-Anfragen und geben Ihnen 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 zu einer einzigen Datei zusammenfassen und das Laden von JavaScript-Dateien aufschieben, um die Leistung zu verbessern.

Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur korrekten Einrichtung von WP Rocket in WordPress.

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, unbenutzte CSS von jeder Seite Ihrer WordPress-Website zu entfernen.

Sie ist jedoch etwas kompliziert und Sie müssen die Funktionalität und das Aussehen 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 auf die Registerkarte Testmodus wechseln. Hier müssen Sie die Option „Testmodus aktivieren“ aktivieren.

So können Sie verschiedene Einstellungen ausprobieren und sie als Administrator 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.

Zunächst wird Ihre Homepage abgerufen und es werden alle CSS- und JavaScript-Dateien angezeigt, 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 diese bestimmte Seite, diesen Beitragstyp oder für die gesamte Website entladen.

Mit dem Plugin können Sie hier auch bestimmte Beiträge oder Seiten auswählen, oder Sie können auf die gleichen Optionen zugreifen, indem Sie den Beitrag oder die Seite wie gewohnt bearbeiten.

Auf dem Bearbeitungsbildschirm des Beitrags 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 nicht verwendeten CSS- oder JavaScript-Dateien entladen, die Sie auf dieser Seite nicht benötigen.

Wichtig! Vergessen Sie nicht, Ihre Website zu testen, nachdem Sie ungenutzte CSS- oder JavaScript-Dateien entfernt haben, um sicherzustellen, dass alles einwandfrei funktioniert.

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

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

Sie können nun Ihre Website mit Google Pagespeed Insights testen, um die Veränderung der nicht verwendeten CSS-Dateien zu sehen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie ungenutztes CSS in WordPress einfach entfernen können.