Move Wordpress native javascript to bottom of page?

Question

Checking my page in google page speed insights, it complains that there are some javascript that is blocking the rest of the page from loading. The javascript in question is native Wordpress scripts

…-includes/js/jquery/jquery.js?ver=1.11.2

…s/jquery/jquery-migrate.min.js?ver=1.2.1

How do I get these files to the bottom of the page instead and speed up my loading?

Do I need to deregister them and re-register them, or any other way? Even better, is there a way to bundle, minify and move native scripts to the bottom?

Answer 1

First of all this is what I use and for me and it works. I'm not saying that my code is 100% correct but Pingdom as well GTmetrix show a positive effect and WP is satisfied also, so it can't be that wrong as I do.

The versions showing (?ver=x.x.x) can be debet when those files need to be cached so stripping(filter) that is already a first step.

The code snippet I use for this looks like this:

function remove_version_parameter( $src ){
    // Check if version parameter exist
    $parts = explode( '?ver', $src );
    // return without version parameter
    return $parts[0];
}
// filter .js files
add_filter( 'script_loader_src', 'remove_version_parameter', 15, 1 );
// filter .css files
add_filter( 'style_loader_src', 'remove_version_parameter', 15, 1 );

To add defer (Google loves to see this also) *.js files (for a positive pagespeed) I use following snippet:

Edit - Changed code below to prevent errors/weird behavior in back-end. Source found here!

if ( ! function_exists( 'add_defer_to_js' ) && ! is_admin() ) {

    function add_defer_to_js( $url ) {

        if ( FALSE === strpos( $url, '.js' ) ) { 
            // not our file
            return $url;
        }

        // Must be a ', not "!
        return "$url' defer='defer";
    }
    add_filter( 'clean_url', 'add_defer_to_js', 11, 1 );
}

To add .js files now into the footer (helps pages loading) we can enqueue them with following snippet:

Edit - Extra info: remove following from the function below http://yourdomain.com for normal use.

function enqueue_scripts_in_footer() {

    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate.min' );
    wp_register_script( 'jquery', 'http://yourdomain.com/wp-includes/js/jquery/jquery.js', array(), false, true );
    wp_register_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
    wp_enqueue_script( 'jquery', 'http://yourdomain/wp-includes/js/jquery/jquery.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_in_footer' );;

All together, these 3 functions(add in the functions.php) should help loading your pages faster, caching them correctly.

Hope this helps a little. Making a copy of your functions.php before adding these functions is not a bad idea at all (adding the functions at the bottom of your functions.php is imho the best way).

Note: I am not using a child theme, and till now it causes no conflict with the plugins as used. I little warning/hint, and correct me if I am wrong but to enqueue .js files for a child theme, that should slightly done different.