Move jQuery to footer in WordPress

Moving jQuery to the footer in WordPress eliminates render-blocking resources, as advised by Google PageSpeed Insights.

In this article, let’s examine the way of moving jQuery to the footer to remove render-blocking resources on a WordPress website.

Default jQuery scripts in WordPress

By default, the platform loads the jquery.js and jquery-migrate.min.js files in the head of a WordPress website.

In many cases, it is a good idea to place all your scripts at the end of the page. This prevents the whole page from being delayed.

Why WordPress loads jQuery scripts header

This practice of inserting scripts at the bottom of the page has appeared only a few years ago. WordPress has started to load these files in the header before this practice became popular.

Many plugins and themes use jQuery as a dependency for providing additional functionality. They expect these jQuery files to be in the head of your WordPress site.

Moving jQuery scripts to the footer must be done with caution. If the theme’s or plugin’s scripts are placed before jQuery, they won’t work. Also, this can cause JavaScript issues on the website.

Therefore, it is very crucial to check your WordPress theme and plugins before doing so.

At Themes Harbor, we rewrote our professional WordPress themes to eliminate reliance on jQuery a long time ago. Thus, it allows to move jQuery without encountering any dependency issues.

If you do not know how to check your theme regarding jQuery dependency then contact the author(s) of your plugin(s) and the theme for more information about jQuery dependency.

How to move jQuery script to footer

Once you’ve verified that moving jQuery from the header to the footer in your site won’t cause any issues, you can proceed with enqueueing it at the bottom of the page.

Here is a code snippet to move jQuery to the footer in WordPress:

function mytheme_move_jquery_to_footer() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'mytheme_move_jquery_to_footer' );

There are several ways to include this code on your site. Use a functions.php file located in the child theme or a specialized plugin to add code snippets in WordPress.

Note, there might be some plugins that can override your rule of moving jQuery to the footer section.