After running my Wordpress site through Page Speed Insights I'm told that I need to eliminate render blocking javascript. So I have moved the vast majority of javascript to just before the closing body tag but the warning still appears in Page Speed Insights.

Can anyone suggest what I can do to resolve this issue please?

The site is /

Thanks in advance

After running my Wordpress site through Page Speed Insights I'm told that I need to eliminate render blocking javascript. So I have moved the vast majority of javascript to just before the closing body tag but the warning still appears in Page Speed Insights.

Can anyone suggest what I can do to resolve this issue please?

The site is http://www.stewartandsonsroofingliverpool.co.uk/

Thanks in advance

• javascript

Share Improve this question asked Feb 20, 2017 at 18:56 user3205234user3205234 9311 gold badge22 silver badges66 bronze badges 1

• PageSpeed Insights provides instructions. If you click on "eliminate render-blocking JavaScript and CSS in above-the-fold content" in the report, you'll see which scripts and stylesheets are causing the warnings. You'll also see links with more details on how to "remove render-blocking JavaScript" (such as making it asynchronous) and how to "optimize CSS delivery". – WebElaine Commented Feb 20, 2017 at 19:08

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

You can install a plugin to load your JavaScript asynchronously or try to do it manually adding code to your functions.php to load your scripts asynchronously.

This can get you started,

Warning

loading JavaScript asynchronously will cause several issues with dependencies:

/*function to add async to all scripts*/
function js_async_attr($tag){
  //Add async to all  scripts tags
  return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

so you have to check your JS code and update it.

Use defer attribute

Instead of converting all script to async as this answer suggested, it's better to use defer. That way, you'll not have dependency errors.

For example, you use a custom script and that script depends on jQuery. Since jQuery is more likely to be bigger than your custom script, it'll probably end loading before jQuery, so your CODE will behave unpredictably.

Instead you can use the following CODE to make sure dependency works:

function js_defer_attr( $tag ){
  // add defer to all  scripts tags
  return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'js_defer_attr', 10 );

Here's more about the defer attribute.

Alternative: place script to footer

It's also possible to replace all scripts to footer. Use the following CODE (instead of the above) to place all scripts in the footer:

function move_scripts_to_footer() {
    remove_action( 'wp_head', 'wp_print_scripts' );
    remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
    remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
    add_action( 'wp_footer', 'wp_print_scripts', 5 );
    add_action( 'wp_footer', 'wp_enqueue_scripts', 5 );
    add_action( 'wp_footer', 'wp_print_head_scripts', 5 );
}
add_action( 'wp_head', 'move_scripts_to_footer', -1 );

You can eliminate render blocking JavaScript very easily by using different plugins, like Autoptimize. Follow these steps:

1. Install and activate Autoptimize.
2. Head to Settings > Autoptimize.
3. Check the boxes beside "Optimize JavaScript Code?" and "Optimize JavaScript Code?" options.
4. Click on Save Changes button.

You can also use W3 Total Cache plugin to solve the issue. You will find the steps for applying it right here.