CSS und JavaScript nur dort laden, wo sie gebraucht werden

Cookbook: Ziel und Ergebnis

CSS und JavaScript eines Features werden nur auf Seiten geladen, die dieses Feature wirklich verwenden. Abhängigkeiten und dynamische Blöcke bleiben intakt.

Rezept: Schritt für Schritt

1. Im Netzwerk-Panel Asset-URL und WordPress-Handle bestimmen; notfalls registrierten Queue-Inhalt auf Staging protokollieren.
2. Seitentypen mit und ohne Feature festlegen: Template, Block, Shortcode, WooCommerce-Endpunkt oder Pluginfunktion.
3. Über wp_enqueue_scripts mit später Priorität und exakt begrenzter Bedingung dequeue/deregister nur dann einsetzen, wenn das Plugin keine eigene Option bietet.
4. Alle betroffenen Pfade, AJAX-Navigation, Archive und responsive Varianten testen.

Rechenweg oder Entscheidungsregel

Nettoersparnis = vermiedene Bytes + vermiedene Parse-/Ausführungszeit − zusätzliche Cache-Fragmentierung

Praxisbeispiel

Kontaktformular-Plugin lädt 95 kB CSS und 180 kB JS auf 500 Artikeln, wird aber nur auf /kontakt/ gebraucht. Bedingtes Laden spart dort nichts, auf den 500 Artikeln jedoch je 275 kB und Main-Thread-Arbeit.

Prüfen, ob es funktioniert

• Asset fehlt auf irrelevanten Seiten und bleibt auf allen Funktionsseiten vorhanden.
• Keine JavaScript-Fehler, ungestylten Blöcke oder fehlenden Abhängigkeiten.
• LCP/INP bzw. übertragene Bytes verbessern sich auf Zielseiten.

Rollback

Eigenen Hook/MU-Plugin-Code deaktivieren, ursprüngliche Enqueue-Reihenfolge wiederherstellen und Cache leeren. Nicht das Drittanbieter-Plugin bearbeiten; Updates würden Änderungen überschreiben.

Das Problem

Formular-, Slider-, Shop- oder Tracking-Assets werden häufig auf jeder Seite eingebunden, obwohl die Funktion nur auf wenigen URLs vorkommt. Das erhöht Transfer, Parsing und Main-Thread-Arbeit.

Sauberer Ansatz

Autoren sollten Assets über wp_enqueue_script() und wp_enqueue_style() registrieren und nur im passenden Block-/Template-Kontext laden. Site-Betreiber können bekannte Handles gezielt dequeuen – aber nur nach Prüfung von Abhängigkeiten und bei jeder Plugin-Aktualisierung erneut.

Priorität

1. Unnötige Funktion entfernen.
2. Asset nur auf benötigten Seiten laden.
3. Datei verkleinern oder aufteilen.
4. Erst danach Minify/Combine testen.

Nicht pauschal: Reguläre Ausdrücke, die alle Plugin-Assets auf bestimmten Seiten entfernen, brechen leicht versteckte Abhängigkeiten, Formulare oder Consent.

Erfolgskontrolle

Netzwerk- und Coverage-Ansicht vergleichen, außerdem Navigation, Formulare und eingeloggte Ansichten testen. Weniger Requests allein ist unter HTTP/2 kein ausreichendes Erfolgskriterium.

Quellen und Prüfstand

• WordPress: Assets korrekt einbinden
• Google: unnötige Downloads vermeiden

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.