Eine Sache, die schon sehr lange auf meiner To-Do-Liste stand, war das Ersetzen von jQuery mit reinem JavaScript, auch Vanilla-JS genannt. Mit den neuesten Updates für Themes und Pro-Version-Plugins haben wir dieses Feature nun weitgehend umgesetzt. Mehr Aufschluss über die Vorzüge der Updates gibt dieser kurze Blog-Beitrag.
jQuery ist eine JavaScript-Bibliothek und erleichtert den Zugriff und Manipulation des HTML-Codes ungemein. Damit können Animationen und Skripte wie beispielsweise DropDowns, Tabs oder Slideshows sehr schnell und kompatibel mit allen Browsern umgesetzt werden. Aus diesem Grund wird jQuery gefühlt von fast jedem WordPress-Theme und auch einer Vielzahl von Plugins verwendet.
Bei uns kommt jQuery unter anderem hier zum Einsatz:
- Navigationsmenüs – jetzt in Vanilla-JS
- Scroll-to-Top Button – jetzt in Vanilla-JS
- Header-Suche – jetzt in Vanilla-JS
- Beitrags-Slider
- Tabbed Content Widget
- Infinite Scroll im Toolkit Plugin
- Theme Optionen im Customizer
Früher waren viele Dinge ohne jQuery nicht möglich. Inzwischen ist der Browser-Support für moderne JavaScript-Funktionen und Standards so gut, dass auf jQuery verzichtet werden kann. Auch das Aus vom Internet Explorer trug wesentlich dazu bei.
Doch welche Vorteile hat Vanilla-JS nun? Das sind im wesentlichen zwei Dinge:
- Bessere Performance
Kein Einbinden der riesigen jQuery-Bibliothek spart wertvolle KiloBytes bei jedem Seitenaufruf. - Keine Abhängigkeiten und Konflikte
Unsere Skripte müssen nicht erst warten, ob und bis jQuery vollständig geladen wurde.
Jedes fremde Skript erhöht letztendlich das Risiko von Konflikten mit anderen WordPress-Plugins.
Mit den neuesten Updates haben wir jQuery nun in allen Navigationsmenüs, Scroll-to-Top-Buttons und in den DropDowns für die Header-Suche entfernt und mit Vanilla-JS ersetzt. Insgesamt haben wir mehrere dutzend Skripte angepasst. Für die Beitrags-Slider, Tabbed Content Widget und Infinite Scroll sind wir noch auf der Suche nach Lösungen. Wer auf diese Features verzichtet, kann unsere WordPress Theme jetzt aber ohne jQuery betreiben.
Für die Theme Optionen im Customizer lohnt es sich nicht, auf jQuery zu verzichten. Hier wird jQuery bereits vom WordPress Core geladen und auch die Performance spielt weniger eine Rolle, weil den Customizer nur Admins, aber keine normalen Website-Besucher aufrufen.