TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

544

Leichte Themes wie Astra, GeneratePress und Genesis laden sehr weniger CSS und Skripte auf der Website. Dies hilft, die ungenutzten CSS- und JavaScript-Fehler im Google PageSpeed ​​Insights-Tool zu entfernen und die Geschwindigkeitsbewertung in die Höhe zu treiben. 99% der kommerziellen WordPress-Themes kombinieren jedoch mehrere Funktionen und laden schwere Skripte und CSS. Egal, ob Sie ein leichtes oder schweres Thema verwenden, Sie benötigen immer noch viele Funktionen durch das Plugin. Durch die Kombination von Theme und Plugins wirkt sich die Gesamtgeschwindigkeitsbewertung auf jede einzelne Quelldatei auf der Website aus. In diesem Artikel erklären wir, wie Sie ungenutztes CSS und JavaScript in WordPress entfernen, um den Google PageSpeed ​​Insights-Score zu verbessern.

Verwandte: Lesen Sie mehr als 400 kostenlose WordPress-Tutorials.

Was ist ungenutztes CSS und JavaScript?

Lassen Sie uns dies an einem einfachen Beispiel erklären. Contact Form 7 ist eines der beliebtesten Plugins zum Hinzufügen von Kontaktformularen in WordPress-Sites. Im Allgemeinen benötigen Sie das Kontaktformular auf der Seite "Kontakt" und möglicherweise auf einigen anderen Seiten. Sie werden das Kontaktformular nicht in jedem Blog-Post verwenden. Das Plugin Contact Form 7 lädt jedoch CSS und JavaScript auf jeder Seite und jedem Blog-Post auf Ihrer Website Es ist ein großes Problem, wenn Sie 1000 Blog-Posts haben und alle ohne Notwendigkeit ein Kontaktformular-Skript / CSS laden.Diese unnötigen CSS und Skripte werden als nicht verwendetes CSS und nicht verwendetes Skript bezeichnet.

Ein weiteres gutes Beispiel ist ein WooCommerce-Shop. Sie benötigen WooCommerce-Stile und -Skripte nur auf Seiten wie Produkten, Produktarchiven, Warenkorb, Kasse und Shop. Das Plugin bietet jedoch keine Möglichkeit, das Laden von Dateien auf Blogbeiträgen oder Seiten zu verhindern.

Warum ist das ein Problem?

Leider laden fast alle Plugins Ressourcen auf allen Seiten Ihrer Website. Dies wirkt sich stark auf die Seitenladegeschwindigkeit aus und verringert die Geschwindigkeitsbewertung in Tools wie Google PageSpeed ​​Insights. Die folgenden Fehler werden Ihnen beim Testen der Seiten-URL in PageSpeed ​​Insights als Chancen angezeigt.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

PageSpeed-Fehler für ungenutztes CSS und JS

Obwohl das Tool sagt, dass dies keinen direkten Einfluss auf die Leistungsbewertung hat, hat es einen großen Einfluss auf die Ladezeit. Zu diesem Zeitpunkt gilt eine Punktzahl von 30 % für die Blockierungszeit, und wenn nicht verwendete CSS / JS- und Render-Blockierungsressourcen verwendet werden, wird die Punktzahl auf den Boden sinken. Darüber hinaus berechnen einige Hosting-Unternehmen basierend auf der Bandbreitennutzung Gebühren. Das Laden unnötiger CSS- / Skriptdateien auf Ihrer Website erhöht die Bandbreitennutzung um ein Vielfaches. Daher ist es notwendig, ungenutztes CSS und JavaScript zu identifizieren und vom Laden auf allen Seiten zu entfernen.

Wie erkennt man ungenutztes CSS und JavaScript?

Sie müssen verstehen, warum die ungenutzten Ressourcen auf Ihren Seiten geladen werden. Wie oben erläutert, müssen Sie nicht auf allen Seiten Kontaktformulare, Online-Shops oder Bewertungs-Plugins laden. Die gesamte Aufgabe ist jedoch komplizierter als Sie denken.

  • Löschen Sie zunächst das Caching und deaktivieren Sie das Caching-Plugin auf Ihrer Website. Gehen Sie nun zum Google PageSpeed ​​Insights-Tool und überprüfen Sie die Geschwindigkeitsbewertung.
  • Klicken Sie auf die Meldungen „Nicht verwendete JavaScripts entfernen” und „Nicht verwendete CSS entfernen”, um sie zu erweitern. Google zeigt Ihnen die Liste der Ressourcen mit der Transfergröße und den potenziellen Einsparungen an.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Nicht verwendete Ressourcen in PageSpeed ​​anzeigen

  • Externer Code – Wie Sie im obigen Screenshot sehen können, stammt „pagad2.googlesyndication.com” von Google AdSense. Sie können nicht verwendetes CSS und JavaScript, das von Websites von Drittanbietern geladen wurde, nicht entfernen. Diese Skripte werden auf Ihrer Website mit Werbe-, Analytics-, YouTube-Videoeinbettungs- oder Social-Sharing-Plugins geladen. Sie müssen also verstehen, dass sich diese externen Ressourcen auf die Seitengeschwindigkeit auswirken, und Sie haben keine Kontrolle darüber, es sei denn, Sie entscheiden sich, sie zu entfernen. Lesen Sie den Artikel über AdSense vs. Page Speed, um zu erfahren, dass Werbung Ihre Seitengeschwindigkeit beeinträchtigt.
  • Plugin- und Theme-Dateien – wie Sie diese entfernen, erklären wir im nächsten Abschnitt.
  • Inline-CSS und Skripte – Das Google PageSpeed ​​Insights-Tool zeigt sie im Allgemeinen nicht an. Sie müssen sie manuell identifizieren und von Ihrer Website entfernen. Wenn ein Plugin Inline-CSS/Skript einfügt, deaktivieren Sie die Plugin-Dateien oder vermeiden Sie das Hinzufügen von benutzerdefiniertem Inline-Code. Denken Sie daran, dass es ein großes Problem mit schweren Designs gibt, die style.css mit Tausenden von Zeilen verwenden. Sie müssen den Code in der Datei style.css manuell entfernen, um die Größe zu reduzieren.

Zusammenfassend lässt sich sagen, dass ungenutztes CSS und JavaScript einfach entfernt werden können, wenn sie als separate Dateien geladen werden. Das Laden einer riesigen style.css-Datei oder Inline-CSS kann nicht entfernt werden, es sei denn, Sie überprüfen sie manuell und löschen nicht verwendete Codes. Alternativ müssen Sie möglicherweise ein leichtes Theme oder Plugin finden, um das Problem zu beheben. Nachdem Sie die Fehlerursache gefunden haben, können Sie das Caching-Plugin wieder auf Ihrer Site aktivieren.

Wie entferne ich ungenutztes CSS und JavaScript?

Es gibt zwei Möglichkeiten, nicht verwendete CSS- und JS-Dateien zu entfernen, wenn die Seite im Browser geladen wird. Die erste Option besteht darin, Premium-Plugins wie WP Rocket zu verwenden, und die zweite Option ist die Verwendung eines kostenlosen Plugins. Wir erklären Ihnen beide Methoden im Detail, damit Sie die für Sie einfache Methode prüfen und auswählen können.

Entfernen Sie ungenutztes CSS mit WP Rocket

WP Rocket ist das beliebteste Caching-Plugin für WordPress, das eine supereinfache Benutzeroberfläche bietet. Um die Ladezeit der Seite zu verbessern, müssen Sie das Plugin kaufen und auf die neueste Version (über 3.9) aktualisieren.

  • Gehe in deinem WordPress-Admin-Panel zum Menü „Einstellungen > WP Rocket”.
  • Klicken Sie auf die Registerkarte "Dateioptimierung" und scrollen Sie nach unten zum Abschnitt "CSS-Dateien".
  • Aktivieren Sie die Option „Unused CSS (Beta)” und bestätigen Sie die Option „Activate Remove Unused CSS” in der Warnmeldung.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Entfernen Sie ungenutztes CSS in WP Rocket

  • Das Plugin beginnt mit der Verarbeitung des CSS auf Ihrer Website, was einige Minuten dauern kann.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Nicht verwendete CSS entfernen ist abgeschlossen

  • Nach Abschluss sehen Sie eine Erfolgsmeldung „Unbenutztes CSS entfernen ist abgeschlossen!”.
  • Sie können auch die Option "CSS-Bereitstellung optimieren" aktivieren, um kritische CSS zu generieren, um CSS-Probleme beim Rendern zu vermeiden.
  • Klicken Sie unten auf der Seite auf die Schaltfläche "Änderungen speichern", um die zwischengespeicherten Dateien neu zu generieren.

Entfernen Sie ungenutztes JavaScript mit WP Rocket

Im Gegensatz zu CSS ist das Entfernen von JS mit dem WP Rocket-Plugin nicht möglich. Sie können jedoch die Optionen „JavaScript verzögert laden” und „JavaScript-Ausführung verzögern” im Abschnitt „Dateioptimierung > JavaScript-Dateien” aktivieren. Dadurch werden sowohl interne als auch externe Codes verzögert und JavaScript-Probleme beim Rendern blockiert.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

JavaScript-Ausführung verzögern

Stellen Sie sicher, dass Ihre Website ordnungsgemäß funktioniert, nachdem Sie diese Optionen aktiviert haben.

Verwenden des Asset CleanUp-Plug-ins zum Entfernen von ungenutztem CSS und JavaScript

Wenn Sie viele Plugin- und Theme-Dateien geladen haben, befolgen Sie die folgenden Anweisungen, um sie auf den Seiten zu entfernen, auf denen Sie sie nicht benötigen.

  • Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie zum Abschnitt „Plugins > Neu hinzufügen”.
  • Geben Sie „Asset Cleanup” in das Suchfeld ein und suchen Sie das Plugin „Asset CleanUp: Page Speed ​​Booster”.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Plugin installieren und aktivieren

  • Klicken Sie auf die Schaltfläche „Jetzt installieren” und aktivieren Sie dann das Plugin.
  • Nach der Aktivierung des Plugins empfehlen wir Ihnen, die angezeigte Dokumentation zu lesen. Dies ist notwendig, um das Plugin richtig zu verwenden.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Lesen Sie die Anleitungen für die ersten Schritte

Plugin-Einstellungen

Das Plugin verfügt über zahlreiche Einstellungen, die wir in diesem Artikel nicht erläutern werden. Wenn Sie ein Caching-Plugin wie WP Rocket auf Ihrer Website verwenden, stellen Sie sicher, dass Sie keine anderen Funktionen verwenden, als nicht verwendete Skripte und CSS zu deaktivieren. Gehen Sie zum Menü „Asset CleanUp > Einstellungen” und dann zur Registerkarte „Plug-in-Nutzungseinstellungen”. Hier können Sie entscheiden, wie Sie die ungenutzten CSS / Skripte auf Ihren Seiten anzeigen und deaktivieren möchten.

  • Im Dashboard verwalten – aktivieren Sie diese Option. Dies hilft Ihnen, die Seite aus dem Post-Editor im Admin-Dashboard zu analysieren.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Im Dashboard verwalten aktivieren

  • Im Frontend verwalten – Wenn Sie die Seite im Frontend-Browser analysieren möchten, aktivieren Sie diese Option. Andernfalls können Sie dies deaktivieren. Denken Sie daran, dass die Frontend-Analyse nur vom angemeldeten Admin-Benutzer durchgeführt werden kann. Benutzer, die Ihre Website besuchen, werden von Ihrer Überprüfung nicht betroffen.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Aktivieren oder deaktivieren Sie die Verwaltung im Frontend

  • Assets List Layout – Klicken Sie auf das Dropdown-Menü und wählen Sie „Alle Stile und Skripte > Nach Standort gruppiert (Themen, Plugins, Kern und extern). Dies wird Ihnen helfen, die Ressourcendateien in verschiedenen Kategorien gruppiert anzuzeigen.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Ansichtslayout festlegen

  • WordPress Core-Datei aus der Assets-Liste ausblenden? – Aktivieren Sie diese Option, damit Sie sich nicht mit den Kern-WordPress-Dateien herumschlagen.

Gehen Sie nun zur Registerkarte "Testmodus" und aktivieren Sie die Option "Testmodus aktivieren". Auf diese Weise können Sie überprüfen, ob die Site nach dem Deaktivieren der Skripts und des CSS beschädigt ist, bevor Sie sie veröffentlichen.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Testmodus aktivieren

Klicken Sie unten auf "Alle Einstellungen aktualisieren", um Ihre Änderungen zu übernehmen.

Ungenutztes CSS und JavaScript entfernen

Je nach Einstellung können Sie die Seite entweder vom Editor oder vom Frontend aus analysieren.

  • Deaktivieren von Skripten und CSS im Editor – Bearbeiten Sie einen der vorhandenen Beiträge, um zum Beitragseditor zu gelangen. Scrollen Sie nach unten, um die Meta-Boxen des Asset CleanUp-Plugins anzuzeigen. Zeigen Sie alle auf dieser Seite geladenen CSS und Skripte an und deaktivieren Sie die Ressourcen, die Sie nicht benötigen.
  • Deaktivieren von Skripten und CSS vom Frontend – Wenn Sie die Option „Im Frontend verwalten” aktiviert haben, öffnen Sie einen Ihrer Beiträge im Browser-Frontend. Denken Sie daran, dass Sie in einem anderen Browser-Tab bei Ihrem WordPress-Admin-Panel angemeldet sein sollten. Unten auf der Seite sehen Sie ähnliche Metafelder, die die auf der Seite geladenen Ressourcen deaktivieren.

In beiden Fällen sehen Sie alle auf der Seite geladenen CSS- und JavaScript-Dateien gruppiert nach Ihren Einstellungen.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Geladene Ressourcen in Gruppe anzeigen

Erweitern Sie jede Gruppe und sehen Sie sich die Details der von Ihren Plugins und Designs geladenen Dateien an. Für jede CSS- und JS-Datei haben Sie mehrere Optionen, wie im folgenden Bild gezeigt.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Deaktivieren oder aktivieren Sie CSS und JS

  • Entladen Sie die Ressource auf der Seite.
  • Deaktivieren Sie die Datei auf der gesamten Website
  • Für alle Beiträge deaktivieren (es wird weiterhin auf Seiten und benutzerdefinierten Beitragstypen geladen ).
  • Einige andere Optionen wie die Verwendung von RegEx sind nur in der Pro-Version des Plugins verfügbar.

Nachdem Sie die Dateien deaktiviert haben, aktualisieren Sie Ihren Beitrag, damit die Änderungen auf der Website wirksam werden.

Anzeigen deaktivierter Dateien und Entfernen des Testmodus

  • Gehen Sie zum Abschnitt „Asset CleanUp > Bulk Changes”.
  • Navigieren Sie zur Registerkarte "Beiträge, Seiten und benutzerdefinierte Beitragstypen" und wählen Sie "Beitrag" aus der Dropdown-Liste aus.
  • Hier können Sie alle deaktivierten Dateien auf Ihrer Site anzeigen.
  • Aktivieren Sie das Kontrollkästchen "Massenregel entfernen" und klicken Sie unten auf die Schaltfläche "Änderungen übernehmen", um das Laden der Datei wieder zu aktivieren.
  • Alternativ können Sie beliebige Beiträge im Post-Editor bearbeiten und das Ladeverhalten der Dateien ändern.

Wie entferne ich ungenutztes CSS und JavaScript in WordPress?

Massendateien anzeigen und entfernen

Überprüfen Sie Ihre Website und wenn alles in Ordnung ist, gehen Sie zurück zur Einstellungsseite und deaktivieren Sie die Option "Testmodus". Dadurch werden die Änderungen für alle Benutzer sichtbar, die Ihre Website besuchen. Ebenso können Sie die CSS- und JS-Dateien auf benutzerdefinierten Beitragstypen, Seiten und Produktseiten deaktivieren, indem Sie sie bearbeiten. Überprüfen Sie Ihre Seiten mit dem Google PageSpeed ​​Insights-Tool, um zu sehen, ob die Fehler behoben sind.

Letzte Worte

Wir hoffen, dass der Artikel hilfreich ist, um nicht verwendete CSS- und JavaScript-Dateien von Ihrer Website zu entfernen und den Google PageSpeed-Score zu verbessern. Wir empfehlen die Verwendung von WP Rocket, da es einfach ist, CSS zu entfernen und externes JS mit wenigen Klicks zu verzögern. Wenn Sie das kostenlose Asset Cleanup-Plugin verwenden, hilft es Ihnen nur, das Laden von CSS- und JS-Dateien aus Plugins und Themes zu deaktivieren. Sie müssen die Verwendung von Codes von Drittanbietern vermeiden und unnötige Codes in der Hauptdatei style.css manuell entfernen. Stellen Sie beim manuellen Bearbeiten von Dateien sicher, dass Sie das Stylesheet mithilfe des untergeordneten Designs aktualisieren, damit die Änderungen bei der Aktualisierung des Designs nicht verloren gehen.

Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen