Remove render-blocking JavaScript:

Question

I am trying to speed up the website and get 100/100 on here: page speed insights - website www.chrispdesign.com

I have tried moving the coding etc but on my wordpress website i cant seem to quite find the correct place to put it. If I have had it in the right place it wont work.

Also I cannot find Remove render-blocking JavaScript: http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js on any of the wordpress pages only on the view page source?

I have tried a few options on autoptimize plugin etc.

and attempted what the guy on this link did: https://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content

Tried a few techniques but no no avail.

Anyone got some ideas?

Many thanks

Shaun

Vincent B · Accepted Answer · 2017-02-01 10:43:59Z

1

If you want to move javascript files to bottom, you need to deregister it (for jquery), and after register/enqueue it with wp_enqueue_script(set the last parameter at true)

<?php
function move_js_files(){
    // Deregister jquery load by default
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );

    // Register it by yourself and enqueue with last parameter at true
    wp_register_script('jquery', includes_url() . '/js/jquery/jquery.js');
    wp_enqueue_script('jquery', includes_url() . '/js/jquery/jquery.js', array(), false, true);

    wp_register_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js');
    wp_enqueue_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);

    // Exemple with a custom script in theme, no need to deregister
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}

// Only load on frontend
if(!is_admin()){
    add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}

You also need to check that all your javascript files (in theme and plugins) that use jQuery was also moved to bottom.

This works for me, with a few sites on Google Page Speed.

Hope this could help !

answered Feb 1, 2017 at 10:43

Vincent B

4313 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chrispdesign Over a year ago

Hi, is it possible for you to explain in laymans terms. i am not very experienced with this type of coding. really appreciate your first reply i just dont understand.

cyr_x · Accepted Answer · 2017-02-01 10:35:20Z

0

You could try to add the defer attribute to the script tags that need to be defered until page has loaded, see:

http://www.w3schools.com/TAgs/att_script_defer.asp

answered Feb 1, 2017 at 10:35

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Collectives™ on Stack Overflow

Remove render-blocking JavaScript:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related