Optimize your WordPress page loading times with a simple tweak

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.

About this entry

You’re currently reading “Optimize your WordPress page loading times with a simple tweak,” an entry on Vladimir Prelovac site, published: Tuesday, December 2nd, 2008

Check more articles like this:

Or, browse the WordPress category.

Write a comment.

Get my newsletter, RSS feed or twitter.

About

Hi! My name is Vladimir Prelovac. I am a computer engineer by profession and an adventurer by state of mind.

Check out my current projects.

"I would love to change the world, I just don't have the source code yet."

clau 06.14.09 / 1am

Impressive. Im amazed O_O. I just installed the plugin and my page upload a LOT faster.

Thanks a lot for this plugin ;)

Martin Kopischke 01.24.09 / 12pm

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.

Anonymous 12.26.08 / 4am

Here we go!!!

Vladimir 12.10.08 / 10pm

Hah! I thought it would be hard to improve but that really is a great tip. Version 0.3 out :)

Hackadelic 12.10.08 / 2pm

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?

Jyri Väätäinen 12.03.08 / 10pm

I think, this plugin is very helpful.

Pyrmont 12.03.08 / 10am

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!

myter on Amazing Grace
(530 Comments)
Christopher on Low Bounce Rate WordPress Themes
(12 Comments)
Christopher on More links = less page rank?
(7 Comments)
Vanya on SEO Smart Links
(389 Comments)
asterisk.net.ru on WordPress Ping List
(103 Comments)

Optimize your WordPress page loading times with a simple tweak

About this entry

7 comments, newest first

Have your say, text or video

About

Browse

Work

Fun

Recently