So entfernen Sie ungenutztes CSS in WordPress (der richtige Weg)

Möchten Sie nicht verwendetes CSS in WordPress entfernen, damit Ihre Website schneller geladen wird?

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

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

Was ist unbenutztes CSS in WordPress?

Ungenutztes CSS in WordPress ist CSS-Code, der in Ihre 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 darzustellen, was zu einer schlechten Benutzererfahrung führt. Langsamere Ladezeiten können sich sogar auf Ihre Suchrankings auswirken, was zu weniger Traffic auf Ihrer Website führt.

Mit Google Pagespeed Insights können Sie sehen, wie sich ungenutztes CSS auf Ihre Website auswirkt. Es zeigt Ihnen einen Abschnitt mit dem Titel „Unbenutztes CSS entfernen“ mit Details darüber, welche CSS-Dateien Ihre Ladezeiten beeinflussen.

Problem mit nicht verwendetem CSS-Code in Google Pagespeed Insights

Warum wird in WordPress unbenutztes CSS hinzugefügt?

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

Zusätzlich zum CSS Ihres Themes laden Ihre WordPress-Plugins auch ihr eigenes CSS. Beispielsweise lädt WooCommerce CSS, um Produkte anzuzeigen, ein Seitenerstellungs-Plug-in fügt sein eigenes CSS hinzu, um Ihre benutzerdefinierten Seiten anzuzeigen, und ein Formularerstellungs-Plug-in enthält CSS, um Ihre Formulare zu gestalten.

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

Diese Dateien sind normalerweise sehr klein und werden schnell geladen. Wenn Ihre WordPress-Site jedoch viele davon enthält, können sich die Effekte summieren und einen spürbaren Einfluss auf die Geschwindigkeit Ihrer Website haben.

Wie entferne ich unbenutztes CSS in WordPress?

Es gibt verschiedene Möglichkeiten, ungenutztes CSS auf Ihrer WordPress-Website zu reduzieren.

Es wäre jedoch eine ziemlich schwierige Aufgabe, das gesamte nicht verwendete CSS in WordPress vollständig zu entfernen. Aufgrund der Art und Weise, wie WordPress hinter den Kulissen arbeitet, kann es schwierig sein, nicht verwendete CSS zu finden und zu entfernen.

Vor diesem Hintergrund zeigen wir Ihnen zwei Methoden zum Entfernen von nicht verwendetem CSS, und Sie können diejenige auswählen, die Ihren Anforderungen am besten entspricht.

Methode 1. Entfernen Sie unbenutztes CSS in WordPress mit WP Rocket

Diese Methode ist einfacher und wird Anfängern empfohlen. Es verbessert die Gesamtbereitstellung von CSS-Dateien auf Ihrer WordPress-Website erheblich, einschließlich des Entfernens des größten Teils des nicht verwendeten CSS.

Wir glauben, dass es die beste Lösung für Anfänger ist, weil es einfacher ist und das Hauptziel erreicht, seinen Benutzern ein besseres Erlebnis zu bieten. Dies bedeutet, dass Ihre Website auf Geschwindigkeitstest-Tools schnell geladen wird und sich auch für Ihre Benutzer schnell anfühlt.

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

Nach der Aktivierung müssen Sie die besuchen Einstellungen » WP Rocket und wechseln Sie auf die Registerkarte „Dateioptimierung“.

Dateioptimierung in WP Rocket

Als nächstes müssen Sie nach unten zum Abschnitt CSS-Dateien scrollen und dann das Kontrollkästchen neben der Option „Unbenutztes CSS entfernen (Beta)“ aktivieren.

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

Klicken Sie auf die Option Unbenutztes CSS entfernen

Sobald die Option „Unbenutztes CSS entfernen“ aktiviert ist, können Sie im Feld „CSS-Sicherheitsliste“ CSS-Dateinamen, IDs oder Klassen angeben, die nicht entfernt werden sollen.

Dateien zur CSS-Safelist hinzufügen

Sie müssen dann Ihre Änderungen speichern, indem Sie nach unten scrollen 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.

Siehe unbenutzten CSS-Fortschrittsbalken entfernen

Das Plug-in benötigt einige Minuten, um unbenutzte CSS-Dateien zu verarbeiten und von Ihrer Website zu entfernen.

Sie sehen eine Meldung „Entfernung von nicht verwendetem CSS abgeschlossen!“. Nachricht, wenn das Plugin den Vorgang abgeschlossen hat.

Unbenutzte vollständige CSS-Benachrichtigung entfernen

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

Renderblockierendes CSS für WordPress entfernen

Mit WP Rocket können Sie Ihre CSS-Datei optimieren und CSS entfernen, das die Darstellung Ihrer Website blockiert.

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

Optimieren Sie die CSS-Bereitstellung

Diese Option generiert eine CSS-Datei, die nur den CSS-Code enthält, der zum Anzeigen des sichtbaren Teils Ihrer Website erforderlich ist. Es lädt diese Datei zuerst, zeigt die Seite Ihren Besuchern an und lädt dann andere CSS-Dateien mit einer Technologie namens Lazy Loading.

Durch das Entfernen dieses CSS, das das Rendering blockiert, können Benutzer Ihre Website viel schneller sehen, 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 erforderliche CSS-Datei für alle Ihre Posts und Seiten generiert hat. Es wird auch automatisch Ihren Website-Cache löschen.

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

Zusätzliche Optimierungen bei der Dateiübermittlung zur Verbesserung der Leistung

Mit WP Rocket können Sie auch Abfragezeichenfolgen aus statischen Dateien entfernen, Dateien aus Google-Schriftarten zusammenführen und HTML minimieren. All diese Optimierungen verbessern Ihre Gesamtgeschwindigkeit geringfügig und summieren sich zu einem schnelleren Ladeerlebnis für Ihre Besucher.

Grundlegende Dateioptimierung

Sie sehen auch Optionen zum Minimieren und Zusammenführen von CSS-Dateien. Diese Optionen reduzieren HTTP-Anfragen und geben Ihnen einen zusätzlichen Geschwindigkeitsschub.

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

CSS-Dateien verkleinern und zusammenführen

Sie können die gleiche Optimierung auch für JavaScript-Dateien auf Ihrer Website anwenden. Sie können sie verkleinern und kombinieren, damit sie als einzelne Datei funktionieren, und das Laden von JavaScript-Dateien verschieben, um die Leistung zu verbessern.

Optimieren Sie die JavaScript-Bereitstellung

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

Methode 2. Entfernen Sie unbenutztes CSS in WordPress mit Asset CleanUp

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

Es ist jedoch etwas knifflig 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 Asset Cleanup-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die besuchen Asset-Bereinigung » Einstellungen Seite und wechseln Sie auf die Registerkarte Testmodus. Von hier aus müssen Sie die Option „Testmodus aktivieren“ aktivieren.

Option Testmodus aktivieren

Auf diese Weise können Sie verschiedene Einstellungen testen und als Administrator testen, ohne die Website-Besucher zu beeinträchtigen.

Danach müssen Sie die besuchen Asset-Bereinigung » CSS/JS-Manager Seite. Von hier aus können Sie Seite für Seite unerwünschte CSS- und JavaScript-Dateien herunterladen.

CSS/JS-Manager

Es ruft zuerst Ihre Homepage ab und zeigt Ihnen alle CSS- und JavaScript-Dateien, die auf dieser Seite geladen sind.

Sie sollten nach unten scrollen und die hochgeladenen 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 die gesamte Website herunterladen.

Dateien herunterladen

Das Plugin ermöglicht es Ihnen auch, von hier aus 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 Post-Bearbeitungsbildschirm finden Sie das Feld Asset Cleanup direkt unter dem Post-Editor.

Asset-Bereinigung im Post-Editor

Das Plugin findet und listet automatisch alle hochgeladenen Dateien und Assets auf, wenn ein Besucher diese Seite auf Ihrer Website anzeigt. Sie können dann einfach alle unbenutzten CSS- oder JavaScript-Dateien herunterladen, die Sie auf dieser Seite nicht benötigen.

Laden Sie Dateien für eine bestimmte Seite herunter

Wichtig: Vergessen Sie nicht, Ihre Website zu testen, nachdem Sie ungenutztes CSS oder JavaScript entfernt haben, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Sobald Sie das Herunterladen und Entfernen nicht verwendeter CSS- und JavaScript-Dateien abgeschlossen haben, können Sie zur Seite mit den Plugin-Einstellungen 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 Ihre Website jetzt mit Google Pagespeed Insights testen, um die Änderung im unbenutzten CSS-Hinweis zu sehen.

Minimiertes CSS in WordPress

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ungenutztes CSS in WordPress einfach entfernen können. Vielleicht möchten Sie auch unserem vollständigen Leitfaden folgen, wie viel es kostet, eine Website zu erstellen, und sich unsere Liste der am besten verwalteten WordPress-Hostings ansehen.

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

Verwandt

Back to top button