So entfernen Sie ungenutztes CSS und JS in WordPress (sehr einfach)
Viele ungenutzte CSS können Ihre Website verlangsamen. Wenn Sie Ihre Website mit Google PageSpeed Insight testen, erhalten Sie möglicherweise eine Warnung, nicht verwendete CSS zu entfernen. Es gibt eine einfache Möglichkeit, dies ohne Codierung und Technik zu tun.
Viele ungenutzte CSS und JS auf Ihrer Website können die Ladezeit Ihrer Website beeinträchtigen. Wenn Sie Ihre Website über a . betreiben Geschwindigkeitstest-Tools sowie Google PageSpeed Insight, erhalten Sie möglicherweise eine Warnung zum Entfernen von nicht verwendetem CSS.
Zum Glück gibt es eine sehr einfache Möglichkeit, dies zu tun. Sie benötigen keine besonderen technischen Kenntnisse, um ungenutztes CSS und JS von Ihrer WordPress-Site entfernen zu können.
Das liegt an einem Erstaunlichen Plugin bekannt Asset CleanUp: Page Speed Booster. Mit diesem Plugin ist das Entfernen von ungenutztem CSS so einfach wie das Klicken auf ein paar Schaltflächen. Alternativ, wenn es Ihnen nichts ausmacht, ein paar Dollar pro Jahr auszugeben, mit WP Rocket, es gibt einen entfernten ungenutzten CSS-Button, aktiviere ihn einfach und das Plugin entfernt automatisch alle ungenutzten CSS.
Kasse: Top 7 verwaltetes Google Cloud WordPress Hosting
Was ist ungenutztes CSS?
Ungenutztes 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 der 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 zu viele CSS nicht benötigt werden, aber geladen werden und die Zeit des Browsers zum Lesen und Anzeigen einer Seite verlangsamt, kann dies zu einem Problem werden.
Abgesehen von Plugins schreiben Theme-Entwickler viele Dinge in die style.css, die meist nicht benötigt werden. Aber ob nötig oder nicht, sie werden immer geladen, wenn Ihre Site geladen wird!
Ein ungenutztes CSS ist vielleicht kein Problem, aber viele ungenutzte CSS können die Ladezeit Ihrer Website beeinträchtigen.
Kasse: Top 10 der schnellsten und besten WordPress-Themes
So identifizieren Sie ungenutztes CSS
Ungenutztes CSS und JS zu finden ist sehr einfach. Es gibt zwei Ansätze, die ich empfehlen werde.
Eine besteht darin, Ihre Website über 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 anschaue.
Die zweite Möglichkeit besteht darin, eine detailliertere Analyse zu erhalten. Sie können dies erreichen, indem Sie Chrome Dev-Tools verwenden.
Öffnen Sie in Ihrem Chrome-Browser die Chrome-Entwicklungstools und gehen Sie dann zur Abdeckung. Klicken Sie dann innerhalb des Abdeckungsbereichs auf die Schaltfläche zum Nachladen. Sie finden a umfassende Anleitung dazu im Google Developers Tool.
Die andere Möglichkeit ist zu verwenden Jitbit, um nach ungenutzten CSS-Selektoren zu suchen. Sie können auch verwenden PurifyCSS um ungenutztes CSS zu finden
So entfernen Sie ungenutztes CSS
Befolgen Sie diese Schritte, um ungenutztes 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 Plugin-Einstellungen müssen Sie möglicherweise akzeptieren, dass Sie wissen, wie das Plugin unter dem Stripping-Fat-Tap funktioniert, bevor Sie beginnen.
Um CSS und JS zu entladen, klicken Sie auf CSS- und JSS-Manager. Von dort aus können Sie CSS und JS entfernen, die Sie nicht benötigen. Sie können es nur für die Startseite, für die gesamte Website oder für eine bestimmte URL entfernen. Sie können auch für Beiträge, Seiten oder Kategorien entfernen.
Ein Beispiel ist das Entladen eines Kontaktformulars vom Laden 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 nicht verwendete CSS-WordPress-Plugins
Hier sind einige Plugins, mit denen Sie ungenutztes CSS in WordpPress entfernen können:
1. Asset CleanUp: Page Speed Booster
Asset CleanUp: Page Speed Booster macht es auch Anfängern leicht, ungenutztes CSS und JSin 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 für einzelne Beiträge allein 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 führende WordPress-Premium-Performance-Plugin. Wenn Sie ein Neuling sind, ich meine, wenn Sie mit WordPress nicht vertraut oder nicht vertraut sind, dann ist WP Rocket der einfachste Weg, um ungenutztes CSS zu entfernen.
Sie müssen das Plugin kaufen. Sobald Sie das getan haben, können Sie es von Ihrem Konto herunterladen oder Ihr Konto überprüfen E-Mail für einen Download-Link.
Installieren Sie das Plugin über Dashboard>Plugins>Neu hinzufügen>Hochladen.
Navigieren Sie einfach zu den WP Rocket-Einstellungen und klicken Sie auf die Registerkarte „Dateioptimierung“. Scrollen Sie dann nach unten und Sie sehen „Nicht verwendetes CSS entfernen“. Aktivieren Sie das Kontrollkästchen, speichern Sie und leeren Sie den Cache.
3. Perfmatters
Perfmatters ist ein Premium-Plugin, das von Brian Jackson und seinem Bruder Brett Jackson entwickelt wurde. Dieses Plugin kann dabei helfen, ungenutztes CSS ganz 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 Beitrag auf Ihrer Website. Sie sehen das Skriptmanager-Symbol im Dashboard-Menü, klicken Sie darauf. Sie können ungenutztes CSS und JS von der Seite oder global entfernen.
Dieses Plugin ist ein Performance-Plugin, das viele andere Optionen bietet, um WordPress zu beschleunigen. Das Entfernen von ungenutztem 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 möchten.
Dieses Plugin kann auch das Laden von CSS- oder JS-Dateien aufschieben.
Schlussfolgerung
Wenn Sie viel ungenutztes CSS und JS haben, werden Sie eine große Verbesserung der Geschwindigkeits- und Leistungswerte feststellen.
Es ist möglicherweise unmöglich, alle nicht verwendeten CSS zu entfernen, aber Sie können sie auf ein Minimum reduzieren. Ich verwende Asset CleanUp, um ungenutztes CSS zu entfernen für ZielTrend.
Denken Sie daran, optimieren Sie, aber seien Sie nicht zu besessen davon, es sei denn, Sie möchten, dass Ihre Website so aussieht die schnellste Website der Welt.
Lies auch:
So beseitigen Sie Render-Blocking-Ressourcen in WordPress
Ähnliche Artikel
