How to Move WordPress Theme's JavaScript to the Footer for Better Performance

Now and then you may hear the complaint about the poor page loading time. Most of the WordPress users are facing this problem.

Even after applying the general tips and tricks, the website speed doesn’t improve. It’s because the non-techie people have no idea about the things getting loaded in the background.
Whenever you choose a WordPress theme, it’s always said to test it on a local environment. It’s because not every theme is optimized for speed.

If you’re a coder, you may know that JavaScript is a scripting language and for a WordPress website, it’s a client-side language.

In this tutorial, you are going to learn about moving the JavaScript files of your WordPress theme to the footer of the website.

Now you may be wondering as if what will be the benefit. Well, when the users load a website, the browser starts loading the images, CSS file, JavaScript files, and much more.

But if you move JavaScript to the footer, the user won’t even notice anything because most of the things handled by JavaScript are in use once the website is wholly opened.

So, the JavaScript files will get loaded in the background, and the users will see your website before it used to.

It directly helps you increase the website’s speed. User experience is always the first thing to focus on, and you know that no one likes to wait for a site to get loaded if it’s slow.

So today, I am going to walk you through a simple process which can help you.

Understand the Concept of JavaScript WordPress Theme Codex

To make any changes, first of all, you should know which code controls this file and where can you find it.

If you know a little bit about WordPress Themes, you may already know that the functions.php file is one of the most important files.

Even if you’re a non-techie person, you may have heard about this file. If not, don’t worry, I am going to help you locate it.

Follow these steps.

Step 1

Step 2

A new page will get opened where you will see the codes. But you have to find the functions.php file. Just have a look at the right-side menu.

Search for Theme Functions(functions.php) and click on the that.

Step 3:- Once you do that, you will be able to see many functions which control the working of your WordPress theme or you can say the functions of your website.

You have to find a function which is used to add the scripting files.

Search for “wp_enqueue_script”.

Now is the time to explain about this Codex. Many parameters can be passed to this.

wp_enqueue_script ( $handle, $src, $deps, $ver, $in_footer );

$handle :- It’s the name of the file.
$src :- Address or path of the file.
$deps:- It’s an array to handle the script.
$ver :- It’s the version of the file.
$in_footer :- By default, it’s set to “False”.

So if you change the final parameter to “True”, the JavaScript file will get moved to the footer.

Isn’t that easy?

It’s possible that the theme developer has enqueued many JavaScript files.

Note: Don’t make any changes if you’re not aware of the theme codex.

Let me show you an example of the complete functions.

function the_script_file() {
wp_enqueue_script ( 'script', get_template_directory_uri() . '/Js/script.js' , " , '1.0', true );
}
add_filter ( 'wp_enqueue_scripts', 'the_script_file' );

Every WordPress theme developer has a different coding style so the functions will be different.

The important thing is to find the “wp_enqueue_script” Codex and set the value of $in_footer to “True”.

Once you do that, save the file and you can check the source code of your website.

The JavaScript file will be moved to its footer.

I Hope You Can Find the functions.php File

If you don’t see the Editor option in your WordPress dashboard, you have to access this file from the cPanel of your website.

Can You Change the Required Code from Your WordPress Admin Panel

I have mentioned the easiest way to edit the functions.php file. Even a beginner can do this. You only need to find the scripting WordPress Codex and change the parameter.

I know you may be wondering as if what’s the easiest way than this. Well, if you’re afraid to make this change, you can ask your techie friend to do this for you.

Note: I would like to mention that before you make any changes, you should backup your website and its database.

Most of the people forget to do it and break their website. You shouldn’t take any kind of risk. As I have already mentioned, the functions.php file is one of the most important files so it should be handled with care.

If you add something else, it will stop a few functions of your website. It will break the layout of the website. It’s better to be safe than sorry.