So verschieben Sie JavaScript in WordPress, um die Seitengeschwindigkeit zu verbessern

Veröffentlicht von

An 15. April 2025

Kommentare deaktiviert

Einer der Hauptgründe für langsames Laden von WordPress-Seiten ist renderblockierendes JavaScript. Diese Skripte verzögern die Anzeigegeschwindigkeit von Inhalten im Browser, insbesondere oberhalb des Falzes. Durch die Verzögerung des JavaScript-Ladens können Sie die Seitengeschwindigkeit, das Benutzererlebnis und die Leistungswerte in Tools wie PageSpeed Insights verbessern.

Was ist Render-Blocking-JavaScript?

Wenn ein Browser auf eine JavaScript-Datei im HTML-Format stößt <head>wird das Rendern angehalten, um das Skript herunterzuladen, zu analysieren und auszuführen. Dadurch wird die Seite für den Benutzer verzögert sichtbar.

Häufige Ursachen für renderblockierendes JS:

Theme- und Plugin-Skripte (wie Slider, Popups, Animationen)
Externe Skripte (Google Analytics, Facebook Pixel usw.)

Was ist der Unterschied zwischen `verschieben` Und `asynchron`?

asynchron: Lädt das Skript herunter, ohne die HTML-Analyse zu blockieren. Führt es sofort nach dem Download aus – kann bei einer bestimmten Reihenfolge zu Konflikten führen.
verschieben: Lädt auch ohne Blockierung herunter, verzögert aber die Ausführung, bis die HTML-Analyse abgeschlossen ist – sicherer und besser für abhängige Skripte.

So identifizieren Sie problematisches JavaScript

Verwenden Sie diese Tools, um zu sehen, welche Skripte das Rendern blockieren:

PageSpeed-Einblicke
Chrome DevTools → Registerkarte „Lighthouse“
Chrome DevTools → Netzwerk → Filtern nach JS

Konzentrieren Sie sich auf das Laden von JS-Dateien im <head> und als „Render-Blocking“ markiert.

So verschieben Sie JavaScript in WordPress

Option 1: Defer mit Code hinzufügen (keine Plugins)

Fügen Sie diesen Code zu Ihrem Child-Theme hinzu functions.php bewerben verschieben für alle Skripte außer jQuery:

Funktion add_defer_attribute($tag, $handle) {
// jQuery überspringen
wenn ('jquery-core' === $handle || 'jquery' === $handle) {
gib $tag zurück;
}
return str_replace('Quelle', 'Quelle verschieben', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Option 2: Async verwenden

Ähnlich wie bei defer können Sie asynchron Ändern Sie stattdessen einfach „defer“ im obigen Code in „async“. Aber Vorsicht: Einige Skripte hängen von der Ladereihenfolge ab und können daher abstürzen.

Siehe auch Wie ich das Woodmart-Theme superschnell gemacht habe – Meine Erfahrungen beim Bereinigen von xts_options und Autoload

Verwendung von Plugins (mit Vorsicht)

Wenn Sie den Code nicht anfassen möchten, können Sie mit diesen Plugins JS verschieben oder asynchronisieren:

**WP Rocket** – Einfache Benutzeroberfläche, funktioniert gut, ist aber kostenpflichtig.
**Asset CleanUp** – Ermöglicht Ihnen, bestimmte Skripte manuell zu verschieben oder zu deaktivieren.
**Flying Scripts** – Leichtgewichtig und auf das Aufschieben von JS nach einer Verzögerung ausgerichtet.

⚠️ Nach der Aktivierung immer testen – das Aufschieben des falschen Skripts kann das Layout oder die Funktionalität Ihrer Site beeinträchtigen.

So testen Sie die Auswirkungen

Verwenden Sie PageSpeed Insights oder GTmetrix vor/nach
Öffnen Sie Ihre Site in einem Inkognito-Fenster, um sichtbare Probleme zu erkennen
Verwenden Sie DevTools → Registerkarte Netzwerk → überprüfen Sie die Ladereihenfolge und den Zeitpunkt

Fazit: Strategisch verschieben

Das Verschieben von JavaScript ist eine der einfachsten und zugleich wirkungsvollsten Techniken zur Beschleunigung Ihrer WordPress-Site. Beginnen Sie mit sicheren Skripten, vermeiden Sie das Verschieben von jQuery (es sei denn, Sie integrieren es) und testen Sie gründlich.

Möchten Sie noch weiter gehen? Fordern Sie ein kostenloses Leistungsaudit von SpeedWP Pro an und wir helfen Ihnen, Ihre Skripte und Ladestrategie für maximale Ergebnisse zu optimieren.

Der Blog