Get Our Latest Posts Sent Directly to Your Email Inbox!

How to Move JavaScripts to the Footer in WordPress – a Quick Fix

Level of Difficulty – [Easy]

IMPORTANT! Editing the Source Code of a WordPress theme could break your site if it’s not done correctly. If you are NOT comfortable doing this, please check with a developer before continuing.

JavaScript is a client based, dynamic computer programming language that is executed by your visitor’s browser.

It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

Example (one of many): Javascript can be used to enable a rollover image to appear when you mouse over an object.

How to Move JavaScripts to the Footer in WordPress - a Quick Fix

In this article, we are going to show you how to move JavaScripts from the <head> section to the <footer> section in WordPress.

This method will improve your loading times, reduce that chances of visual bottlenecks (keeping the visitor on your page), as well as give you better Google PageSpeed scores.

Rule #4 – Move JavaScripts to the Bottom of the Page

NOTE: this is a script that moves all of your JavaScripts to the <footer> at the same time (this script doesn’t allow you to pick & choose which ones to move).

AND, because all your JavaScripts move to the <footer>, this script will not work for every person’s WordPress site.

Let ME Explain…

Depending on the WordPress theme that you have, and the functions that you have enabled for your site, will determine whether this method will work or not.

Example: Some themes have a slideshow on their page which may require jQuery and JavaScript to load in the <head> section.

The only thing that you can do is to try following the instructions below to move your JavaScript to the footer, then test your site for functionality.

If this method doesn’t work, you will have to move your WordPress JavaScripts to the footer, following the article, ‘Combining JavaScripts into 1 or 2 Files‘.

Combining JavaScript Files, will not only combine the scripts into fewer files, but if your site requires certain scripts to function properly, you will be able to leave those jQuery and JavaScripts that are required for your site, in the <head> section, and move the remainder to the <footer>.

A Word About JavaScripts

JavaScripts are known as Render Blocking files.

The best place to put scripts are at the bottom of the page. This will keep the page content from being blocked from rendering… this will allow the viewable components in the page to be downloaded as early as possible.

Moving the JavaScript files to the bottom of the page will allow progressive rendering. Simply stated – the page will appear in front of the visitor’s eyes, even if the files haven’t fully loaded in the background.

If scripts are put at the top of the page, as they usually are, everything in the page that is below the scripts (the entire contents on the page), are blocked from downloading until the script is loaded.

If there is a delay for the retrieval of a JavaScript file, the remainder of the site will have to wait until it is complete.

To hammer it home with redundancy… if there is any JavaScript delay from a file within the <head> section, you will not see the other components such as images, content, videos or even your sidebar, until the delay has passed.

The best way to demonstrate this issue is by using an example with the script in the middle of the page.

Here is a great example by the Website Performance Guru, Steve Souders… the author of “High Performance Web Sites” ~ Steve Souders

http://stevesouders.com/hpws/js-middle.php

On this page, Steve has programmed his script to take 10 seconds to load, so it’s easy to see the negative affect if there was a high-traffic or network bottleneck during the loading of the JavaScript, if it was above content or images.

Overloading of Your WordPress Site with Render-Blocking JavaScript

Have you ever wondered why your WordPress-based web site seemed to get slower and slower to load over time, as if the fiber-optic network lines were soaked in molasses?

You probably didn’t think about it, or know about it at the time, but the more plugins and widgets you added to your WordPress site, to create the dynamic look and feel, the greater delay you saw for your loading times.

WordPress plugins require, in most cases, styling and function… the function part of the plugin is the JavaScript file.

It’s unfortunate, but many of the creator’s of the WordPress plugins usually make it to where the JavaScript files are called (loaded) in the Head section of your web site page.

JavaScript Files Block Downloads – SO, Let’s Get Them Moved!

How to Move JavaScript to the Footer in WordPress.

Below you will find a brilliantly written piece of scripting, which will tell the JavaScript that their reservations have been cancelled, and it’s time to rebook them on an all-expense-paid journey to the footer of your site.

Tech Talk – The code will de-register the call for the JavaScript to load in the <head> section of the site and re-register it to make a move to the <footer>.

All you will need to do is add the code to your ‘functions.php‘ file located within your WordPress theme.

Pretty Simple, Huh?

– – – –

The next step will require you to have access to the files for your WordPress blog to locate the ‘functions.php’ file.

You will find the functions.php file located within your Theme’s root directory, meaning as soon as you click on your theme’s name it will be there, you will just need to scroll down until you find it.

Directions if your site is controlled using cPanel:

Log in to your cPanel, go to your ‘File Manager’ link (under ‘Files’), open the ‘File Manager’, click on the folder that contains your WordPress site, whether it’s ‘Public_html’, ‘www’ or another name.

Once you opened up that folder, follow the path – click on the folder named ‘wp-content’, then the ‘themes’ folder, then your theme’s ‘name’ to open all the folders and files.

Scroll down until you see the ‘functions.php’ file – single click on functions.php to highlight it, then click on ‘Edit’ from above all the files, then add the scripting below.

– – – –

To grab a copy of the scripting, just hover your mouse over the box below, then click on the ‘double page’ icon.

Either right click your mouse and copy the code, or press Ctrl + C on your keyboard, then Ctrl + V to paste into the functions.php file.

Instructions for adding the scripting to your ‘functions.php; file.

Once you have your functions.php file open and ready to add the script, scroll to the end of the file… this is where you can safely place the script from above.

NOTE: If your functions.php file ends with the ?> (shown in the image below), put the scripting just before it… you can create some space by placing your cursor above the ?> and hit the enter key on your keyboard.

If your file does not contain this ‘question mark’ and ‘greater-than’ bracket, don’t worry about it, your theme was designed to work that way.

Paste the code after any existing scripting on the page as shown below.

functions.php file

Click ‘SAVE CHANGES’… now test your site for functionality.

If everything works like it should, GREAT, if it doesn’t, remove the script and click Save Changes again.

If you have tested your site and it all looks good, there is one more test.

Test your site to make sure it will function properly for mobile devices… go to the following Mobile testing website to make sure your menu works properly.

NOTE: If your site just doesn’t look right… meaning the layout is all screwed up, then most likely your site doesn’t have a ‘Mobile Responsive’ theme, meaning your theme is not designed to work with mobile devices.

The reason I am bringing this up is because, moving scripts to the footer will have nothing to do with the layout part of your website… you just don’t have a WordPress theme that is mobile friendly.

If everything still functions properly, Awesome! If not, remove the script and click Save Changes again.

To Repeat – If the method didn’t work for your site, the alternative is to move your WordPress JavaScripts to the footer, using the article, ‘Combining JavaScripts into 1 or 2 Files‘.

NOTE: Unfortunately, this method is much more time consuming and more difficult, but I guess it depends on your determination.

If it worked… move on…

Click on any Image Below to Make it Larger…

A Screenshot Before the Code Was Added – Showing JavaScript in the Header

Screenshot After the Code Was Added – JavaScript No Longer in the Header

Notice how the two pink lines meet? JavaScript removed from the head section.

Screenshot with JavaScript Moved to the Footer of the Site

You’ll notice all the yellow from the head section screenshot above have been moved to the bottom to join their brother’s (JavaScript) already there.

Closing Comments – Move JavaScript to the Footer in WordPress

Instead of your page going through the process of loading JavaScripts before the important parts of the page, content and images, they will now load after these components giving the page an appearance of loading much faster, right in front of the visitor’s eyes.

The appearance is that the whole page has loaded fast, even though the JavaScript could still be loading in the background.

Moving the JavaScript files to the bottom of the page will not only give your visitor’s a better user-experience, but it will encourage them on to come back for more, as long is your content gives them value and the solution they desire.

This experience will improve your bounce rate and speed scores with the almighty search engine Google, now that search engines are paying strict attention to your page’s speed knowing, that it will give a good user-experience.

Meaning… websites that load faster will appear more prominently in search engine results.

In Future Articles – We will be discussing the Remaining Steps in greater detail, so be sure to put your email address in the box below for notification.
YOUR Turn… Have You Run Your Site Through Steve Souder’s Delayed Scripting Page to See the Effect? Come Back and Share YOUR Thoughts Below!

Tags:

Comments (12)

Trackback URL | Comments RSS Feed

  1. thank you very much for this clear n crisp description, it helped me successfully in moving javascripts from the header to the footer of my site.

    • John Edwards says:

      Hey Neelabh,

      I’m glad to hear that you were successful moving your JavaScript files to the footer…

      Thank You for letting me know that all went well.

      John

  2. Júlio says:

    Great!

    And css ?

    🙂

    • John Edwards says:

      Hey Julio,

      CSS files are usually the first files loaded into your browser because those files are the look and feel of your website… in a nutshell, you do not want them in the footer.

      John

  3. Lisa says:

    How can I modify the code to exclude certain scripts? This script works amazingly, but then my sliders (I use MasterSlider) quit working.

    Thanks!

    • John Edwards says:

      Hey Lisa,

      Sorry for the late response…

      Unfortunately, one of the only alternatives to get your JavaScript’s to the footer is much more lengthy and challenging, but you are welcome to give it a go… it is the article: http://speedrak.com/blog/how-to-combine-javascripts-into-1-file/

      Something else that can help, which you probably already thought of, is to deactivate each and every plugin and widget that is not absolutely crucial for your business/website, etc… following this 1 simple rule will improve your site’s speed. You can read more at: http://speedrak.com/blog/reduce-http-requests-increase-site-speed/

      A 3rd alternative, which can help, would be your web hosting. Getting away from cheap, shared hosting would be a big plus. And, depending on where your audience is throughout the world, a Content Delivery Network (CDN) would definitely boost your website speed, especially for your visitors.

      If you are not familiar with a CDN, it is a network of servers that are geographically placed throughout the world that store (cache) content such as images, CSS stylesheets and JavaScript files… these files are responsible for creating the look and feel of your website. You can read more about the CDN at: http://speedrak.com/blog/why-use-a-content-delivery-network-cdn/

      I hope this helps… Let me know if you have any more questions.

      John

  4. Bora says:

    Hi John,
    I had been looking forward a solution for this for a long time and the functions method made it possible for me. Thanks for the code. Subscribed to your feeds and bookmarked to come back again.
    Bora

    • John Edwards says:

      Hey Bora,

      I’m glad it worked for your website… with today’s dynamic websites, it doesn’t always function for those with slideshows, etc. on their site.

      Don’t hesitate to stop by anytime…

      John Edwards

  5. Edmond says:

    thanks, works great!
    what about something similar for css files?
    I know its not good to move styles from header,
    but anyway would be nice to have an codes for that, to test something.

    thanks much

    • John Edwards says:

      Hey Edmond,

      The following script below would DeRegister your CSS files, which would make these CSS files no longer show up in your Head section… as you say, for testing purposes.

      You can add this script to your functions.php file… the information shown below, example ‘wp-pagenavi’ (shown in BOLD) comes from the line in your CSS file as example below (you don’t need to put the -css that is after the “wp-pagenavi,” or other CSS files, in your DeRegister script.

      <link rel=’stylesheet’ id=’wp-pagenavi-css’ href=’http://cdn.ebodybyvi.com/wp-content/themes/ebodybyvi/pagenavi-css.css’ type=’text/css’ media=’all’ />

      // Disable CSS Site-Wide Using CSS Script Handle

      add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

      function my_deregister_styles() {
      wp_deregister_style( ‘wp-pagenavi’ );
      wp_deregister_style( ‘jetpack-top-posts-widget’ );
      wp_deregister_style( ‘yarppWidgetCss’ );
      }

  6. Sam says:

    Hi,

    Works like a charm however the files are not being served from the CDN anymore. How to go about this?

    Thanks so much

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend