Sie kennen das Gefühl: Ihre WordPress-Seite ist fertig, gestylt, alle Plugins sind eingerichtet. Sie führen PageSpeed Insights aus, und da ist es, orange. Oder rot. Der Übeltäter ist fast immer derselbe: CSS. Dutzende Style-Dateien von Plugins und Theme reihen sich in einer Warteschlange ein und blockieren das Rendering. Die Seite ist nicht langsam, weil sie schwer ist, sondern weil der Browser wartet.

Das Problem reicht tiefer, als es scheint. Ein Plugin lädt seine style.css auf jeder Seite der Website, selbst dort, wo seine Funktionalität gar nicht genutzt wird. Ein Kontaktformular erscheint nur auf der Kontaktseite, doch seine Styles werden überall geladen. Ein Slider befindet sich auf der Startseite, aber seine vier CSS-Dateien hängen ausnahmslos an jeder URL. Das sind Dutzende unnötiger Kilobyte und Requests bei jedem Seitenaufruf.

Sie können überflüssige Styles ohne zusätzliche Plugins direkt über functions.php deaktivieren. Das ist kein Hack, sondern ein eingebauter WordPress-Mechanismus, der seit Version 2.6 funktioniert. Nachfolgend die vollständige Anleitung: vom Auffinden des Identifikators bis zum asynchronen Laden einer kombinierten Datei.

💡 Kurzüberblick:

• So finden Sie den Identifikator (Handle) jeder Plugin-CSS-Datei über das id-Attribut im Seitenquelltext
• So deaktivieren Sie Styles mit der Kombination wp_dequeue_style + wp_deregister_style und der korrekten Priorität
• So fassen Sie deaktivierte Styles in einer einzigen Datei zusammen und laden diese asynchron über media print, ohne Styling-Verlust und ohne Rendering-Blockade

So finden Sie den CSS-Datei-Identifikator eines Plugins

WordPress weist jeder eingereihten Style-Datei einen eindeutigen Identifikator zu, einen Handle. Diesen Handle benötigen die Funktionen wp_dequeue_style (Dokumentation) und wp_deregister_style (Codex). Ohne den korrekten Handle wird nichts deaktiviert.

Die zuverlässigste Methode ist ein Blick in den HTML-Quelltext der Seite. Raten anhand des Plugin-Namens funktioniert nicht; der Plugin-Entwickler vergibt den Handle nach eigenem Ermessen, und die Logik kann nicht offensichtlich sein.

Öffnen Sie den Seitenquelltext (Ctrl+U oder view-source: vor der URL) und suchen Sie den <link>-Tag, der das CSS des benötigten Plugins lädt. Für Elementor sieht das zum Beispiel so aus:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Achten Sie auf das id-Attribut. WordPress konstruiert es nach dem Muster: **Plugin-Handle + der Suffix **-css. Im obigen Beispiel id="elementor-animations-css", was bedeutet, dass der Handle elementor-animations lautet. Entfernen Sie -css vom Ende des id-Werts, und Sie erhalten den exakten Handle zum Deaktivieren. Das funktioniert für jedes Plugin oder Theme.

Es gibt Fälle, in denen der Entwickler überhaupt keine id am <link>-Tag vergibt. Suchen Sie in diesem Fall nach benachbarten Elementen mit einer id oder prüfen Sie die <script>-Tags desselben Plugins: Skripte verwenden den Suffix -js, und der Handle stimmt oft mit dem des Styles überein. Falls Sie ihn dennoch nicht finden, öffnen Sie den Quellcode des Plugins in /wp-content/plugins/... und suchen Sie den Aufruf von wp_enqueue_style(): Das erste Argument ist der Handle.

Styles deaktivieren: wp_dequeue_style und wp_deregister_style

WordPress stellt zwei Funktionen für die Verwaltung von Styles bereit. Der Unterschied ist grundlegend:

In der Praxis werden beide Funktionen zusammen verwendet: wp_dequeue_style entfernt ihn aus der Warteschlange, und wp_deregister_style im Codex stellt sicher, dass kein anderer Code diesen Handle über die Abhängigkeitskette erneut einreiht.

Grundlegender Code für functions.php

Der folgende Code deaktiviert Styles von zwei Plugins: full-screen-search und prettyPhoto. Die hohe Priorität 9999 stellt sicher, dass die Deaktivierung ausgeführt wird, NACHDEM das Plugin seine Styles registriert und eingereiht hat. Ohne die erhöhte Priorität könnte die Funktion vor dem Plugin ausgeführt werden, sodass nichts zum Deaktivieren vorhanden wäre.

1
/**
2
 * Disable CSS files of specific plugins.
3
 * Priority 9999 — runs last in the wp_enqueue_scripts chain.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Dequeue
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Deregister — so no one can re-enqueue
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

Entscheidend ist hier: Der Hook wp_enqueue_scripts ist die korrekte Stelle für diesen Vorgang. Nicht wp_head, nicht init, nicht wp_loaded. Auf wp_enqueue_scripts stellt WordPress die Style-Warteschlange zusammen, und genau dort sollten Sie die Styles deaktivieren, nur eben später als die Plugins.

Warum Priorität 9999, nicht 11 oder 99

Plugins registrieren Styles mit der Standardpriorität 10. Manche setzen jedoch 20, 50 oder sogar 100, wenn sie komplexe Abhängigkeitsketten haben. Eine Priorität von 9999 deckt praktisch jedes realistische Szenario ab. Der einzige Nachteil: Wenn zwei Ihrer eigenen Snippets dieselbe Priorität 9999 teilen, ist ihre Ausführungsreihenfolge undefiniert. In der Praxis kommt das selten vor, während 11 bei widerspenstigen Plugins regelmäßig versagt.

Zusätzlich können Sie die Deaktivierung als Sicherheitsnetz auf dem Hook wp_head mit derselben Priorität registrieren, für Styles, die ein Plugin unter Umgehung von wp_enqueue_scripts direkt in den <head> ausgibt:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Das ist jedoch ein Fallback. Normalerweise genügt ein einzelner wp_enqueue_scripts-Aufruf.

So deaktivieren Sie ALLE Styles eines bestimmten Plugins

Viele Plugins haben nicht nur eine CSS-Datei, sondern mehrere. Contact Form 7, WooCommerce, Elementor, jedes zieht 3 bis 5 Style-Dateien mit. Sie einzeln zu deaktivieren ist mühsam. Durchsuchen Sie den Seitenquelltext und sammeln Sie alle Handles mit demselben Präfix: Sie sind üblicherweise gruppiert.

Beispiel für Elementor, ein typischer Satz von Handles: elementor-frontend, elementor-animations, elementor-icons und elementor-pro. Alle vier in einem einzigen Aufruf:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

Was mit deaktivierten Styles zu tun ist

Deaktivieren ist nur die halbe Arbeit. Wenn Sie das CSS eines Plugins einfach entfernen, zerbricht alles auf der Seite: Formulare geraten aus der Ausrichtung, Slider fallen auseinander, Icons verschwinden. Die Styles werden benötigt, nur nicht um den Preis, das Rendering zu blockieren.

Der richtige Ansatz: Führen Sie die deaktivierten Styles in EINER kompakten Datei zusammen und laden Sie diese ohne Blockierung. Der Algorithmus:

• Deaktivierte Plugin-Styles per wp_dequeue_style + wp_deregister_style.
• Inhalte JEDER deaktivierten CSS-Datei kopiert. Nehmen Sie sie aus dem Plugin-Ordner, nicht aus dem Browser-Inspektor, der einen minifizierten Build anzeigt, mit dem sich schlecht arbeiten lässt.
• In einer einzigen Datei zusammengeführt, zum Beispiel /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Mit dem Attribut media="print" und onload="this.media='all'" geladen. Der Browser lädt die Datei asynchron, ohne das Rendering zu blockieren, und wendet die Styles nach dem Laden an.

Code zum Laden der kombinierten Datei

1
/**
2
 * Load the combined CSS file of disabled styles asynchronously.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

Die Priorität 1 ist hier beabsichtigt: Die kombinierte Datei muss in die Warteschlange gestellt werden, BEVOR die Deaktivierungsfunktionen mit Priorität 9999 ausgeführt werden. Andernfalls erkennt WordPress die Abhängigkeit möglicherweise nicht und entfernt die Styles vollständig aus der Warteschlange.

Asynchrones Laden ohne Plugin

Um zu verhindern, dass der Browser vor dem Rendern der Seite auf die CSS-Datei wartet, fügen Sie die Attribute media="print" und onload über den Filter style_loader_tag hinzu:

1
/**
2
 * Change media="print" to onload-switch for asynchronous CSS loading.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

Der Mechanismus ist einfach: Der Browser sieht media="print" und blockiert das Rendering nicht, da der Medientyp Druck den Bildschirm nicht betrifft. Nachdem die Datei geladen ist, feuert onload, schaltet media auf all um, und die Styles werden sofort angewendet. Der Nutzer sieht eine vollständig gestaltete Seite ohne Verzögerung beim initialen Laden.

Wann Sie Styles nicht über die functions.php deaktivieren sollten

Die Methode wp_dequeue_style ist leistungsfähig, aber nicht universell. Hier sind drei Fälle, in denen sie entweder nutzlos oder schädlich ist:

• Styles werden inline über wp_add_inline_style eingebunden. Solche Styles befinden sich innerhalb eines <style>-Tags und haben keinen eigenen Handle. Sie müssen sie über wp_deregister_script des übergeordneten Skripts deaktivieren oder den Hook finden, den das Plugin zum Hinzufügen von Inline-Styles verwendet.

• Das Plugin fügt CSS direkt per echo in den <head> ein. Dies ist ein Workaround, den einige ältere Plugins nutzen. Hier hilft nur das Auffinden des spezifischen Hooks oder, als letztes Mittel, Output Buffering.

• Sie arbeiten mit einem Drittanbieter-Theme, das Abhängigkeiten eigenständig verwaltet. Manche Themes, insbesondere Premium-Themes, nutzen einen eigenen Asset-Loader, der WP_Styles umgeht. Prüfen Sie vor dem Schreiben von Code die header.php des Themes: Wenn Sie dort ein direktes echo '<link...' sehen, funktioniert das Deregistrierungssystem nicht.

In diesen Fällen ist es besser, spezialisierte Plugins wie Asset CleanUp oder Perfmatters zu verwenden, die auf URL-Ebene arbeiten und Assets seitenweise deaktivieren, ohne dass Sie in Hooks eingreifen müssen.

Sehen Sie sich die Videoanleitung zum Deaktivieren von Styles an: der gesamte Prozess vom Auffinden des Handles bis zur Überprüfung des Ergebnisses in 8 Minuten.

⁉️🤔 Häufig gestellte Fragen

Muss ich CSS-Styles im Admin-Bereich (*/wp-admin/*) deaktivieren?

Nein. Styles, die über den Hook admin_enqueue_scripts geladen werden, wirken sich nicht auf das Frontend aus und müssen nicht deaktiviert werden. Darüber hinaus bewirkt der Versuch, Admin-Styles über wp_enqueue_scripts zu deregistrieren, nichts, da diese separat registriert werden. Wenn der Admin-Bereich langsam ist, liegt das Problem meist woanders: an schweren Analyse-Skripten im Dashboard, externen Google Fonts oder der Heartbeat-API.

Ist es sicher, das Suffix -css aus dem id-Attribut zu entfernen, um den Handle zu erhalten? Funktioniert diese Regel immer?

Ja, das Suffix -css wird vom WordPress-Core in der Methode WP_Dependencies::enqueue() seit Version 2.6 angehängt; dies ist ein unveränderlicher Mechanismus. Es gibt jedoch eine Nuance: Wenn der Plugin-Entwickler dem <link>-Tag manuell eine benutzerdefinierte id zugewiesen hat, ist das Suffix möglicherweise nicht vorhanden. In diesem Fall ist der Handle das zweite Argument des Aufrufs von wp_enqueue_style() im Quellcode des Plugins. Die -css-Regel deckt die allermeisten Fälle ab.

Kann ich Styles nur auf bestimmten Seiten deaktivieren?

Ja, und das ist der richtige Produktionsansatz. Umschließen Sie den wp_dequeue_style-Aufruf mit einem Conditional Tag von WordPress: is_front_page() für die Startseite, is_single() für Beiträge, is_page() für Seiten, is_archive() für Archive. Um nach Beitrags-ID auszuschließen, verwenden Sie ! is_single(123). Konditionales Dequeuing auf bestimmten URLs reduziert die Last auf der gesamten Site, nicht nur dort, wo das Plugin nicht benötigt wird.

Was passiert, wenn ich wp_dequeue_style für einen Handle aufrufe, der nicht registriert ist?

Nichts. Die Funktion wird stillschweigend abgeschlossen, ohne Fehler, PHP-Notices oder Warnungen. Das ist ungefährlich. Verlassen Sie sich aber nicht als Strategie darauf: Sammeln Sie Handles nur von echten Seiten, sonst sammelt Ihr Code „tote" Zeilen an, die nichts bewirken und functions.php nur aufblähen.

Wie überprüfe ich, ob ein Style tatsächlich deaktiviert wurde und nicht nur wegen des Caches nicht mehr angewendet wird?

Öffnen Sie den Seitenquelltext (Ctrl+U), nicht das Entwicklerpanel. Suchen Sie nach einem <link> mit dem Handle des Plugins oder dessen id. Wenn das Tag fehlt, ist der Style deaktiviert. Der Browser-Cache wirkt sich nicht auf den Quellcode aus, anders als der Netzwerk-Tab in den DevTools. Zusätzlich können Sie den WordPress-Cache leeren: ein beliebiges Caching-Plugin, dann „Purge All".

Kernpunkte zum Deaktivieren von CSS in WordPress

Drei Hauptschlussfolgerungen aus diesem gesamten Leitfaden:

• Der Handle ist der Schlüssel zu allem. Ohne die korrekte Kennung funktioniert keine Funktion. Finden Sie den Handle immer über das id-Attribut im Seitenquelltext. Die Regel, -css zu entfernen, funktioniert fast immer; prüfen Sie bei Ausnahmen den Quellcode des Plugins.

• Dequeue + Deregister ist die Standardkombination. Die erste Funktion entfernt den Style aus der Warteschlange, die zweite stellt sicher, dass er nicht über die Abhängigkeitskette wieder auftaucht. Die Priorität 9999 deckt alle „hartnäckigen" Plugins ab, und der Hook wp_enqueue_scripts ist der einzig richtige Ort für diesen Vorgang.

• Deaktivierte Styles sollten nicht verschwinden. Fassen Sie sie in einer einzigen Datei zusammen und laden Sie diese asynchron über media="print" + onload. Der Nutzer erhält eine vollständig gestylte Seite, und der Browser wartet nicht auf CSS, bevor er rendert.

Probieren Sie es heute bei ein oder zwei Plugins aus. Ein paar Minuten in der functions.php, und das Ergebnis ist sofort in PageSpeed Insights sichtbar. Beginnen Sie mit dem „schwersten" Plugin, dem mit den meisten CSS-Dateien: deaktivieren, zusammenfassen, Geschwindigkeit messen. Höchstwahrscheinlich reicht das bereits aus, um von der orangefarbenen in die grüne Zone zu gelangen.