How To Move JavaScript To The Footer of Your WordPress Site
March 27th, 2018 | by Ravi Chahar || 9 Comments |
JavaScript is a scripting language which works when the user opens the website. It’s a client-side language. To build a website, you may in need to use it.
In every WordPress theme, there are a few JavaScript files. Most of the files are added in the header of the website. What would you do to move JavaScript to the footer of your website?
Before you go further, you must know how to include a Javascript file in WordPress theme.
Why do you want to move the files to the bottom of your website? Do you know the reason?
The Biggest Benefit of Moving The JavaScript File to The Bottom
When any user opens your website then all the JavaScript files get downloaded by the web browser to show the proper working of the website.
But if you have the files in the header then the browser would take more time.
To increase the speed of your website, you should move JavaScript in the footer of your WordPress theme.
The user won’t even notice the loading process of the files because the website will be appearing to the user.
How Would You Add JavaScript In The Footer
When you add the JavaScript file in your WordPress theme then you use a WordPress function. That function consists many parameters.
Let me show you.
In this function, the values to the parameter should pass.
$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 :- This is the final and the most important part of the code. By default, it’s “false”.
But if you want to move JavaScript to the footer then just set this value to “true” and you’re done.
Let me show an example of the code.
function your_script_file() {
wp_enqueue ( ‘script’, get_template_directory_uri() . ‘/Js/script.js’ , ” , ‘1.0’, true );
}
add_filter ( ‘wp_enqueue_scripts’, ‘your_script_file’ );
This code will add the JavaScript file of the name “script.js” located in the “Js” folder of your theme in the footer.
As the value of “$in_footer” is set to “true” so the file will move to the bottom of your WordPress theme.
You have successfully moved the JavaScript file of your theme in the footer area. If you check the source code of your website then the file would have shifted to the bottom.
Can You Now Move JavaScript To The Footer
As you know, it’s important to have the minimum page loading time. It’s recommended to keep the page loading under 3 seconds.
If you have the JavaScript files in the header area, the web browser will take much time to load your website. So, it’s better to move JavaScript to the footer area.
You just have to find the code which adds the JavaScript file and set the value of the parameter to “true”.
Hey Ravi,
Just in time when I was looking for the exact same thing to help speed up my site. I was wondering if it’d be better to use Better WordPress Minify for moving both JS and CSS files?
I am non-techy to even dare work on the “editor”. Do you think that’s a better idea?
Ash
Hi Ash,
It’s important to have a little of knowledge about the WordPress functions so that you can find the right code in your theme file. Every developer has something different to add.
Just find the similar code shown above and replace the value.
~Ravi
Hi Ravi,
It’s been long since I last landed here ? How are you?
I love the tutorial you treated today. However, is there a way to move all javascript to the footer with one nice stroke of modification/code?
I’ll sincerely appreciate your thoughts on this.
Make the day great!
Always,
Akaahan Terungwa
Hey Akaahan,
Glad to see you.:)
Yeah, you can add more than one JavaScript files in the footer. As I have mentioned in the tutorial, you just have to manage the code to get repeated for each file in the same function.
~Ravi
Thank you ? You’re very kind, Ravi.
Enjoy the day!
Always,
Terungwa
Great tutorial as always, Ravi. I didn’t realize having that Javascript in the header could slow the page loading. Might have to get moving mine. Thanks for sharing this!
B
Hi Ravi,
You are my new best friend! ? Thank you for showing us how to do this! I’ve been trying to speed up Not Now Mom’s Busy but I’m too intimidated to try to fix it without a guide. This is going to work perfectly.
Now all I need is to find the time to do this. ?
Passing this one along for sure. Hope you’re having a great day!
Cori
Hey Cori,
Coding always seems to be intimidating but once you learn it, everything seems to be really easy. This is another way to improve a website’s performance.
Glad you liked it.
Thanks for stopping by.
~Ravi
Hi Ravi,
Another informative post from you. Great. Page speed is important for any website to get more visitors. I too facing speed issues regarding javascript & definitely, I will follow your guidance. It’s really helpful.
Thank you,