So entfernen Sie Unused CSS & JS in WordPress (Step-by-Step Guide)

So entfernen Sie Unused CSS & JS in WordPress (Step-by-Step Guide)

Ungenutzte CSS und JavaScript (JS) Dateien sind eine Hauptursache für langsame WordPress-Seiten – sie laden unnötigen Code auf jeder Seite, erhöhen Dateigrößen, verzögertes Rendern und verletzen Core Web Vitals wie Größte Contentful Paint (LCP). Mit Googles Algorithmen penalizing bloated Websites und betont mobile Geschwindigkeit, entfernt ungenutzte CSS/JS ist für wettbewerbsfähige SEO-Rankings und niedrige Bounce-Raten unerlässlich. Dies kann die Seitengröße um 20–50% reduzieren und die Ladezeiten deutlich verbessern.

Bei Cope Business entfernen wir ungenutzte CSS/JS als Kernteil unseres technische SEO Audits und WordPress Geschwindigkeitsoptimierung Dienstleistungen, hilft kunden, sub-2-sekunden-last und bessere suchsicht zu erreichen.

Diese Schritt-für-Schritt-Anleitung erklärt, warum ungenutzte CSS/JS-Fragen und drei effektive Methoden, um sie in WordPress zu entfernen — mit Plugins (empfohlen), Code (leichtgewichtig) und manuelle Tweaks (genau). Testen Sie immer zuerst auf Staging!

Was ist ungenutzt CSS & JS und warum entfernen Sie es?

Unused CSS/JS bezieht sich auf auf auf einer Seite geladene Styles/scripts, aber nicht tatsächlich verwendet (z.B. die vollen CSS-Ladungen eines Plugins auf jeder Seite, auch wenn nur auf einer benötigt). Dadurch werden Render-Blocking-Ressourcen erzeugt, die verzögert werden, wenn Nutzer Inhalte sehen.

Warum entfernen?

  • Schnellere Belastung: Reduziert HTTP-Anfragen & Dateigrößen
  • Besseres SEO: Verbessert LCP/CLS (Core Web Vitals) — direkter Rankingfaktor
  • Niedrige Bounce Tarife: Benutzer bleiben, wenn Inhalte sofort geladen werden
  • Mobile Optimierung: Kritisch für langsame Verbindungen
  • Ressourceneinsparungen: Weniger Bandbreite/CPU auf Ihrem Server

Tools wie GTmetrix/PageSpeed Insights-Flag „Entfernen Sie unbenutzte CSS/JS“ – fixieren es steigert die Punkte von 70 bis 90+.

Schritt für Schritt: So entfernen Sie Unused CSS & JS in WordPress

was ist ungenutzt css und js und warum entfernen sie es

Methode 1: Verwendung eines Performance-Plugins (leicht & Empfohlen)

Plugins automatisieren die Erkennung und Entfernung des ungenutzten Codes pro Seite.

Empfohlenes Plugin: WP Rocket (Premium – Unsere Top Pick)

schritt für schritt, wie ungenutzte css und js in wordpress entfernen

WP Rocket ist das beste für die automatische ungenutzte CSS/JS Entfernung.

Schritte

optimierung plugin
  • Installieren WP Rocket (~$59/Jahr) — Hochladen über Plugins > Neu hinzufügen (nicht im Repository).
  • Aktivieren → Gehen Sie zu WP Rocket > Einstellungen > Dateioptimierung.
enabe css optimierung
  • Ermöglichen Entfernen Sie Unused CSS — WP Rocket scannt Seiten, erzeugt gebrauchte CSS und entfernt den Rest.
  • Für JS: Enable JavaScript-Ausführung speichern (entzieht unkritischen JS).
defer javascript dateien
  • Speichern → Löschen Sie Cache → Testen Sie mit GTmetrix (für reduzierte CSS/JS-Größe & besser LCP).
erneut testen und besser testen
  • Fortgeschritten: Entschließen Sie bestimmte Dateien, wenn Probleme (z.B. kritisches Plugin JS).

Alternative frei: Autoptimieren (kostenlos) + Kritische CSS add-on — Aktivieren “Inline und Defer CSS” + “Aggregate JS-Dateien”.

Pros: Automatische, per-seitige Optimierung, keine manuelle Arbeit.
Negativ: Premium (aber es lohnt sich für ernsthafte Websites).

Methode 2: Verwendung von Code Snippets (Leichtgewicht – Manuelle Steuerung)

Für gezielte Entfernung ohne Plugins.

Schritte

  • Installieren WPCode (kostenlos) von Plugins > Neues hinzufügen — sicherster code.
  • Gehen Sie Code Snipps > Hinzufügen von Snippet → Erstelle neue Titel “Remove Unused CSS/JS”.
  • Fügen Sie diesen Code für CSS-Entfernung ein (verwendet PurgeCSS-Logik — Installieren Sie PurgeCSS über Composer oder manuell, wenn fortgeschritten):
PHP// Defer non-critical CSS function cope_defer_non_critical_css() { ?> <script> function deferCss() { var links = document.querySelectorAll('link[rel="stylesheet"]'); links.forEach(link => { if (link.getAttribute('data-defer') === 'defer') { link.rel = 'preload'; link.as = 'style'; link.onload = function() { this.rel = 'stylesheet'; }; } }); } window.addEventListener('load', deferCss); </script> <?php } add_action('wp_head', 'cope_defer_non_critical_css', 999); // Add data-defer to non-critical stylesheets (manual – identify via GTmetrix) function cope_add_defer_to_css() { // Example: Defer specific CSS file wp_dequeue_style('non-critical-style-handle'); // Replace handle wp_enqueue_style('non-critical-style-handle', get_stylesheet_directory_uri() . '/non-critical.css', array(), '1.0', 'all'); // Re-enqueue with media='print' or defer } add_action('wp_enqueue_scripts', 'cope_add_defer_to_css', 999);
  • Für JS: Verwenden Sie async oder defer Attribute in Sequenzfunktionen.
  • Speichern & Aktivieren → Testen mit GTmetrix.

Pros: Kostenlos, präzise, keine zusätzlichen Plugins.
Negativ: Manuelle Identifizierung; erfordert Tests.

Methode 3: Manuelle Entfernung mit Tools (Advanced – Precise)

Für eine einmalige oder tiefe Optimierung.

Schritte

  • Verwenden Sie GTmetrix oder Chrome DevTools (F12 → Coverage), um ungenutzte CSS/JS zu identifizieren.
  • Extrahieren Sie den verwendeten Code mit Tools wie UnusedCSS.com oder PurifyCSS.
  • Inline-kritische CSS (oben-fach) in <head> über WPCode:
PHPfunction cope_inline_critical_css() { echo '<style> /* Paste critical CSS here */ </style>'; } add_action('wp_head', 'cope_inline_critical_css', 1);
  • Defer unkritisch: Fügen Sie Async oder deferieren Sie zu Skript-Tags über Code.
  • Test & iterate.

Pros: Maximale Optimierung.
Negativ: Zeitraubend; nicht dynamisch.

Best Practices zum Entfernen von ungenutztem CSS/JS

  • Prüfung LCP/CLS: Verwenden Sie PageSpeed Insights vor/nach — Ziel <2.5s LCP.
  • Mobile-First: Optimieren Sie für mobile Ansichten (meist Traffic).
  • Vermeiden Sie Over-Removal: Ausschließen kritische Plugins (z.B. WooCommerce-Checkout JS).
  • Kombinieren Sie mit anderen Optimierungen: Minify, preload (siehe unsere führung), CDN.
  • SEO: Schnellere Seite = bessere Rankings; Monitor mit Search Console.
  • Fehlerbehebung: Wenn brechen, Dateien in Plugin-Einstellungen ausschließen.

Removing unused code can shrink page size by 30–70% — massive for speed.

Letzte Gedanken

Ungenutzte CSS & JS in WordPress zu entfernen ist eine High-ROI-Optimierung, die Geschwindigkeit und SEO direkt verbessert. Verwendung WP Rocket für automatische ergebnisse oder code zur kontrolle — starten sie mit einer website-audit, um blähungen zu identifizieren.

Geschwindigkeit gewinnt — optimieren oder verlieren Rankings.

Hohe Seitengröße oder langsame Lasten? Brauchen Sie ein komplettes Optimierungsaudit? Kontakt Cope Business für eine kostenlose technische SEO Beratung – wir scannen Ihre Website, entfernen Sie bloat und liefern Optimierungen für Spitzenleistung.

War dieser Artikel hilfreich?
JaNein