Nachdem du deine Webseite in PageSpeed Insights getestet hast, musst du möglicherweise ungenutztes JavaScript entfernen. Der beste Startpunkt ist die Suche nach deinen größten JavaScript-Dateien mit Chrome Dev Tools im Tab -> Abdeckungsbericht. So kannst du herausfinden, ob das Hauptproblem von deinem WordPress Theme, bestimmten Plugins oder aus Drittanbietercode stammt.
Der einfachste Weg, um nicht verwendetes JS zu reduzieren ist es, leichtgewichtige Themes/Plugins zu verwenden (Gutenberg, WP Hive Chrome Extension und Query Monitor sind deine besten Freunde). Plugins wie Elementor und Divi verlangsamen deine Webseite und du solltest auf etwas wie GeneratePress (was ich verwende), Blocksy oder Kadence umsteigen.
Hast du JavaScript von Drittanbietern gefunden? Dann solltest du so viel wie möglich davon lokal hosten. Das sind typischerweise Google Fonts, Analytics und YouTube Thumbnails. Für den Code von Drittanbietern (welcher nicht lokal gehostet werden kann) solltest du ein WordPress Cache Plugin benutzen, um JavaScript verzögert zu laden.
Ich verwende Flying Press + FlyingScripts. Mit der neuen Zaraz kann man Drittanbieter Code sogar auf Cloudflare auslagern. Flying Press ist das beste Cache-Plugin, um Drittanbietercode selbst zu hosten und sofort JavaScript zu reduzieren. Ich verwende zusätzlich sehr schnelles Rocket.net Litespeed-Hosting (ist aber natürlich nicht notwendig).
Es gibt auch Webseiten (die Pagebuilder verwenden) die Möglichkeit ungenutztes JavaScript in WordPress zu entfernen. Zum Beispiel durch die Aktivierung der Einstellung „Elementor Experiments“ (oder Divis integrierten Performance Einstellungen) und die Verwendung von Perfmatters Skriptmanager (damit hast du komplette Kontrolle und kannst Javascript sogar nur für bestimmte Seiten aktivieren/deaktivieren) was deutlich helfen.
Wie gesagt, wenn du deinen Abdeckungsbericht öffnest und deine größten JavaScript Dateien von deinem Theme oder einem bestimmten Plugin stammen, solltest du darüber nachdenken, das Design deiner Webseite zu überarbeiten.
- Finde deine größten JavaScript Dateien
- Verwende schlanke Themes
- Vermeide aufgeblähte Plugins
- Reduziere Code von Drittanbietern
- JavaScript von Drittanbietern verzögert laden
- Aktiviere die Performance Einstellungen von Elementor/Divi
- Entferne ungenutztes JavaScript mit Plugins
- Hardcode von Header/Footer
- JavaScript minimieren
- Kombiniere JavaScript (oder auch nicht)
- jQuery deaktivieren
- Deaktiviere Cloudflare E-Mail Verschlüsselung
- Deaktiviere WooCommerce-Skripte
- Verkürze deinen Google Analytics Tracking Code

1. Finde die größten JavaScript-Dateien
Finde deine größten JavaScript Dateien in Chrome Dev Tools (empfohlen), PageSpeed Insights oder auf GTmetrix. Der schnellste Weg ist, deine Webseite besuchen und tippe Strg + Umschalt + J (Windows) oder CMD + Alt + J (Mac) dadurch öffnen sich Dev Tools.
- Ist es jQuery?
- Ist es ein Plugin?
- Liegt es an deinem Theme/Page Builder?
- Handelt es sich um Code von Drittanbietern einer externen Domain?
Durchsuche deinen Abdeckungsbericht. Die URL verrät dir, woher der Code stammt. Du kannst nach „Type“ filtern, um alle JavaScript Dateien anzuzeigen. Die „Usage Visualization“ zeigt die Anzahl der Bytes und die nicht verwendeten Bytes an. Das sollte weiterhelfen!


2. Verwende ein leichtgewichtiges Theme
Falls du es noch nicht wusstest: Elementor und Divi verlangsamen deine Webseite.
Natürlich kannst du Elementor Experiments und die Leistungseinstellungen von Divi verwenden. Aber langfristig empfehle ich auf Pagebuilder zu verzichten. Dann musst du dir keine Gedanken mehr machen, ob der Page Builder vielleicht nicht doch zu viel Code hinzufügt.
Ich habe viele meiner Website mit GeneratePress neu gestaltet, aber auch Blocksy und Kadence sind eine gute Wahl. Ich bin kein Fan von Astra wegen deren Business Praktiken und Oxygen Builder ist zu unübersichtlich aufgebaut.
Wenn du Elementor Pro und andere Page-Builder hinzufügst, ist das aus Perspektive der WordPress Geschwindigkeits Optimierung eine Katastrophe. Falls du trotzdem Elementor verwenden möchtest, habe ich einen kompletten Guide verfasst, um Elementor Webseiten zu beschleunigen.

Ich habe auch Elementor verwendet und habe damals alles versucht, um JavaScript zu reduzieren. Das Ergebnis waren nur mehr Probleme in PageSpeed Insights. Irgendwann habe ich beschlossen, meine wichtigsten Webseiten (erneut) mit GeneratePress umzugestalten und sofort eine Verbesserung meiner Ergebnisse und schnellere Ladezeit beim Klicken durch meine Blogs festgestellt.

Es gibt einen großen Trend weg von langsamen Page Builder Plugins:




3. Vermeide langsame Plugins
Einige Plugins fügen dem Frontend zusätzliches JavaScript/CSS hinzu, während wieder andere deinen Server durch Hintergrundaufgaben belasten und deinen Speicherverbrauch erhöhen.
Beides ist zwar nicht gut, aber JavaScript-lastige Plugins sind in diesem Fall dein Hauptproblem. In der Regel sind das „Design-Plugins“ wie Galerien, Kommentare oder Kontaktformulare. Schau dir meine vollständige Liste der langsamer Plugins an und entferne diese (wenn möglich). Wenn du den Coverage Report der Chrome Dev Tools oder Query Monitor verwendet hast, werden deine problematischen Plugins schnell ersichtlich.
Plugin | Kategorie | Speicher Auswirkungen | PageSpeed Auswirkungen |
---|---|---|---|
All In One SEO | SEO | X | X |
Disqus | Kommentare | ✓ | X |
Divi Builder | Page Builder | X | X |
Elementor | Page Builder | X | X |
Elementor Premium Addons | Page Builder | ✓ | X |
Elementor Pro | Page Builder | X | X |
Elementor Ultimate Addons | Page Builder | ✓ | X |
Essential Grid | Galerie | ✓ | X |
JetElements | Page Builder | X | X |
NextGEN Gallery | Galerie | X | X |
Popup Builder | Popup | X | X |
Slider Revolution | Slider | X | X |
Social Media Share Buttons | Social Sharing | ✓ | X |
wpDiscuz | Kommentare | X | X |
WPML | Übersetzen | X | X |
Bessere Alternativen
- Soziales Teilen -> Grow Social.
- Galerie -> Gutenberg Galerie oder Meow Gallery.
- Übersetzen -> MultilingualPress, Polylang (nicht WPML).
- Kommentare -> native Kommentare in CSS.
- Sicherheit -> Verwende eine Firewall und nutze diese Sicherheitscheckliste.
- Slider -> Soliloquy oder MetaSlider, aber ich empfehle keine Slider.
- SEO -> Rank Math oder SEOPress (weniger aufgeblasen wie Yoast).

4. Reduziere Code von Drittanbietern
Der Code von Drittanbietern ist eine klassische Quelle für ungewolltes JavaScript. Du kannst wieder PageSpeed Insights oder Chrome Dev Tools verwenden, um den komplette Code von Drittanbietern zu durchsuchen (der aktuell auf deiner Webseite geladen wird).
Im Tab „Sources“ findest du die Domains von Drittanbietern im Überblick.


So solltest du Code von Drittanbietern optimieren
- Dateien lokal hosten – Google Fonts, Analytics, Tag Manager und anderer Code von Drittanbieter kannst du auch lokal auf deinem Server hosten. Wenn man das nicht tut, wird Code von externen Domänen bezogen, welcher deine Webseite beliebig verlangsamen könnte. Hinweis: Du hast einen Blog mit vielen Kommentaren? Dann solltest du z.B. lokales Avatar Plugin verwenden, um Anfragen von Gravatar zu verhindern.
- Verzögert laden – die meisten Cache-Plugins können JavaScript verzögert laden.
- Prefetch – für Domains, die nicht lokal gehostet werden kannst du den Prefetch Ressourcen Hinweis benutzen. Die CDN URLs und externe Schriftarten sind grundsätzlich die einzigen Domains, die stattdessen preconnect verwenden sollten.
- Lazy Load – die meisten Cache-Plugins verfügen über Einstellungen zum Lazy Load von iframes/Maps. FlyingPress kann sogar YouTube-Thumbnails lokal hosten. Damit kann man sogar YouTube-iframe durch ein Vorschaubild ersetzen.
- Begrenze den Code von Drittanbietern – wenn du Code von Drittanbietern verwenden musst, vermeide es, diesen vor dem ersten Inhaltsbereich (above the fold) zu laden und limitiere seine Verwendung. Lade z. B. Google Maps Code nur auf Kontakt-Seiten und lade AdSense nicht above the fold und vermeide unnötiges Tracking durch den Google Tag Manager. Nutzen Perfmatters, um dein Social Sharing Plugin nur an den gewünschten Stellen zu laden.


5. JavaScript von Drittanbietern verzögert laden
Warum sollte man JavaScript verzögert laden? Das Verzögern von JavaScript verzögert das Laden bis zur Benutzerinteraktion (d. h. Scrollen, Mausklick oder Berühren des Bildschirms auf dem Handy). Das kann die Ladezeit verbessern und mehrere Probleme in PageSpeed Insights auf einmal lösen.
WP Rocket und LiteSpeed Cache verzögern JavaScript automatisch (aktiviere dazu die Datei-Optimierungseinstellungen von WP Rocket oder schalte die JS-Einstellungen von LiteSpeed Cache unter „load JS deferred“ ein).

Bei FlyingPress und Pefmatters kannst du JavaScript-Dateien manuell hinzufügen. Überprüfe dazu den Drittanbietern Code in deinem PageSpeed Insights Bericht.


SiteGround Optimizer und viele anderen Cache-Plugins unterstützen die Verzögerung von JavaScript nicht. In diesem Fall kommst du nicht darum herum, FlyingPress und Flying Scripts Plugin zu installieren. So kannst du die größten JavaScriptdateien manuell hinzufügen und verzögert laden.

Möglicherweise musst du die Timeout Zeit erhöhen, um bessere Ergebnisse zu erzielen (ich empfehle ca. 5-8 Sekunden). Vorsicht: Wenn du Google Analytics oder AdSense verzögert lädst, kann das deine Daten verzerren oder deine AdSense Einnahmen negativ beeinflussen.
6. Performance Einstellungen von Elementor/Divi aktivieren
Wenn du Elementor verwendest, gehe zu Elementor → Settings → Experiments und aktiviere die Einstellung zum verbesserten Laden. Dadurch werden JavaScript-Dateien von Elementor reduziert, weil nur dann Code hinzugefügt wird, wenn besondere Elemente (wie z.B. Widget JS Handler und Swiper) auch tatsächlich verwendet werden.
Aber Elementor sagt: „Damit diese Einstellung richtig funktioniert, muss man die Version Elementor Pro 3.0.9 oder höher verwenden.“

Divi verfügt über ähnliche Optionen zum Entfernen von ungenutztem JavaScript in Theme Options → General → Performance. Aktiviere dort auf jeden Fall das Dynamic Module Framework und Dynamic JavaScript Libraries.


7. Entferne ungenutztes JavaScript mit Plugins
Mit Perfmatters (kostenpflichtig) und Asset CleanUp (kostenlos) kann man ungenutztes JavaScript auf bestimmten Seiten deaktivieren. Also nur dort, wo du Elemente/Plugins tatsächlich verwendest.
Ich empfehle Perfmatters, weil es mehr Optionen bietet als Asset CleanUp. Viele der Funktionen von Perfmatters sind in den anderen Cache-Plugins nicht zu finden (z. B. lokales Hosten von Schriftarten und Javascript verzögern). Außerdem kann man damit ungenutzte CSS/JS-Dateien auch extra nur für mobile Geräte deaktivieren. Die Benutzeroberfläche ist ebenfalls besser und neue Funktionen werden schneller und mit ausführlicher Dokumentation veröffentlicht. Aus diesem Grund verwende ich es.
Schritt 1: Installiere Perfmatters oder Asset CleanUp.
Schritt 2: Aktiviere den Skript Manager wenn du Perfmatters verwendest.

Schritt 3: Aktiviere den Testmodus. Das verhindert, dass der Skript-Manager deine Website beschädigt. Solange diese Option aktiviert ist, siehst nur du alleine die Änderungen. Sobald du mit der Konfiguration des Skriptmanagers fertig bist, kannst du den Testmodus deaktivieren. Damit kannst du deinen Änderungen live schalten.

Schritt 4: Gehe jetzt zum Skript-Manager und deaktiviere JavaScript Dateien und Plugins dort, wo sie nicht geladen werden sollen. So kannst du z. B. das Plugin für Kommentare nur auf ausgewählten Posts aktivieren. Das kannst du für alle Dateien oder Plugins nutzen, die nur auf bestimmten Seiten und nicht auf deiner gesamten Website geladen werden sollen.



8. Hardcode Header/Footer in Html/CSS
Wenn du deinen Page-Builder noch nicht entfernen willst, kannst du wenigstens die zentralen Elemente deiner Webseite, also: Header, Footer und Sidebar, mit HTML hardcoden. Das ist eine gute Alternative, um Code von Page Builder einzusparen. Für deine Hauptinhalte kannst du immer noch Elementor oder Divi zur Hilfe nehmen.
9. Minify JavaScript
Durch Minifying/Verkleinerung von JavaScript werden unnötige Zeichen aus deinem Code entfernt. Wenn deine Webseite dadurch beschädigt wird, kannst du die verantwortlichen Dateien aus deinem Quellcode herauskopieren und manuell von der Minifizierung ausschließen.

10. Kombiniere JavaScript (aber Achtung!)
Achtung: Das Kombinieren von JavaScript ist nicht immer eine gute Sache.
Der WordPress Profi WPJohnny empfiehlt, JavaScript nur auf kleinen Websites zu kombinieren. Genauer gesagt, bei Webseiten mit einer Gesamtgröße von CSS- und JavaScript Dateien unter 10 KB liegt (die meisten Websites sind weit über 10 KB groß). Prüfe dein GTmetrix Wasserfalldiagramm und sieh dir an, wie groß deine CSS und JS Dateien sind. Danach kannst du immer noch entscheiden, ob du JavaScript kombinieren möchtest. Ich würde es meistens nicht empfehlen.

11. jQuery deaktivieren
Einige Themes/Plugins verwenden jQuery. Sei also vorsichtig beim Deaktivieren.
Es ist möglich, bestimmte Teile von jQuery (z. B. jquery-migrate) zu deaktivieren, ohne etwas zu beschädigen. Teste diese Einstellung in Perfmatters oder Asset CleanUp und überprüfe, ob du wenigstens ein paar KBs damit entfernen kannst.

12. Cloudflare E-Mail Verschlüsselung deaktivieren
Die E-Mail Verschleierung von Cloudflare lädt zusätzlich eine sehr kleine JavaScript Datei.

Entweder du hast diese Einstellung selbst aktiviert oder deine Webseite verwendet die „optimalen Einstellungen“ von WP Rocket für Cloudflare. Das hindert Bots daran, deine E-Mail zu erkennen. Wenn du deine E-Mail Adresse nicht öffentlich auf deiner Website zeigst, ist diese Funktion überflüssig. Alternativ kannst du versuchen, deine Email einfach so aufzulisten: info(at)dowebwork.de.

13. WooCommerce Skripte deaktivieren
Wenn du WooCommerce verwendest, solltest du das Plugin Disable WooCommerce Bloat ausprobieren. Neben der Deaktivierung von WooCommerce Skripten/Styles auf Nicht-Ecommerce Unterseiten, bietet es auch Optionen zur Entfernung von Datenmüll wie z. B. das Entfernen von WooCommerce Code Überbleibsel im Dashboard. Auf GitHub gibts auch ein paar Lösungen dazu.

14. Verwende einen kleineren Google Analytics Tracking Code
Du kannst bis zu 50 KB einsparen, indem du einen kleineren Google Analytics Tracking Code verwendest. Das setzt voraus, dass es für dich in Ordnung ist, bestimmte Google Analytics Funktionen nicht zu nutzen (Demografien, Interessen, Überwachung der Webseiten Geschwindigkeit, Werbedaten…). Lese die Perfmatters Dokumentation, um mehr darüber zu erfahren. Folgende Plugins unterstützen Google Analytics: Perfmatters, CAOS und Flying Analytics.

Häufig gestellte Fragen
Wie entferne ich ungenutztes JavaScript in WordPress?
Verwenden den Abdeckungsbericht der Chrome Dev Tools, um deine größten JavaScript-Dateien anzuzeigen. Diese Dateien stammen in der Regel von überladenen WordPress-Themes, Page Builder, Plugins und Code von Drittanbieter.
Kann Autoptimize ungenutztes JavaScript entfernen?
Autoptimize kann JavaScript Dateien verkleinern/zusammenfassen und verzögern. Trotzdem ist die Wahrscheinlichkeit groß, dass sich die Google Empfehlung „remove unused JavaScript“ dadurch nicht wesentlich verbessert.
Wie kann man ungenutztes JavaScript mit WP Rocket entfernen?
WP Rocket besitzt Einstellungen, um ungenutztes JavaScript durch Minifying, Kombinieren von JavaScript und Verzögerung von Drittanbieter Code zu entfernen. Die anderen JavaScript Optimierungen können leider nicht mit WP-Rocket Plugin durchgeführt werden.
Ich hoffe, ich konnte dir weiterhelfen!
Schönen Tag
Euer Speedmaster