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.

5 Responses to “Optimize your WordPress page loading times with a simple tweak”

  1. Gravatar

    Here we go!!!

  2. Gravatar

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

  3. Gravatar

    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?

  4. Gravatar

    I think, this plugin is very helpful.

  5. Gravatar

    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!

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">