dowebwork logo
In diesem Beitrag werbe ich unabhängig für Produkte. Wenn jemand ein von mir beworbenes Produkt anklickt, kann ich eine Vergütung erhalten.
Home Guides So entfernt man ungenutztes JavaScript in WordPress (14 Schritte)

So entfernt man ungenutztes JavaScript in WordPress (14 Schritte)

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.

ungenutztes javascript reduzieren wordpress

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!

javascript in den chrome devtools
Finde schweres JavaScript in den Chrome Entwicklertools → Abdeckung
Unbenutzes Javascrip reduzieren
PageSpeed Insights zeigt nur Dateien mit hohem Einsparpotenzial an

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.

schnellste wordpress frameworks

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.

Elementor quellcode ansicht

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

lieblings wordpress themes auf facebook
schnellste wordpress themes facebook umfrage
GeneratePress Seiten Ladezeit Ansicht
Wechsel von Elementor zu Oxygen Pagebuilder

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).
langsame wordpress plugins übersicht
Verwenden Sie Query Monitor, um Ihre langsamsten Plugins zu finden

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.

drittanbieter webseiten code ansicht
Drittanbieter Domains in PageSpeed Insights anzeigen
drittanbieter code in chrome developer tools
Finde Domains von Drittanbietern in Chrome Entwicklungswerkzeuge → Quellen → Seite

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.
litespeed cache plugin optimierung
LiteSpeed Cache hat eine Option zur Lokalisierung von JavaScript
vorabruf von externen dns anfragen

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).

wp-rocket verzögerte javascript ausführung

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

Verzögerter JavaScript Drittanbieter Code
perfmatters javascript verzögert laden

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.

flying scripts für verzögertes javascript

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.“

elementor gesteigertes datei laden

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.

unbenutzes javascript in divi pagebuilder entfernen
Elementor mit Schrift Optimierung
Auswirkungen auf die Dateigrößen bei Aktivierung von Elementor Experiments

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.

Perfmatters Script Manager aktivieren

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.

Der Testmodus beim Perfmatters Plugin

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.

Social Media Sharing Plugins deaktivieren
Beispiel: Deaktivierung von Sassy Social Share Plugin überall (außer für Beiträge)
Elementor Dialog Pop Up deaktivieren
Du kannst elementor-dialog deaktivieren, wenn du keine Popups verwendest
contact-form javascript entfernen
So sieht der gleiche Prozess bei Asset CleanUp aus

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.

javascript verkleinern

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.

CSS und Javascript Dateigröße ansehen

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.

perfmatter zeigt jquery plugins
Vermeiden Sie jQuery-abhängige Plugins und deaktivieren Sie Dateien, wenn sie nicht verwendet werden.

12. Cloudflare E-Mail Verschlüsselung deaktivieren

Die E-Mail Verschleierung von Cloudflare lädt zusätzlich eine sehr kleine JavaScript Datei.

cloudflare email einstellungen

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.

cloudflare email ladezeit
Cloudflare Email Obfuscation fügt eine kleine JavaScript-Datei hinzu (email-decode.min.js)

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.

WooCommerce styles deaktivieren

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.

Perfmatters Analytics Einstellungen
Mit Perfmatters kannst du einen kleineren GA-Tracking Code mit anderen Einstellungen verwenden

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

author image
Ich biete meinen Service an, deine Webseiten-Geschwindigkeit für Dich zu verbessern.
Meine Empfehlung

Mehr PageSpeed gefällig? Ich verwende Rocket.net mit kostenlosem Cloudflare Enterprise und du kannst dich durch meine Website klicken, die Antwortzeit meines Servers testen oder meinen Rocket.net Review lesen.

Meine WordPress-Hilfe

Autor Joe Speedmaster
Joe Speedmaster

Joe ist Inhaber und Chefredakteur. Er beschreibt sich selbst als WordPress Nerd der PageSpeed Optimierung. Mit +5 Jahre Erfahrung im Bereich WordPress, CDN, Hosting und Webentwicklung ist Joe nebenberuflich als Freelancer und Publisher tätig. Mit ehrlichen Erfahrungsberichten möchte er maximalen Mehrwert für seine Leser generieren.