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.


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

9 Comments

  1. Oct 6th, 2009 4:45 AM

    This is great! It really makes my site appear to load faster. I love it.

  2. Sep 15th, 2009 3:53 PM

    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

  3. clau
    Jun 14th, 2009 1:23 AM

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

    Thanks a lot for this plugin ;)

  4. Martin Kopischke
    Jan 24th, 2009 12:40 PM

    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.

  5. Dec 26th, 2008 4:10 AM

    Here we go!!!

  6. Dec 10th, 2008 10:20 PM

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

  7. Dec 10th, 2008 2:51 PM

    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?

  8. Dec 3rd, 2008 10:11 PM

    I think, this plugin is very helpful.

  9. Dec 3rd, 2008 10:59 AM

    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!