Reduziere nicht verwendete CSS in WordPress – Style.css verkleinern

In der nachfolgenden Anleitung erfährst du, wie Du die style.css von Deinem WordPress Theme auf das notwendigste reduzieren kannst. Dadurch kann sich Dein Pagespeed Scrore deutlich verbessern indem Du nicht verwendete CSS in WordPress entfernst.

style.css vom Theme herunterladen

Über das WordPress-Backend:
- Gehe zu WP-Admin → Design → Theme-Datei-Editor
- Wähle die Datei style.css
- Kopiere den gesamten Inhalt und speichere ihn lokal
Alternative Methode:
- Öffne deine Website im Browser
- Gehe zu DevTools → Sources → style.css
- Rechtsklick → „Save as…“

Website-Inhalte lokal speichern (HTML-Dateien)

Du brauchst HTML-Dateien, um später den CSS-Code zu bereinigen.

Option A: Manuelles Speichern

Öffne die wichtigsten Seiten deiner Website im Browser
Rechtsklick → „Seite speichern unter…“ → „komplette Webseite“
Empfohlen: Startseite, Blog, Kontakt, Produktseite etc.

Option B: Website mit Tool crawlen (empfohlen)

Nutze ein Tool wie HTTrack (kostenlos für Windows/macOS/Linux)
Lade deine gesamte Website lokal herunter

CSS bereinigen mit PurgeCSS

Setup

Installiere Node.js
Installiere PurgeCSS global:

npm install -g purgecss

Befehl im Terminal (Pfade anpassen):

purgecss \
  --css style.css \
  --content site/**/*.html \
  --output ./cleaned-css/ \
  --safelist "active" "open" /^is-/ /^wp-/

Erklärung der Optionen:

--css: Pfad zur zu bereinigenden CSS-Datei
--content: HTML-Dateien, die analysiert werden
--output: Zielordner für die bereinigte CSS-Datei
--safelist: Klassen, die nicht gelöscht werden sollen (z. B. dynamische Klassen)

Dateistruktur für PurgeCSS

C:\Meine Webseiten\
├── style.css              ← Original CSS-Datei
└── Testseite\             ← Alle HTML-Dateien
    ├── index.html
    ├── kontakt.html
    └── ...

Beispiel-Befehle in der Windows-Eingabeaufforderung:

cd "C:\Meine Webseiten"
mkdir cleaned-css
purgecss --css style.css --content Testseite/**/*.html --output cleaned-css --safelist "active" "open" /^is-/ /^wp-/

Erweiterter Befehl mit zusätzlichen Safelist-Klassen:

purgecss --css style.css --content Testseite/**/*.html --output cleaned-css \
--safelist "open" "active" "menu" "submenu" "dropdown" "current-menu-item" \
/^is-/ /^has-/ /^wp-/ /^nav-/ /^menu-/ /^dropdown-/

Neue CSS-Datei in WordPress einbinden

Überprüfung & Integration:

Öffne die bereinigte style.css im Editor (z. B. VS Code, Notepad++)
Teste sie vorab:
- Customizer → Zusätzliches CSS (wenn die Datei klein genug ist)
- Oder über ein Plugin wie „Simple Custom CSS & JS“
Lege die Datei cleaned-style.css in dein Child Theme

functions.php im Child Theme anpassen:

add_action( 'wp_enqueue_scripts', 'enqueue_child_cleaned_style' );
function enqueue_child_cleaned_style() {
    if ( is_rtl() ) {
        wp_enqueue_style( 'parent-rtl', get_template_directory_uri() . '/rtl.css', array(), RH_MAIN_THEME_VERSION );
    }
    wp_enqueue_style( 'child-cleaned-style', get_stylesheet_directory_uri() . '/cleaned-style.css' );
}

Zurück zur Original-Datei wechseln:

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-cleaned-style', get_stylesheet_directory_uri() . '/cleaned-style.css', array('parent-style') );

Fazit

Mit dieser Methode kannst du die Ladezeit deiner Website erheblich verbessern, indem du ungenutztes CSS entfernst – ganz ohne Serverzugriff. Wichtig ist, die neue CSS-Datei gründlich zu testen, um Layoutprobleme zu vermeiden.

WDesign ™