WordPress: jQuery oder Prototype/script.aculo.us
Google Suchergebnisse
Folgende Begriffe wurden gesucht:
Bitte oben einen Suchbegriff anklicken um hier zum ersten Treffer zu gelangen (wenn vorhanden) oder zurück gehen zur Trefferliste aller Ergebnisse.
Nachdem ich gestern über 37 More Shocking jQuery Plugins gestolpert bin und immer noch meinen Artikel über Webperformance und Optimierungspotential im Hinterkopf hatte (nun mal ehrlich, die Seite lädt auch wirklich langsam), wollte ich mich dann Abends daran machen, einige Teile auf jQuery umzustellen.
Ein Grund für das träge Seitenverhalten war/ist, dass mein gewähltes Theme (in der Ursprungsform) zusätzlich einiges an JavaScript mit sich bringt (schlappe 92kB). Darin enthalten sind unter anderem Prototype und moo.fx. Diese Teile wollte ich nun gegen jQuery austauschen.
Ein wenig naiv ging ich an die ganze Geschichte heran, da ich mich mit den einzelnen JavaScript Frameworks noch nicht wirklich auseinander gesetzt hatte. Schnell musste ich feststellen, dass dies gar nicht so leicht zu bewerkstelligen war, da Prototype und jQuery einen ähnlichen Ansatz verfolgen und Prototype bereits mit WordPress ausgeliefert wird. Ich erhielt nach Umstellung folgenden Fehler:
$(document).ready is not a function
In der Mailing-Liste konnte ich dann nachlesen, dass sowohl Prototype als auch jQuery den $-Selektor für die DOM-Manipulation verwenden und es deshalb an Hand der Reihenfolge der JavaScript-Einbindung dazu bestimmt ist, welcher Selektor wie definiert ist. Ein Lösung stand hier (Einfach den $-Selektor durch jQuery erstzen).
jQuery(document).ready(function(){
//..
});
Das war dann auch der Punkt, an dem mir auffiel – ‘Hey, was machst Du denn hier…Du willst das zu ladende Volumen kürzen und baust mit jQuery eine neue Bibliothek ein?!” Kurzer Hand schaute ich mir also an, ob die durch moo.fx implementierten Teile nicht auch durch script.aculo.us abgebildet werden könnten. (Welches auch mit WordPress daherkommt). Und siehe da – ich hatte Glück (oder war es logische Konsequenz?!).
Den alten moo.fx-Accordion-Effekt der oberen Navigations-Leiste konnte ich durch eine einfache JavaScript-Anweisung:
javascript: Effect.toggle('morediv', 'blind');
ersetzen. Das ‘Scroll-Verhalten’ durch:
new Effect.ScrollTo('skipcontent');
Wie man sieht – nun wirklich nicht sehr schwierig.
Mittels dieser Umstellung konnte ich bereits einige Dateien entferne und das Ladevolumne verringern (allein duch das Entfernen der doppelten Prototype-Bibliothek). Einige Verbesserungen bezüglich der Ajax-Requests beim Suchen und Kommentieren habe ich noch vor – welchen ich mich jetzt gleich widmen werde.
Wen mal ein Vergleich der beiden Protagonisten Prototype und jQuery interessiert, dem sei dieser Link bzw. dieser ans Herz gelegt. Auffällig: Die Kombination aus Prototype und script.aculo.us verwendet 189.3 kB, während das wesentlich schlankere jQuery mit gerade 21 kB daherkommt…nunja, das WordPress die 189.3 kB bereits enthält, wären die 21 kB zusätzliche Last. Daher habe ich mich dagegen entschieden.
Bleibt abzuwarten, wie die WordPress-Entwickler weiter entscheiden und wann, trotz immer schneller werdenden Leitungen, dennoch versucht wird die Webseiten auf Ladevolumen und Anzeigegeschwindigkeit zu optimieren.