Unnötiges CSS/JS entfernen: So entschlackst du den Elementor-Code

Wer Webseiten mit Elementor baut, liebt die gestalterische Freiheit. Doch diese Freiheit hat oft einen Preis: aufgeblähten Code. Langsame Ladezeiten, schlechte Google Core Web Vitals und frustrierte mobile Nutzer sind die Folge, wenn wir nicht aktiv gegensteuern. In diesem Artikel zeige ich dir detailliert, wie du unnötiges CSS und JavaScript (JS) in Elementor entfernst, den Code entschlackst und deine WordPress-Performance massiv verbesserst.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Das Problem: Warum ist Elementor “fett”?

Elementor ist ein Page Builder, der funktionieren muss, egal welche Widgets du auf eine Seite ziehst. Um diese Universalität zu gewährleisten, lädt Elementor standardmäßig viele Skripte und Stylesheets – oft auch solche, die auf der aktuellen Seite gar nicht benötigt werden. Ein klassisches Beispiel: Die Skripte für Slider, Popups oder Formulare werden oft global geladen, selbst auf einer simplen „Über uns“-Seite, die nur Text enthält.

Das Resultat ist ein DOM (Document Object Model), der unnötig groß ist, und eine “Unused CSS”-Warnung in PageSpeed Insights, die dir rot entgegenleuchtet. Doch keine Sorge: Mit der richtigen Strategie und etwas Handarbeit lässt sich das beheben.

Schritt 1: Elementor-interne Funktionen nutzen

Bevor wir externe Plugins installieren, schauen wir uns an, was Elementor selbst an Bord hat. Die Entwickler haben das Performance-Problem erkannt und in den letzten Updates massiv nachgebessert.

Navigiere in deinem WordPress-Dashboard zu Elementor > Einstellungen > Eigenschaften. Hier findest du diverse experimentelle und stabile Funktionen, die oft standardmäßig noch nicht aktiv sind.

Wichtige Einstellungen für weniger CSS/JS:

• Verbessertes CSS-Laden (Improved CSS Loading): Diese Funktion sorgt dafür, dass nur das CSS geladen wird, das für die Widgets auf der Seite tatsächlich notwendig ist. Aktiviere dies unbedingt.
• CSS-Print-Methode: Stelle unter Elementor > Einstellungen > Erweitert sicher, dass die CSS-Print-Methode auf “Externe Datei” steht. Dies erlaubt Browsern, die Datei zu cachen, statt sie bei jedem Aufruf inline neu zu lesen.
• Inline Font Icons: Statt die gesamte Font Awesome Bibliothek zu laden (was hunderte Kilobyte sein können), rendert diese Funktion Icons als SVG direkt im HTML. Das spart massiv Requests.

Wenn du gerade erst startest und den Unterschied zwischen komplexen Webseiten und zielgerichteten Landing Pages lernst, ist dies der erste technische Schritt, den du verinnerlichen solltest. Eine Landing Page muss rasend schnell konvertieren – da ist kein Platz für unnötigen Code-Ballast.

Schritt 2: Ungenutzte Assets identifizieren

Bevor du löschst, musst du wissen, was weg kann. Google Chrome bietet hierfür ein mächtiges Werkzeug.

1. Öffne deine Website im Chrome Browser.
2. Rechtsklick > Untersuchen (oder F12).
3. Drücke Strg + Shift + P (Cmd + Shift + P auf Mac) und tippe “Coverage” ein. Wähle “Show Coverage”.
4. Klicke unten im neuen Reiter auf den Reload-Button.

Chrome lädt die Seite neu und zeigt dir eine Liste aller CSS- und JS-Dateien. Der rote Balken zeigt an, wie viel Prozent des Codes ungenutzt sind. Bei Elementor-Seiten siehst du oft Dateien wie frontend.min.js oder post-123.css mit hohem Rot-Anteil. Das ist dein Indikator dafür, dass Optimierungsbedarf besteht.

Schritt 3: Asset CleanUp oder Perfmatters einsetzen

Elementor allein kann nicht wissen, welche Plugins von Drittanbietern auf welcher Seite feuern. Hier kommen Tools wie Asset CleanUp oder Perfmatters ins Spiel. Diese Plugins erlauben es dir, Skripte und Styles seitenbasiert zu deaktivieren.

Ein typisches Szenario im Webdesign für Handwerker oder Dienstleister: Du nutzt ein Kontaktformular-Plugin (z.B. Contact Form 7), das seine CSS- und JS-Dateien auf jeder Seite lädt – auch auf der Startseite, wo vielleicht gar kein Formular ist.

So gehst du vor:

1. Installiere Asset CleanUp (die kostenlose Version reicht oft für den Anfang).
2. Bearbeite deine Seite und scrolle nach unten zum Asset-Manager.
3. Deaktiviere “Contact Form 7” auf allen Seiten, außer der Kontaktseite.
4. Wiederhole dies für Slider-Plugins, Social-Media-Feeds oder WooCommerce-Skripte, die nicht global benötigt werden.

Dies reduziert die Menge an Code, die der Browser parsen muss, drastisch. Es ist eine mühsame Arbeit, die sich aber für die Performance lohnt.

Schritt 4: Google Fonts und Icons lokal hosten

Externe Anfragen an Google Fonts oder Font Awesome bremsen nicht nur (DNS-Lookup, SSL-Handshake), sie sind in der EU auch datenschutzrechtlich problematisch. Elementor lädt Google Fonts standardmäßig von Google-Servern.

Um Code und Requests zu sparen:

• Deaktiviere Google Fonts in den Elementor-Einstellungen.
• Nutze ein Plugin wie “OMGF” oder binde Schriften lokal über das Child-Theme ein.
• Das reduziert das externe JS/CSS, das für das Laden der Fonts zuständig ist, und verbessert den “Cumulative Layout Shift” (CLS), da Schriften sofort verfügbar sind.

Gerade wenn du auf leistungsstarkes Hosting setzt, wie wir es im All-Inkl Hosting Vergleich empfehlen, sollten Assets idealerweise vom eigenen Server kommen, um die HTTP/2 oder HTTP/3 Vorteile voll auszuschöpfen.

Schritt 5: Elementor Widgets vs. Custom CSS

Ein häufiger Fehler, der zu unnötigem Code führt, ist die “Addon-Wut”. Viele Nutzer installieren riesige Elementor-Addon-Pakete (wie “Ultimate Addons” oder “Happy Addons”), nur um ein einziges spezielles Widget zu nutzen. Diese Pakete laden oft riesige CSS-Bibliotheken.

Die bessere Lösung: Wenn du nur einen speziellen Button-Effekt oder ein bestimmtes Layout brauchst, versuche es mit Custom CSS zu lösen. Elementor Pro erlaubt es dir, im Tab “Erweitert” > “Custom CSS” direkt CSS für ein Element zu schreiben. Dieses CSS wird nur geladen, wenn das Element auf der Seite ist.

Statt also für einen “Gradient Text” ein 5MB großes Addon-Plugin zu installieren, genügen oft 3 Zeilen CSS-Code:

CSS

selector h2 {
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Dieser Ansatz hält deine Installation schlank und wartbar.

Schritt 6: Caching und Minification (Der letzte Schliff)

Nachdem du den “Müll” entfernt hast, muss der verbleibende Rest komprimiert werden. Hierfür ist ein Caching-Plugin essenziell. WP Rocket ist der Goldstandard, aber auch Autoptimize (kostenlos) leistet gute Arbeit.

Checkliste für die Konfiguration:

• Minify CSS/JS: Entfernt Leerzeichen und Kommentare aus dem Code.
• Combine CSS/JS: Achtung bei HTTP/2! Oft ist es besser, Dateien nicht zu kombinieren, sondern parallel laden zu lassen. Teste hier, was für deine Seite besser funktioniert.
• Delay JavaScript Execution: Eine Wunderwaffe für den PageSpeed Score. Skripte werden erst geladen, wenn der Nutzer interagiert (z.B. scrollt oder klickt). Elementor ist hier mittlerweile sehr kompatibel, aber prüfe unbedingt dein Menü und Popups auf Funktionstüchtigkeit.

Fazit: Weniger ist mehr

Das Entfernen von unnötigem CSS und JS in Elementor ist kein einmaliger Klick, sondern ein Prozess. Es beginnt bei der Auswahl der richtigen Hosting-Umgebung, geht über die Disziplin beim Design (weniger Plugins, mehr natives Elementor) und endet beim technischen Feinschliff mit Tools wie Asset CleanUp.

Eine schlanke Webseite rankt nicht nur besser – sie konvertiert auch besser. Deine Besucher werden es dir danken. Wenn du Unterstützung bei der professionellen Umsetzung brauchst, schau dir gerne unsere Übersicht zu Online-Marketing Agenturen an, wo wir zeigen, warum ein technisches Fundament den Unterschied macht.