Artikel vom 9. Juni 2009

Performance in WordPress: Mehrfaches Laden von jQuery prüfen

Performance

Die hilfsbereite Community und die unendliche Anzahl an frei verfügbaren Plugins versehen WordPress mit Flügeln und sorgen für die permanent steigende Popularität der Software. Manch eine WordPress-Erweiterung bereichert den Blog nicht nur um brauchbare Funktionen, auch Sicherheitslücken und Performance-Einbußen werden mit ausgeliefert. Letztere können beispielsweise durch mehrfaches Laden von JavaScript-Bibliotheken innerhalb der Blogseiten entstehen.

Mehr Schaden als Nutzen
Je nach Alter des Plugins und Wissensstand des Entwicklers verrichtet eine WordPress-Anwendung ihre Arbeit mehr oder weniger effizient, zuverlässig und abgesichert. Die eventuell vorhandenen Sicherheitsbedenken einer Software sollen jedoch nicht das Thema des Artikels sein. Vielmehr liegt der Fokus auf der Belastung der Blogseiten durch die wiederholte Einbindung von JavaScript-Bibliotheken wie jQuery oder Prototype.

Plugins, die optische Änderungen am Layout der Seiten vornehmen, binden intensiv JavaScript-Frameworks zur Unterstützung ein. An sich nichts Neues: Man greift gerne und oft auf ausgereifte Funktionen innerhalb dieser Frameworks zu. Es wird jedoch schnell zum Problem, wenn jedes Plugin die vorausgesetzte bzw. verwendete Library in den Quelltext der aktuellen Webseite lädt: Je nach Anzahl der aktivierten Erweiterungen im Blog kann z.B. jQuery mehrmals von unterschiedlichen Quellen (extern und/oder intern) in den Code eingebunden werden, wobei eigentlich damit immer nur eine Bibliothek gemeint ist und eine Singe-Referenz ausreichen würde. Der Browser lädt jedoch alle Variationen brav runter. Fette Ladezeiten lassen grüßen.

Regeln finden, Regeln einhalten
Das WordPress-Entwicklerteam hält für solch unschöne Momente die Funktion wp_enqueue_script bereit, die beim Aufruf im Theme oder Plugin ausgiebig prüft, ob die Library mit übergebenem Namen bereits angefordert und ausgegeben wurde. Der in den Core integrierte Check stellt somit sicher, dass eine bestimmte JavaScript-Bibliothek pro Seite wirklich nur einmal geladen wird, jedoch von allen Plugins in Anspruch genommen werden kann. Dadurch reduziert sich nicht nur die Gesamtgröße einer Blogseite, auch die Anzahl der kostbaren Requests sinkt ungemein. Mehr Informationen zum angesprochenen WordPress-Funktionsaufruf geben Michael Preuß und Frank Bültge.

Resultierende Vorgehensweise
Ein Blick in den Browser-Quelltext verrät prompt, ob exemplarisch jQuery-Aufrufe dort zahlreich vertreten sind. In solchen Fällen bitte auf die neuste Version des verdächtigen Plugins aktualisieren und hoffen, der Fehler ist behoben. Andernfalls den Entwickler anschreiben und auf diesen Beitrag hinweisen.

Auswertung der deutschen Blogs
Um auf die akute Gefahr des Mehrfachladens hinzuweisen, wurden wiedermal 35.944 deutschsprachige Blogs auf die Anzahl der inkludierten jQuery-Frameworks in der Blog-Startseite untersucht. Nachfolgend die Ergebnisse, grafisch aufbereitet.

Anzahl der jQuery-Aufrufe innerhalb der Startseite
Anzahl der jQuery-Aufrufe innerhalb der Startseite

Nachgefragt
Hand aufs Herz: Wie oft war jQuery in euren Startseiten eingebunden? Ich kenne auch viele Plugins, die ein Framework wirklich in jede Blogseite setzen, brauchen tun sie es aber wirklich nur auf einer einzigen Seite wie zum Beispiel Kontakt.

Sergej Müller

[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.

Social Werkzeuge

13 Kommentare zum Artikel

417 Tage zuvor | #1 Sergej Müller

@Fabian
Genau, da müsste man als Entwickler sich irgendwie mit der Problematik auseinander setzen und sicherstellen, dass die notwendigen Frameworks nur da nachgeladen werden, wo die eigentliche Interaktivität zustande kommt. Bei meinem Plugin wpMAPS kann der Blogger in den Einstellungen die IDs der Seiten hinterlassen, wo Google Maps eingebunden werden – so lade ich notwendige Bibliotheken nur in diesen Blogseiten.

@ocean90
Richtig erkannt. Eigentlich kann die Abfrage auch innerhalb des Plugins geschehen, ein wenig mehr Effizienz kann der Software nicht schaden. Nicht gleich alles auf WordPress schieben und warten. Sonst wäre das Leben eines Entwicklers doch viel zu einfach und unspäktakulär ;)

Sergej
417 Tage zuvor | #2 Fabian

Ich habe gerade mal bei mir geschaut, wie das ist. Das einzige Plugin, dass jQuery benutzt ist meine Thickbox. Damit habe ich also kein Problem.
Aber du hast natürlich Recht, jQuery wird höchstens bei den Artikeln benötigt und trotzdem wird es schon beim Aufruf der Startseite geladen. Also wäre es sinnvoll nur beim Aufruf eines Artikels jQuery zu laden, wobei es doch eigentlich gecacht wird?
Dieses wp_enqueue_script ist für Entwickler gedacht, die damit sicher gehn, dass das Javascript-Framework nur einmal geladen wird? Das würde dann aber nicht das Problem lösen, dass das Framework auf allen Seiten geladen wird. Dann müsste man im Quellcode des Plugins nachschauen und mit den Conditional Tags arbeiten, oder sehe ich das falsch?

Gruß Fabian

Fabian
417 Tage zuvor | #3 ocean90

5 mal jQuery?! Und das dann auch noch umsonst, denn wenn jQuery ja mehrmals geladen wird, funktionieren die Effekte noch nichtmal mehr.

Wo du grad Kontakt sagst, fehlt mir direkt das Plugin Contact Form 7 ein, das lädt zum Beispiel die CSS und das JS auf jeder Seite.

Ich würde mir deshalb wünschen, dass wp_enqueue_script sowie wp_enqueue_style einen weiteren Parameter bekommen würden, mit welchem man definieren kann, auf welcher Seite es nun geladen werden soll. Ich glaub ich führe das mal im Trac auf, vielleicht kommts dann mit 2.9.

Gruß

ocean90
417 Tage zuvor | #4 Sergej Müller

Fabian,

das freut mich, wenn meine Artikel Früchte tragen ;) Pass aber beim nächsten Update des Plugins auf, dass die Änderung nicht überschrieben wird.

Sergej
417 Tage zuvor | #5 Fabian

So, dachte ich schreibe hier nochmal hin. Dein Beitrag hat mich dazu verleitet, mir mal das Thickbox-Plugin näher anzusehen. Der Autor hat die wp_enqueue_script-Funktion benutzt, jedoch läd er die Javascript- und CSS-Dateien auf jeder Seite. Bei mir ist es aber ausreichend, dass dies nur auf den Artikel-Seiten passiert. Ich habe es jetzt mit is_single() gelöst. Bisher scheint es da keine Probleme zu geben=)
Nochmal Danke für den Anreiz und die Info!

Fabian
417 Tage zuvor | #6 Sergej Müller

Tja, mein Vorschlag in solchen Fällen: Den Entwickler anschreiben und auf die Fehlfunktion hinweisen. Vielleicht können wir mit unserer Initiative etwas bewirken und auch WordPress-Erweiterungen werden zuverlässiger und fressen uns nicht die Performance der Blogseiten weg.

Sergej
417 Tage zuvor | #7 ocean90

Was ich noch anmerken will ist, dass das nicht nur im Frontend so ist, sondern auch im Backend werden allerhand Daten geladen, obwohl man sie auf dem Dashboard garnicht braucht.
Ich darf mir dann immer anhören, warum denn das Backend so langsam ist.

Als Ergänzung zu Fabian.
Sowas sind Conditional Tags und unsere Frank hat da mal eine schöne Übersicht zu gemacht, ich denke ich darf den Link hierein stellen?
http://bueltge.de/test/wp-conditional_tags/index.php

Gruß

ocean90
411 Tage zuvor | #8 Diablo

Ich habs für eine Artikelbewertung drin …. ob es immer so sinnvoll verwendet wird, weiß ich natürlich nicht.

Noch kann ich mich bei der Performance nicht beklagen.

Diablo
407 Tage zuvor | #9 Sergej Müller

Aber immerhin haben 75% den Fehler nicht gemacht ;)

Sergej
391 Tage zuvor | #10 Philip Hetjens

Ja, unsere blogs gehörten bis letzte Woche auch zu den Blogs, die jQuery zweimal geladen haben. Habe es aber selbst gemerkt (nach vermutlich 6 Monaten). ;-)

Philip Hetjens
383 Tage zuvor | #11 Stefan

Bei Top20 Plugins ist mir derartiges noch nicht aufgefallen. Wer gern mit gefährlichen Funktionen experimentiert, der sollte sich diesbezüglich eigentlich nicht wundern.

Stefan
379 Tage zuvor | #12 Diablo

Wäre mal eine nette langzeit-Studie, in wie weit sich die Plugins von WordPress qualitativ verbessern.

Diablo
26 Tage zuvor | #13 Matthias

Das ist ja erschreckend sowas zu lesen. Ich kämpfe auch grad mit meiner Ladezeit meines WordPress. Muss ich mal schauen, ob ich das gleiche Problem habe. Grüße

Matthias

2 Verlinkungen auf den Artikel

› Speicherverbrauch » 8°41' E 50°06' N

› Optimierung der Blog Ladezeit - Blog, Plug-ins, Datenbank, Bilde [...]

Kommentar verfassen