So entfernen Sie unbenutztes CSS und JS in WordPress (sehr einfach)

Wenn Sie viel ungenutztes CSS und JS auf Ihrer Website haben, kann dies die Ladezeit Ihrer Website beeinträchtigen. Wenn Sie Ihre Website über ein Geschwindigkeitstest-Tool wie Google PageSpeed ​​Insight ausführen, erhalten Sie möglicherweise eine Warnung, nicht verwendetes CSS zu entfernen.

Glücklicherweise gibt es eine sehr einfache Möglichkeit, dies zu tun. Sie benötigen keine besonderen technischen Kenntnisse, um unbenutztes CSS und JS von Ihrer WordPress-Seite entfernen zu können.

Dies liegt an einem erstaunlichen Plugin namens Asset CleanUp: Page Speed ​​Booster. Mit diesem Plugin ist das Entfernen von nicht verwendetem CSS so einfach wie das Klicken auf ein paar Schaltflächen. Alternativ, wenn es Ihnen nichts ausmacht, ein paar Dollar pro Jahr auszugeben, gibt es bei WP Rocket eine Schaltfläche zum Entfernen unbenutzter CSS, aktivieren Sie sie einfach und das Plugin entfernt automatisch alle unbenutzten CSS.

Checkout: Top 7 Managed Google Cloud WordPress-Hosting

Was ist ungenutztes CSS?

Unbenutztes CSS ist eine CSS-Datei, die auf einer Seite vorhanden ist, aber meistens nicht zum Laden der Seite benötigt wird. Wenn ein Besucher eine Website öffnet, muss der Browser normalerweise alle externen Stylesheets auf der besuchten Seite herunterladen, analysieren und verarbeiten, bevor er dem Besucher den Seiteninhalt anzeigen kann. Wenn auf einer solchen Seite CSS vorhanden ist, das auf der Seite nicht verwendet wird, verschwendet der Browser seine Zeit damit.

Ein klassisches Beispiel hierfür sind die meisten verwendeten Kontaktformular-Plugins. Obwohl diese Plugins meistens nur auf der Kontaktseite verwendet werden, laden sie ihr CSS auf der gesamten Website. Es spielt keine Rolle, ob es sich um die Homepage handelt, auf der es nicht verwendet wird, das CSS wird geladen.

Wenn es zu viele CSS gibt, die nicht benötigt werden, aber laden und die Zeit des Browsers zum Lesen und Anzeigen einer Seite verlangsamen, kann dies zu einem Problem werden.

Abgesehen von Plugins schreiben Theme-Entwickler viele Dinge in die style.css, die meistens nicht benötigt werden. Aber ob benötigt oder nicht, sie werden immer dann geladen, wenn Ihre Website geladen wird!

Ein ungenutztes CSS ist vielleicht kein Problem, aber viele ungenutzte CSS können die Ladezeit Ihrer Website beeinträchtigen.

Checkout: Top 10 der schnellsten und besten WordPress-Themes

So identifizieren Sie unbenutztes CSS

Unbenutztes CSS und JS zu finden ist sehr einfach. Es gibt zwei Ansätze, die ich empfehlen werde.

Eine besteht darin, Ihre Website mit Google PageSpeed ​​Insight zu analysieren. Überprüfen Sie, ob auf Ihrer Website ein Problem mit dem Entfernen nicht verwendeter CSS vorliegt. Klicken Sie darauf und Sie können die dafür verantwortliche Komponente Ihrer Website identifizieren.

Sie können von oben sehen, dass ein Fall von nicht verwendetem CSS aufgezeichnet wurde. Ich kann das Plugin und den Speicherort des nicht verwendeten CSS sehen, indem ich mir das ansehe.

Die zweite Möglichkeit besteht darin, eine detailliertere Analyse zu erhalten. Sie können dies mit den Chrome-Entwicklertools erreichen.

Öffnen Sie in Ihrem Chrome-Browser die Chrome-Entwicklertools und gehen Sie dann zur Abdeckung. Klicken Sie dann innerhalb des Abdeckungsbereichs auf die Schaltfläche „Neu laden“. Eine umfassende Anleitung dazu finden Sie im Google Developers Tool.

Die andere Möglichkeit besteht darin, Jitbit zu verwenden, um nach nicht verwendeten CSS-Selektoren zu suchen. Sie können PurifyCSS auch verwenden, um ungenutztes CSS zu finden

So entfernen Sie unbenutztes CSS

Befolgen Sie diese Schritte, um unbenutztes CSS aus WordPress zu entfernen:

1. Installieren Sie Asset CleanUp

Gehen Sie zu Plugin und dann Neu hinzufügen. Dann geben Sie „Asset CleanUp“ in das Suchfeld der Seite Neues Plugin hinzufügen ein. Installieren und aktivieren Sie das Plugin.

2. Gehen Sie zu den Plugin-Einstellungen

Um auf die Plugin-Einstellungen zuzugreifen, klicken Sie im WordPress-Dashboard auf Einstellungen und dann auf Asset CleanUp.

3. Entladen Sie unerwünschtes CSS und JS

In den Plug-in-Einstellungen müssen Sie möglicherweise akzeptieren, dass Sie wissen, wie das Plug-in unter dem Hahn zum Entfernen von Fett funktioniert, bevor Sie beginnen.

Um CSS und JS zu entladen, klicken Sie auf CSS and JSS manager. Von dort aus können Sie nicht benötigtes CSS und JS entfernen. Sie können es nur für die Homepage, für die gesamte Website oder für eine bestimmte URL entfernen. Sie können Beiträge, Seiten oder Kategorien auch entfernen.

Ein Beispiel ist das Entladen eines Kontaktformulars für die gesamte Website mit Ausnahme der Kontaktseite

Nehmen Sie sich Zeit und entladen Sie jedes CSS und JS, von dem Sie wissen, dass es nicht benötigt wird. Stellen Sie sicher, dass Sie Ihre Website testen, nachdem Sie fertig sind, um sicherzustellen, dass alles in Ordnung ist.

Entfernen Sie unbenutzte CSS-WordPress-Plugins

Hier sind einige Plugins, die Sie verwenden können, um ungenutztes CSS in WordPress zu entfernen:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Page Speed ​​Booster macht es selbst Anfängern leicht, unbenutztes CSS und JS in WordPress zu entfernen. Sie müssen lediglich ein bestimmtes CSS deaktivieren, das für eine bestimmte Seite nicht benötigt wird.

Sie können auch nur für einzelne Beiträge deaktivieren. Mit der Premium-Version können Sie ungenutztes CSS/JS durch Plugins deaktivieren.

Dieses Plugin ist ein komplettes Performance-Plugin mit vielen anderen Optionen, um WordPress zu beschleunigen. Das Entfernen von nicht verwendetem CSS/JS ist nur ein Teil davon.

In diesem Beitrag habe ich dieses Plugin verwendet hat eine Anleitung.

2. WP-Rakete

WP Rocket ist das WordPress-Premium-Performance-Plugin Nummer eins. Wenn Sie ein Noob sind, ich meine, wenn Sie mit WordPress nicht vertraut oder vertraut sind, dann ist WP Rocket der einfachste Weg, ungenutztes CSS zu entfernen.

Sie müssen das Plugin kaufen, sobald Sie dies getan haben, können Sie es von Ihrem Konto herunterladen oder in Ihrer E-Mail nach einem Download-Link suchen.

Installieren Sie das Plugin über Dashboard > Plugins > Neu hinzufügen > Hochladen.

Navigieren Sie einfach zu den WP Rocket-Einstellungen und klicken Sie dann auf die Registerkarte „Dateioptimierung“. Scrollen Sie dann nach unten und Sie sehen „Unbenutztes CSS entfernen“, aktivieren Sie das Kontrollkästchen, speichern und leeren Sie den Cache.

3. Leistungsangelegenheiten

Perfmatters ist ein Premium-Plugin, das von Brian Jackson und seinem Bruder Brett Jackson entwickelt wurde. Dieses Plugin kann helfen, unbenutztes CSS sehr einfach zu entfernen.

Zuerst müssen Sie das Plugin kaufen. Dann installieren Sie es. Lizenz aktivieren. Wenn Sie zu den Einstellungen navigieren, aktivieren Sie den Skript-Manager.

Gehen Sie einfach zu einer beliebigen Seite oder einem Post auf Ihrer Website, Sie sehen das Skript-Manager-Symbol im Dashboard-Menü, klicken Sie darauf. Sie können unbenutztes CSS und JS von der Seite oder global entfernen.

Dieses Plugin ist ein Performance-Plugin, das viele andere Optionen enthält, um WordPress zu beschleunigen. Das Entfernen von nicht verwendetem CSS/JS ist ein Teil davon.

4. CSS JS-Manager

CSS JS Manager kann CSS oder JS speziell von Mobile oder Desktop entfernen. Je nachdem, was Sie erreichen wollen.

Dieses Plugin kann auch das Laden von CSS- oder JS-Dateien verzögern.

Fazit

Wenn Sie viel ungenutztes CSS und JS haben, werden Sie eine große Verbesserung der Geschwindigkeits- und Leistungswerte feststellen.

Es kann unmöglich sein, alle nicht verwendeten CSS zu entfernen, aber Sie können sie auf ein Minimum reduzieren. Ich verwende Asset CleanUp, um unbenutztes CSS für TargetTrend zu entfernen.

Denken Sie daran, optimieren Sie, aber seien Sie nicht zu besessen davon, es sei denn, Sie möchten, dass Ihre Website wie die schnellste Website der Welt aussieht.

Lesen Sie auch:

So beseitigen Sie Ressourcen, die das Rendern blockieren, in WordPress

Wie man WordPress sehr schnell macht

Wie Sie Traffic auf Ihr Blog lenken