BLOG

How to Move JavaScript to the Footer in WordPress

JavaScript is a programming language that is run by the web browser of site visitors. Instead of your web server running JavaScript, it is controlled by anyone who visits your site. When it is added to your site at the top or header, it can significantly slow down your loading time. Here is how you Move JavaScript to the footer in WordPress helps to improve load time as well as Google page speed scores.How to Move JavaScript to the Footer in WordPress, is very easy, please keep reading.
Move JavaScript to the footer in WordPress
 
Instead of JavaScript being processed before the page loads as it happens when it is placed at the top of the page, it will load after the page has loaded when you keep it at the bottom. Since the server side rendering has been completed before JavaScript loads, the entire page will load much faster when it is placed at the footer.
 
Normally, whenever a user’s browser detects a script in the code of your site, it will not allow any other content to be loaded until that script has finished loading. Many site owners have experienced slower load times because they integrate their JavaScript at the top of the page. Moving all of those scripts to the bottom of the page is much better and because WordPress hosting began supporting footer scripts after its release of 2.8, it is much easier to implement those scripts at the bottom where they belong.
 

Moving them to the bottom of the page not only allows your users to have a more positive experience on your site, it helps to improve speed scores when your site is tested by Yslow or Google. Search engines are now paying strict attention to page speed as one of the important performance matrices for websites. When your site loads slow due to JavaScript loading at the top of the page, you are not getting the speed score that you want.

 

WordPress itself is one of the most trusted and preferred CMS’s in the industry. It offers a powerful en queuing system that will allow you to easily add scripts in your queue and then load them as you need them. In order to give you a better example, imagine that you are adding a JavaScript into your WP theme.

 

First, you have to save that script as a .js file. That file should be placed in the js directory for your theme. If your specific theme does not have a .js (JavaScript) directory, you will need to create one which is relatively quick and easy. Once you have placed the script file into the directory, you have to edit the functions.php file for the theme. Next, add the following code:
 

function wpb_adding_scripts() {wp_register_script(‘my-new-script’); wp_en queue_script(‘my-new-script’);} add_action(‘wp_en queue_scripts’, ‘wpb_adding_scripts’);

 
The code above uses wp_register_script() functions. The function has these parameters:

?php wp_register_script( $handle, $src, $deps, $ver, $in_footer );?

 

In order to add the JavaScript to the bottom of your WordPress page, you just have to set the $in_footer parameter to true.

 

The get_template_directory_uri() function will return the URL for your template directory. This should be used for your en queuing and for registering your scripts and styles in your WordPress themes. If you are using plugins, you will need to use the plugins_url() function.

 

Note that some WordPress plugins will have their own JavaScript pages to add. If you want to move those specific scripts to the footer, you will have to first edit the plugin files in question so that you can make the move.

 

You will want to open the site in your browser and view the page source to see the link to the JavaScript files. The origin of the files and the location should be shown. If you see JavaScript added directly to the page, one that is not linked through its own .js file, you will want to deactivate all plugins and then refresh the page, maybe repeatedly until you find which one is adding the scripts to the page. If this does not solve the problem, you may need to switch to a different theme to see if that works. Sometimes the JavaScript is added by the theme itself.Move JavaScript to the footer in WordPress is very simple as you can see.

 

When you find the plugin or the theme that is adding the script, you have to find out where the call for the plugin file is located. If it is using en queuing to add the file, you will simply have to change the wp_register_script function or just add true for your $in_footer parameter.

 

You should understand that anytime you make changes to core files and/or update plugins, changes are not overridden. You may want to simply de-register the script in question. You can then register it again from the functions.php file for your theme. We hope you have learned how to Move JavaScript to the footer in WordPress.

Leave a Reply

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

  • business
  • blogger
  • lifehack
Unlimited Disk Space
Unlimited Bandwidth
Free Domain Name