WordPress „jQuery is not defined“ – Lade-Reihenfolge & Defer richtig setzen

Du kennst das bestimmt: Du bastelst an deiner WordPress-Website, alles sieht schick aus, du bist stolz wie Oskar – und plötzlich taucht im Browser-Inspektor die gefürchtete Fehlermeldung auf: „Uncaught ReferenceError: jQuery is not defined“. Herzlichen Glückwunsch, du bist offiziell im Club der WordPress-Entwickler:innen, die sich mit der Lade-Reihenfolge von JavaScript und dem richtigen Einsatz von Defer und Async beschäftigen dürfen. Klingt erstmal trocken, ist aber tatsächlich ein spannendes Thema, das nicht nur für die Performance deiner Website, sondern auch für deine Nerven entscheidend ist. Also, schnapp dir einen Kaffee (oder Matcha, wir sind ja kreativ), lehn dich zurück und lass uns gemeinsam tief eintauchen in die Welt von jQuery, Lade-Reihenfolgen und dem richtigen Umgang mit Defer!

WordPress ist das beliebteste Content-Management-System der Welt – laut W3Techs laufen über 43% aller Websites damit. Und obwohl WordPress in den letzten Jahren immer moderner geworden ist, setzen unzählige Themes und Plugins weiterhin auf jQuery als JavaScript-Bibliothek. Das ist Fluch und Segen zugleich: Einerseits macht jQuery viele Dinge einfacher, andererseits sorgt es immer wieder für Probleme, wenn es um die korrekte Einbindung und Reihenfolge der Skripte geht.

Gerade wenn du deine Website für bessere Ladezeiten optimierst, etwa mit Caching-Plugins, Script-Minifiern oder dem beliebten Defer/Async-Attribut, kann es passieren, dass jQuery zu spät oder gar nicht geladen wird – und schon hagelt es Fehler. Aber keine Sorge: Mit ein bisschen Know-how und den richtigen Kniffen bekommst du das in den Griff!

• Was bedeutet „jQuery is not defined“ eigentlich?

  Diese Fehlermeldung taucht auf, wenn ein JavaScript-Code auf die jQuery-Funktion zugreifen will, bevor die Bibliothek geladen wurde. Das kann passieren, wenn ein Plugin oder Theme-Skript zu früh ausgeführt wird – oder wenn jQuery durch Optimierungsmaßnahmen (z.B. Defer) zu spät geladen wird. Die Folge: Deine Website funktioniert nicht wie gewünscht, Slider bleiben stehen, Menüs reagieren nicht, und du bekommst graue Haare.

• Warum ist die Lade-Reihenfolge so wichtig?

  JavaScript ist wie ein Orchester: Wenn der Dirigent (jQuery) noch nicht auf der Bühne ist, kann das Orchester (deine Plugins und Skripte) nicht spielen. In WordPress werden Skripte normalerweise mit wp_enqueue_script() eingebunden. Dabei kannst du angeben, ob ein Skript von einem anderen abhängt (Dependency). Wird die Reihenfolge durcheinandergebracht – etwa durch Defer, Async oder fehlerhafte Plugin-Implementierungen – kracht es im Gebälk.

• Was ist der Unterschied zwischen Defer und Async?
  • Defer: Das Skript wird parallel zum HTML geladen, aber erst ausgeführt, wenn das gesamte Dokument geparst wurde. Perfekt für Skripte, die auf DOM-Elemente zugreifen müssen – wie jQuery und viele Plugins.
  • Async: Das Skript wird ebenfalls parallel geladen, aber sofort ausgeführt, sobald es fertig ist – unabhängig davon, ob das HTML schon komplett geladen ist. Das kann zu Problemen führen, wenn das Skript auf andere Skripte oder DOM-Elemente angewiesen ist.

  Fazit: Für jQuery und abhängige Plugins ist Defer meist die bessere Wahl.

Schauen wir uns das Ganze mal im Detail an – mit Beispielen, Tipps und echten Profi-Tricks!

1. Wie WordPress Skripte lädt – und warum das manchmal schiefgeht

WordPress hat ein eigenes System, um Skripte und Styles einzubinden: wp_enqueue_script() und wp_enqueue_style(). Damit kannst du nicht nur Skripte einbinden, sondern auch Abhängigkeiten definieren. Beispiel:


wp_enqueue_script( 'mein-script', get_template_directory_uri() . '/js/mein-script.js', array('jquery'), null, true );


Hier wird mein-script.js erst geladen, wenn jQuery verfügbar ist. Soweit, so gut. Aber:

• Viele Plugins und Themes halten sich nicht an die Regeln

  Manche Entwickler:innen binden Skripte direkt im Template ein oder vergessen, Abhängigkeiten zu deklarieren. Das führt dazu, dass jQuery zu spät oder gar nicht geladen wird.

• Optimierungs-Plugins mischen sich ein

  Tools wie Autoptimize, WP Rocket oder LiteSpeed Cache versuchen, Skripte zu bündeln, zu minimieren und mit Defer/Async zu versehen. Das ist super für die Performance – aber nur, wenn die Reihenfolge stimmt. Sonst gibt’s Chaos.

• CDN und externe Skripte

  Wenn jQuery von einem CDN (z.B. Google) geladen wird, kann es zu Verzögerungen kommen – oder das Skript ist gar nicht erreichbar. Auch das führt zu „jQuery is not defined“.

2. Typische Fehlerquellen – und wie du sie erkennst

• jQuery wird im Header geladen, Plugins im Footer

  Wenn du jQuery im <head> lädst, aber deine Plugins im Footer (wp_footer), kann es zu Timing-Problemen kommen – vor allem, wenn Defer/Async im Spiel ist.

• Defer/Async falsch gesetzt

  Wenn du das Defer-Attribut auf alle Skripte anwendest, werden auch Abhängigkeiten wie jQuery deferred – aber die Plugins, die jQuery brauchen, vielleicht nicht. Das führt zu einem klassischen „Henne-Ei-Problem“.

• Reihenfolge durch Minifier zerstört

  Manche Minifier-Plugins bündeln Skripte in einer neuen Reihenfolge. Wenn die Abhängigkeiten nicht korrekt erkannt werden, ist das Ergebnis: „jQuery is not defined“.

3. Die richtige Lösung: Lade-Reihenfolge und Defer clever steuern

Jetzt wird’s praktisch! Hier sind die wichtigsten Schritte, um das Problem zu lösen:

• Abhängigkeiten korrekt deklarieren

  Immer wp_enqueue_script() verwenden und im dritten Parameter die Abhängigkeiten angeben. Beispiel: array('jquery'). So stellt WordPress sicher, dass jQuery zuerst geladen wird.

• Defer nur gezielt einsetzen

  Setze das Defer-Attribut nicht auf jQuery selbst, sondern nur auf Skripte, die nach jQuery geladen werden und keine weiteren Abhängigkeiten haben. Das kannst du mit einem kleinen Snippet in deiner functions.php steuern:

  
function add_defer_attribute($tag, $handle) {
// Handles, die Defer bekommen sollen
$defer_scripts = array('mein-script', 'noch-ein-script');
foreach($defer_scripts as $defer_script) {
if ($defer_script === $handle) {
return str_replace(' src', ' defer="defer" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);


  So kannst du gezielt steuern, welche Skripte deferred werden – und jQuery bleibt außen vor.

• jQuery im Footer laden

  Standardmäßig lädt WordPress jQuery im Header. Du kannst es aber auch im Footer laden, um die Ladezeit zu verbessern. Das geht so:

  
function move_jquery_to_footer() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'move_jquery_to_footer');


  Wichtig: Teste danach alle Funktionen deiner Website, denn manche Plugins erwarten jQuery im Header.

• CDN mit Fallback nutzen

  Wenn du jQuery von einem CDN lädst, solltest du einen Fallback einbauen, falls das CDN nicht erreichbar ist. Beispiel:

  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"></script>');
</script>


  So bist du auf der sicheren Seite.

• Optimierungs-Plugins richtig konfigurieren

  Viele Caching- und Optimierungs-Plugins bieten die Möglichkeit, bestimmte Skripte von der Optimierung auszuschließen. Setze jQuery und alle abhängigen Plugins auf die „Ausschlussliste“ für Defer/Async.

4. Typische Szenarien und Lösungen – eine kleine Tabelle

5. Bonus: jQuery komplett loswerden?

Viele moderne Themes und Plugins kommen heute ohne jQuery aus – sie setzen auf „Vanilla JS“ oder moderne Frameworks wie React oder Vue. Das ist aus Performance-Sicht ideal, denn jede zusätzliche Bibliothek kostet Ladezeit. Wenn du also die Möglichkeit hast, auf jQuery zu verzichten, tu es! Aber: In der WordPress-Welt ist das (noch) nicht immer realistisch, vor allem bei älteren Themes und Plugins.

6. Fazit: Mit Köpfchen optimieren – und entspannt bleiben

Die Fehlermeldung „jQuery is not defined“ ist nervig, aber kein Weltuntergang. Mit ein bisschen technischem Verständnis, sauberer Einbindung und gezieltem Einsatz von Defer/Async bekommst du das Problem in den Griff – und deine Website bleibt schnell, stabil und benutzerfreundlich. Und falls du mal nicht weiterkommst: Es gibt Profis, die dir helfen können (ja, das ist ein dezenter Hinweis auf uns 😉).

Wie Nakaryu dir helfen kann

Du willst dich nicht mit Lade-Reihenfolgen, jQuery, Defer und all dem Technik-Kram herumschlagen? Dann lass uns das machen! Wir von Nakaryu sind nicht nur WordPress-Profis, sondern echte Nerds, wenn es um Performance, Sicherheit und modernes Webdesign geht. Mit unserer Webdesign-Flatrate bekommst du eine Website, die nicht nur gut aussieht, sondern auch technisch auf dem neuesten Stand ist – inklusive optimaler Ladezeiten, sauberer Skripteinbindung und persönlichem Support. Klingt gut? Dann schau vorbei und lass uns gemeinsam deine Website auf das nächste Level bringen!

Quellen

• W3Techs: WordPress Usage Statistics
• WordPress Developer Docs: wp_enqueue_script()
• web.dev: Defer non-critical JavaScript
• CSS-Tricks: Using Defer and Async
• Smashing Magazine: Improve Page Loading Speed By Deferring JavaScript Parsing
• Autoptimize Plugin
• WP Rocket Plugin

Fragen zum Thema

Was bedeutet die Fehlermeldung „jQuery is not defined“ in WordPress?

Die Meldung „jQuery is not defined“ erscheint, wenn ein JavaScript-Code auf die jQuery-Funktion zugreifen will, bevor die Bibliothek geladen wurde. Das passiert häufig, wenn die Lade-Reihenfolge der Skripte nicht stimmt – zum Beispiel durch falsch gesetztes Defer oder Async, fehlerhafte Plugin-Implementierungen oder Optimierungs-Plugins. Die Folge: Funktionen wie Slider, Menüs oder Lightboxen funktionieren nicht mehr.

Warum ist die Lade-Reihenfolge von JavaScript in WordPress so wichtig?

Die Lade-Reihenfolge entscheidet, ob alle Skripte korrekt funktionieren. In WordPress werden Skripte mit wp_enqueue_script() eingebunden, wobei Abhängigkeiten (Dependencies) angegeben werden können. Wird diese Reihenfolge durch Defer, Async oder fehlerhafte Einbindung gestört, kann es zu Fehlern wie „jQuery is not defined“ kommen.

Was ist der Unterschied zwischen Defer und Async bei JavaScript?

Defer lädt das Skript parallel zum HTML, führt es aber erst aus, wenn das Dokument komplett geparst wurde – ideal für Skripte wie jQuery, die auf DOM-Elemente zugreifen. Async lädt und führt das Skript sofort aus, sobald es fertig ist, unabhängig vom HTML-Parsing. Das kann zu Problemen führen, wenn das Skript von anderen Skripten oder dem DOM abhängt. Für jQuery und abhängige Plugins ist Defer meist die bessere Wahl.

Wie kann ich verhindern, dass jQuery zu spät oder gar nicht geladen wird?

Achte darauf, Abhängigkeiten immer korrekt mit wp_enqueue_script() zu deklarieren (z.B. array('jquery')). Setze Defer und Async nur gezielt auf Skripte, die keine weiteren Abhängigkeiten haben. Schließe jQuery und abhängige Plugins in Optimierungs-Plugins von Defer/Async aus. Wenn du jQuery von einem CDN lädst, baue einen Fallback ein. Optional kannst du jQuery im Footer laden, um die Ladezeit zu verbessern – teste danach aber alle Funktionen.

Kann ich jQuery in WordPress komplett loswerden?

Viele moderne Themes und Plugins kommen ohne jQuery aus und setzen auf Vanilla JS oder Frameworks wie React oder Vue. Das verbessert die Performance, da weniger externe Bibliotheken geladen werden müssen. In der Praxis ist ein kompletter Verzicht auf jQuery aber oft nur möglich, wenn du keine älteren Themes oder Plugins nutzt, die darauf angewiesen sind. Für neue Projekte empfiehlt sich der Verzicht, für bestehende Installationen ist eine schrittweise Umstellung sinnvoll.