5

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?

  • 1
    Good point. And the jQuery Migrate is not minified too. :( Why on earth!!! – Mayeenul Islam Jul 22 '15 at 12:31
  • 1
    If it is not too much asked, responding on/accepting an answer would for all users helpfull. Thank you. – Charles Aug 13 '15 at 15:45
8

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.

  • To enlighten the 'why using full path' in the enqueue function, I use a subdomain(for .css and .js as well img files) and therefore doing it that way. And yes I know that the more experienced users/developers and Codex have other ways but for me this works as wished.(I never will say that I am a (good)coder and for sure not experienced) – Charles Jul 22 '15 at 15:05
  • 1
    Do not sell yourself short, this is pretty good and way better than some things you see around! – Nicolai Jul 28 '15 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.