Move JavaScript to Footer in WordPress (Improve First Contentful Paint)

Moving JavaScript to footer or eliminate render-blocking JavaScript in above-the-fold content help your website load faster (Improve First Contentful Paint)

Why JavaScript should be moved to footer?

Moving JavaScript (JS) will help you reduce loading time with First Paint (FP) or First Contentful Paint (FCP) of PageSpeed Insights. So it will improve your website’s loading speed and bring benefits to SEO. This is obvious, website’s content does not load until JavaScript and CSS files finish loading. Though this is just a warning, fixing this error helps your website to load faster.

To fix this error, you just need to move JavaScript load at the end (footer) or load in the asynchronous way ((Eliminate render-blocking JavaScript in above-the-fold content)). Moving JS to footer helps your blog/website to operate more stably, while JS still loads at the end of the process. It’s different from the asynchronous technique (JS files can be put at header but is delayed, can only be loaded until other parts complete loading, which results in errors in async non-supporting browsers). Therefore it helps the website to display words (content) first then continue to load JavaScript. Your page appearing blank will be avoided after loading process (above-the-fold content), making people feel it loads faster.

Below is our instructions of how to move JavaScript to footer in WordPress.

Move JS to footer without plugin (using code snippets)

To do this you need to add this code to the end of the file of functions.php (wp-content/themes/your-theme/):

function oiw_remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);

add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'oiw_remove_head_scripts' );

Then you Save and re-upload file. Then loading again your page and view page source (Ctrl +U with Window OS) to check it.

Move JS to footer with plugin

If you like using plugin then you can find and use the plugin of Scripts To Footer to do this. With just some simple steps, you can move JS file to footer.

Bonus tip (Asynchronous loading JavaScript using async and defer)

If you use the asynchronous resource loading method (async and defer) then you don’t need to move JS to footer anymore.

The async property of JavaScript allows you to load JS  resources asynchronously. HTML content will be kept on loading without having to wait for CSS resources.

Using property of async :

<script async type="text/javascript" src="yourjs.js"></script>

defer property of JavaScript allows you to delay loading JS’s resources until HTML content finishes loading. JavaScript’s resources will load after all of the contents of HTML finish loading. Use defer property as below:

<script defer type="text/javascript" src=" yourjs.js"></script>

Although this method helps your website’s content display in the fastest way, there is a disadvantage: if you have no idea how JavaScript works, the above method isn’t safe and ideal at all. Because this is an asynchronous method, it can lead to the website not working properly.

Note: For old browsers, you can combine async and defer while loading script to avoid the browser not recognizing async property. If you decide to use async property then add defer.

We hope the article helps you somehow figure out the problem of render-blocking. Note that, speed is just a small thing; therefore it is unessential to sacrifice everything for it, including website’s functions for speed. If render-blocking warning still exists on Google, don’t worry about it anymore because you already optimize it to the fullest.