Add Snippet To Project
Every millisecond counts when you’re trying to keep your website running at optimum speed. A strategy that can help your site load faster is loading jQuery in your website’s footer to ensure it doesn’t block the rest of your page from loading. If you’re using WordPress and would like to take advantage of this concept to improve your website’s loading speed, you’ve come to the right place. In this article, we’ll be tackling how to correctly load jQuery in the footer of your website.
function wpturbo_load_jquery_in_footer() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'wpturbo_load_jquery_in_footer');
The provided code snippet describes a method to load the jQuery library in the footer of your WordPress site, rather than its default placement in the header. This helps in improving front-end load times as the browser would not need to load the jQuery library before the rest of your site’s content is fully loaded.
Let’s break the function named wpturbo_load_jquery_in_footer() down. This function executes some code if the current request is not for an admin page. This is determined by the use of the !is_admin() conditional statement. The ! negation character flips the Boolean response from is_admin(). Hence if the current request is not for an admin page, the rest of the code is executed.
The code block contains three functions which work in tandem:
-
wp_deregister_script('jquery');– This function removes the jQuery script from the set of known script handles in WordPress. ‘jquery’ is the handle that WordPress uses in its internal script registration system. By deregistering it, we are essentially disconnecting the old link to the jQuery script. -
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);– This function is used to register the jQuery script back within WordPress script registration. The main difference here with the previous registration is the last parameter which is set totrue. This parameter signifies to WordPress whether the script is to be loaded in the footer (true) or in the header (false). In this case, it is set totrue, hence the jQuery script is set to load in the footer of your web pages. -
wp_enqueue_script('jquery');– The enqueue function is then used to link the jQuery script. The enqueue operation is performed after the script registration to ensure proper loading and order of scripts. The handle ‘jquery’ is used to indicate that this is the script we would like to load.
Finally, this custom function is attached to the ‘init’ WordPress action hook using the add_action() function. The ‘init’ hook is run after WordPress has finished loading but before any headers are sent. This enables the loading of jQuery to be reconfigured before any HTML layout is sent for rendering. This ensures that the jQuery script is correctly positioned in the footer when the page layout is being rendered.