How to Move JavaScripts to the Bottom or Footer in WordPress


How to Move JavaScripts to the Bottom or Footer in WordPress
Misty Rivera

How to properly add in javascript and css files into WordPress, either in the header or footer using the preferred WordPress method in the function.php file.

Want to improve your site speed and google page speed score? Here is how to move JavaScripts to the Bottom or footer in WordPress.

Speed Boost – How to Move JavaScripts to the Footer in WordPress
Ardith Hamm

// Begin Custom Scripting to Move JavaScript from the Head to the Footer

function 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’, ‘remove_head_scripts’ );

// END Custom Scripting to Move JavaScript

Move JavaScript to the Page Bottom in WordPress
Ruby Rodriquez

Steve Sonders outlines essential rules for speeding up websites on the front-end in his book High Performance Web Sites. He strongly advocates for developers to load JavaScript at the bottom of a page. When a website is loaded in a browser using HTTP, scripts don’t allow parallel downloads. This means that it may take 4 seconds to load a single JS file. Instead it’s best to load your CSS and images first, to avoid a flickr of un-styled content.

How to Move JavaScripts to the Bottom or Footer in WordPress
Darius Danner

JavaScript is a client side programming language. It is executed and run by a user’s web browser and not by your web server. When you put JavaScript at the top, browsers may execute or process the JavaScript before loading the rest of your page. When JavaScripts are moved to the bottom, your web server would quickly render the page and then the user’s browser would execute JavaScripts. Since all the server side rendering is already done, the JavaScript will load in the background making the overall load faster.

Leave a Reply

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