whow, was für ein Tipp!
Irgendwie an mir vorbeigegangen..
Danke +Frank Zimper, dass ich es bei Dir im Stream doch noch zu lesen bekam
JavaScript-Dateiaufrufe in WordPress um das defer Attribut ergänzen

Das defer Attribut [1] für JavaScript-Dateiaufrufe ist recht alt und wird von den meisten Browser zuverlässig unterstützt [2]. Kurz in Erinnerung gebracht: Standardmässig blockiert der Browser die Ausführung der Webseite bis die im Quelltext definierten JavaScript-Dateien vollständig angefordert sind. Aus diesem Grund hatte man angefangen, JavaScript-Dateien im Footer der Webseiten zu laden, um den Ladefluss restlicher Elemente nicht zu stören.

Nun, durch das Attribut defer können Skripte auch im Kopf einer Webseite platziert und angefordert werden. defer besagt: Fahre mit dem Laden weiterer Ressourcen fort und warte nicht auf die Fertigstellung der Skripte. Mehr Infos [3].

Je nach Theme kann es auch in WordPress vorkommen, dass im HTML-Head zig JavaScript-Dateien nacheinander geladen werden - das trägt der Blog-Performance nicht unbedingt bei: Ganz abgesehen davon, dass mehrere Dateien auch mehrere Anfragen zum Server bedeuten (Browser verfügen über eine beschränkte Anzahl an parallelen Requests zu einer Domain), wartet der Client mit der Ausführung der Webseite bis alle Skripte geladen sind. Erst dann wird weitergemacht. Schlauer wäre es, solche Aufrufe mit dem defer Attribut zu versehen, um die Ladezeit der Blogseite zu verkürzen.

Noch existiert in WordPress keine offizielle bzw. elegante Methode, das script HTML-Tag mit benutzerdefinierten Attributen zu versehen. In Tickets sind jedoch diverse Ansätze vorhanden [4], die hoffentlich bald Einzug in den finalen Source Code finden.

Als temporäre Lösung habe ich ein Modul [5] für das Toolbox-Plugin [6] verfasst, welches jeden JavaScript-Aufruf um das defer="defer" Attribut erweitert. Nach der Inbetriebnahme sieht man das Ergebnis ganz deutlich („Wasserfall“ in Firebug oder Developer Tools): der Browser wartet nicht länger auf das Laden der Skripte und macht mit dem Ladevorgang restlicher Ressourcen weiter.

[1] http://hacks.mozilla.org/2009/06/defer/
[2] http://caniuse.com/#search=defer
[3] http://www.golem.de/1009/78072.html
[4] http://core.trac.wordpress.org/search?q=defer+script&noquickjump=1&changeset=on&milestone=on&ticket=on
[5] https://gist.github.com/sergejmueller/5048250
[6] http://playground.ebiene.de/toolbox-wordpress-plugin/
Photo
Shared publiclyView activity