Automatically Preloading JavaScript Assets in WordPress


(Alex MacArthur) #1

I just wrote on improving WordPress front end performance through automatically preloading JavaScript assets that are enqueued in the footer. Saw some pretty significant results in applications that run several scripts enqueued by multiple different plugins. Hope it helps someone out! Thinking about pluginizing it if there’s enough interest.


Introducing Better Resource Hints, a Performance-Enhancing Plugin for WordPress
(Leland Fiegel) #2

Interesting. Thanks for sharing!


(Hudson Atwell) #3

Thanks and shared!

First time hearing about rel=preload. Sometimes jQuery script is inlined in the dom when jQuery is being loaded in the footer. The rel=preload could keep footer asset loading in play while making sure inline JS has it’s dependencies met.


(Alex MacArthur) #4

Thanks, I appreciate that! Yes, it has some nice advantages over using other tricks like applying an asyn attribute to a script. One downside is that browser support isn’t as great as it could be, but thankfully, there’s no negative consequence to using it for JS anyway. If preloading isn’t supported, it’s just skipped over and nothing breaks.


(Kenneth Guintz) #5

Played around with the code on the dashboard and modified it a bit(yes i know it is not recommended just did it for fun). tested it on the landing pages of the wordpress admin.with only 2 active widgets. it does help. then i realize that the dashboard in of it self is really slow because of a lot of factors. dashboard discussion aside rel=preload + defer is better than async + defer. Screenshot_154


(Alex MacArthur) #6

Yes! And it’s worth noting that preloading, async, and defer are all different mechanisms meant for different purposes. Glad to see browser support is good and growing for all of these tactics.


(Kenneth Guintz) #7

Ive made some adjustments on the experiment and added the use of filamentgroup’s loadCSS as well as ive extracted the critical css and loaded it as first the first stylesheet. preloading javascript assets when used with preloaded css just improves your site’s performance overall. granted the current dashboard im using right now has a lot of more javascript and custom css on it
Screenshot_281


(Alex MacArthur) #8

Yes! I actually included loadCSS and CSS preloading in my plugin Better Resource Hints, along with preloading, prefetching, and preconnecting. For the front end, it’s a quick way to implement all of these enhancements on your site without bootstrapping it all yourself: