Du brauchst 2026 (wahrscheinlich) kein jQuery: der Migrationsleitfaden

Erweiterte und aktuelle Version dieses Themas: jQuery vs Vanilla JS: Der Migrations-Guide für WordPress.

#Braucht WordPress 2026 noch jQuery?

jQuery war einst die Königsdisziplin der JavaScript-Entwicklung. Als es 2006 veröffentlicht wurde, löste es wirkliche Probleme: Browser-Inkompatibilitäten, komplizierte DOM-Manipulation und mühsame Event-Handling. Doch das Web hat sich weiterentwickelt.

In 2026 ist jQuery für die meisten WordPress-Projekte unnötiger Ballast. Moderne Browser unterstützen einheitlich die Features, für die wir einst jQuery benötigten. Es ist Zeit, loszulassen und auf Vanilla JavaScript (reines JavaScript ohne Framework) umzusteigen.

#Was kostet jQuery an Ladezeit und Wartung

#Dateigröße und Ladezeit von jQuery

Dateigröße:

• jQuery Core: ~30KB (gzipped)
• jQuery UI (optional): ~50KB+
• Gesamt: 80KB+ nur für Grundlagen

Ladezeiten:

• Parse-Zeit: 50-100ms
• Compile-Zeit: 20-50ms
• Execution-Zeit: variabel

Core Web Vitals:

• LCP (Largest Contentful Paint): Verzögert durch jQuery-Ladezeit
• TBT (Total Blocking Time): Erhöht durch Parse- und Compile-Zeit
• CLS (Cumulative Layout Shift): Potenziell beeinträchtigt

#Wartungsaufwand mit jQuery

• Sicherheitsupdates erforderlich
• Kompatibilitätsprobleme mit neuen Browsern
• Abhängigkeit von Drittanbieter-Code
• Schwierigere Debugging

#jQuery-Code in Vanilla JS umschreiben

#querySelector statt $() in jQuery

jQuery:

// Einzelnes Element
var element = $('#myId');

// Mehrere Elemente
var elements = $('.myClass');

// Komplexe Selektoren
var items = $('div.container > ul li:first-child');

Vanilla JS:

// Einzelnes Element
const element = document.getElementById('myId');
// oder
const element = document.querySelector('#myId');

// Mehrere Elemente
const elements = document.querySelectorAll('.myClass');

// Komplexe Selektoren
const items = document.querySelectorAll('div.container > ul li:first-child');

#addEventListener statt .click() in jQuery

jQuery:

$('#button').click(function() {
    console.log('Clicked!');
});

$(document).on('click', '.dynamic-button', function() {
    console.log('Dynamic clicked!');
});

Vanilla JS:

// Einzelnes Element
document.getElementById('button').addEventListener('click', function() {
    console.log('Clicked!');
});

// Event Delegation für dynamische Elemente
document.addEventListener('click', function(e) {
    if (e.target.matches('.dynamic-button')) {
        console.log('Dynamic clicked!');
    }
});

#DOM-Manipulation ohne jQuery

jQuery:

// HTML-Inhalt
$('#container').html('<p>New content</p>');

// Text-Inhalt
$('#text').text('New text');

// Klasse hinzufügen/entfernen
$('#element').addClass('active').removeClass('inactive');

// Attribute
$('#link').attr('href', 'https://example.com');

Vanilla JS:

// HTML-Inhalt
document.getElementById('container').innerHTML = '<p>New content</p>';

// Text-Inhalt
document.getElementById('text').textContent = 'New text';

// Klasse hinzufügen/entfernen
const element = document.getElementById('element');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

// Attribute
document.getElementById('link').setAttribute('href', 'https://example.com');

#fetch statt $.ajax

jQuery:

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

Vanilla JS mit Fetch API:

fetch('/api/data')
    .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// Moderne async/await Syntax
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

#jQuery schrittweise aus WordPress entfernen

#Schritt 1: Audit

Zuerst analysieren Sie Ihre aktuelle jQuery-Nutzung:

// Temporärer Code zur Analyse
console.log('jQuery-Funktionen im Einsatz:');
console.log('- $(selector):', $('*').length, 'Selektoren');
console.log('- $.ajax:', $.ajax ? 'Ja' : 'Nein');
console.log('- Animationen:', $().animate ? 'Ja' : 'Nein');

#Schritt 2: Priorisierung

Konvertieren Sie in dieser Reihenfolge:

1. Einfache Event-Handler
2. DOM-Manipulationen
3. AJAX-Anfragen
4. Komplexe Animationen (zuletzt)

#Schritt 3: Inkrementelle Migration

Woche 1-2: Grundfunktionen

• Event-Listener migrieren
• Einfache DOM-Selektionen
• Klassen-Manipulationen

Woche 3-4: AJAX und API

• Fetch API implementieren
• Formular-Handling
• WordPress REST API

Woche 5-6: Fortgeschrittene Features

• Animationen (CSS oder Web Animations API)
• Komplexe DOM-Operationen
• Plugin-Abhängigkeiten prüfen

#Schritt 4: Testing

// Feature-Detection für ältere Browser
if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                Element.prototype.webkitMatchesSelector;
}

// Polyfill für closest()
if (!Element.prototype.closest) {
    Element.prototype.closest = function(s) {
        var el = this;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
    };
}

#Skripte und REST API in WordPress ohne jQuery

#wp_enqueue_script ohne jQuery-Abhängigkeit

Vorher:

// jQuery laden
wp_enqueue_script('jquery');

// Eigenes Script mit jQuery-Abhängigkeit
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);

Nachher:

// Kein jQuery laden - Vanilla JS verwenden
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true);

// Optional: jQuery nur laden wenn wirklich benötigt
// if (some_condition) {
//     wp_enqueue_script('jquery');
// }

#WordPress REST API mit Vanilla JS

// WordPress REST API Anfrage
fetch(wpApiSettings.root + 'wp/v2/posts', {
    headers: {
        'X-WP-Nonce': wpApiSettings.nonce
    }
})
.then(response => response.json())
.then(posts => {
    posts.forEach(post => {
        console.log(post.title.rendered);
    });
});

#Probleme bei der jQuery-Migration lösen

#Alte Browser wie IE11 ohne jQuery unterstützen

Lösung:

• Polyfills für IE11 (falls noch unterstützt)
• Babel für Transpilierung
• Graceful Degradation

#Plugins, die jQuery voraussetzen

Lösung:

• Plugins auditieren
• Alternativen suchen
• Eigene Lösungen entwickeln
• jQuery nur für Plugins laden

#Das Team vom Umstieg auf Vanilla JS überzeugen

Lösung:

• Schulungen anbieten
• Code-Reviews durchführen
• Kleine Projekte als Proof of Concept
• Dokumentation erstellen

#jQuery vs Vanilla JS Performance im Vergleich

#Benchmarks für DOM, Events und AJAX

#Bundle-Größe mit und ohne jQuery

#Fazit zur jQuery-Migration

Die Migration von jQuery zu Vanilla JavaScript mag zunächst einschüchternd wirken, aber die Vorteile sind erheblich:

• Bessere Performance: Schnellere Ladezeiten, bessere Core Web Vitals
• Geringere Bundle-Größe: 80KB+ Einsparung möglich
• Weniger Abhängigkeiten: Keine Sicherheitsupdates für jQuery mehr
• Moderne Features: Nativer Zugriff auf neue Browser-APIs
• Zukunftssicherheit: Standardkonforme, wartbare Codebasis

Beginnen Sie klein: Migrieren Sie zuerst die einfachsten Funktionen und arbeiten Sie sich zu komplexeren Features vor. Innerhalb weniger Wochen werden Sie sich fragen, warum Sie jemals jQuery benötigt haben.

Haben Sie Fragen zur jQuery-Migration? Stellen Sie sie in den Kommentaren!

Mehr über unsere WordPress-Geschwindigkeitsoptimierung.