I have recently enchanced my WordPress optimization guide with seven new tips and one of them includes moving your JavaScripts to footer of the page when possible. Why is this important?
When the browser loads the page, it loads the files as they appear meaning, your html, then css, images etc. If the javascript code is in the header, they will load before any of the other files listed below them. Since most JavaScript code is ready to execute only when the page is fully loaded, it makes sense to move all JavaScript code to the footer.
The page will load in similar amount of time, but the user will have the impressions of the page loading faster as all relevant visual elements are loaded first.
This practice is also confirmed by Yahoo Extreme Web Performance team.
So what I did is I created a plugin that will move all the properly configured JavaScript code to the footer.
Here is the link to the plugin page: Footer JavaScript WordPress plugin.
Continue reading:
- JavaScript to Footer
- 5 cool WordPress plugins you never heard about
- Optimize WordPress page loading time with PHP Speedy and WP Super Cache
Posted in: WordPress
TAGS:optimize wordpress, preloader implement wordpress, preloader wordpress, wordpress footer blogroll, wordpress footer javascript, wordpress javascript optimize, wordpress load order, wordpress optimization, wordpress page load time, wordpress page load times, wordpress page loading time, wordpress plugin load order, wordpress preloader, wordpress wp_head optimization, wordpress wp_head optimizing, wp_head plugin order
Hi! My name is Vladimir Prelovac. I am a computer engineer by profession and an adventurer by state of mind.
9 Comments
This is great! It really makes my site appear to load faster. I love it.
Great Job. I just wrote an article on wordpress optimization. I'll try this out later tonight and probably add it to the article. Thanks a bunch. Your thoughts on the article would be great : http://codytaylor.org/2009/09/optimize-wordpress.html
Impressive. Im amazed O_O. I just installed the plugin and my page upload a LOT faster.
Thanks a lot for this plugin ;)
Hello Vladimir, first and foremost thank you so much for this plugin. Despite all tweaking, my WP setup felt unbelievably sluggish, and moving the JS to the footer solved that nicely. As you rightly state, it doesn’t make WP faster, but it sure does make it feel a helluva faster.
One question: would it be possible to implement an exception list? I have one plugin (the wonderful slimbox 2) that I would like to preload, because I want slimbox effects to appear as soon as the user is able to click on a (now so quickly appearing ;) ) picture… That kind of exception list might also help solve incompatibilities with other plugins.
Here we go!!!
Hah! I thought it would be hard to improve but that really is a great tip. Version 0.3 out :)
Hi,
simple, but effective - just how I like it. :)
One hint though:
Plugins which inject their own JS code into the footer (ex. JS-based syntax highlighters), rely on their JS files being loaded already (which is normally the case with wp_print_scripts during wp_head). Hence, they add their wp_footer action at the default priority of 10. Depending on loading order, they may stop working after this plugin is activated - as just happened to me right now.
While this can be resolved by lowering each of those plugin's action priority, I thought it'd more appropriate to raise THIS plugin's priority. In my case, it works fine at priority 5.
What do you think? Any alternative solutions?
I think, this plugin is very helpful.
Mate, I have just discovered your site, and am very impressed with the Awesome practical plugins that you have developed and given back to the community for free. Thank You!