So reduziert man ungenutztes JavaScript in WordPress (Mein ultimativer Leitfaden)

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.

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.

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

Ich hoffe, ich konnte dir weiterhelfen!

Schönen Tag
Euer Speedmaster