0

Whenever I check my website on gtmetric, google Insights, Pingdom etc... I always get feed back of render blocking JS

Currently I enqueue all my scripts as so:

<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>

I was wondering if there was a better way to enqueue so that the scripts could be combined and the JS in particular added to the footer?

I have seen that i could enqueue via functions.php as in this page external javascript

however there seems to be some stigma around that in that it may not work correctly.

Is there any advice? tips?

I have since tried to removed the scripts/styles from the ...

and inserted in functions.php as follows:

function external_scripts() {

wp_register_script('googleapis', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array('jquery'), true);
wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js', array('jquery'), true);

wp_enqueue_script('googleapis');
wp_enqueue_script('bootstrap');
}

add_action( 'wp_enqueue_scripts', 'external _scripts' );  

function external_styles() {

wp_register_style('bootstrapcdn', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
wp_register_style('maxbootstrapcdn', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

wp_enqueue_style('bootstrapcdn');
wp_enqueue_style('maxbootstrapcdn');
}

add_action( 'wp_enqueue_style', 'external _styles' );  

But this seems to have broken the site... Now images do not load and also the menu does not drop down on hover.

ideally I would like to defer :

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', true);

and async

wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js, true);
1

If you care about pagespeed and those standards, you should make the resources local instead of off remote servers. Although they're all off CDNs, nothing's faster than local. With http/2 on the rise, its going to become less and less important to have fewer scripts- but having them locally will still matter.

You can combine most files like that manually (many of my themes main stylesheet end with compressed third party lightbox css), or if feeling advanced enough, use a tool like webpack.

You should be enqueue'ing via functions.php, not hardcoding in your header.php, regardless if remote or local. It solves so many issues of dependancies, plugins and script conflicts.

You could put your scripts in the footer via functions.php like so:

add_action( "wp_enqueue_scripts", function(){
    // the last arg is "in_footer"
    wp_enqueue_script( $handle, $src, $deps, $ver, true);
    // this will put the proceeding styles in [`wp_footer`][3]
    add_action( "wp_footer", function(){
        wp_enqueue_style( $handle, $src, $deps, $ver, $media );
    });
});

You could add defer andor async to select scripts while enqueue'ing with something similar to

add_filter('script_loader_tag', function ($tag, $handle) {
    if ( 'jquery' !== $handle )
        return $tag;
    return str_replace( ' src', ' async="async" src', $tag );
}, 10, 2);

You could @import Google Front in your themes .css instead of in the header with

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700')
  • Thanks a lot for your reply. Can I ask what the difference may be between defer and ensure to wp_footer? – Paulmcf1987 Jun 1 '18 at 23:24
  • Defer prevents load blocking, it loads the resources after the doc has loaded. Putting your resources in footer helps the top html ‘above the fold content’ load faster – David Sword Jun 2 '18 at 4:15
  • I have added a bit to the bottom of my question, I have tried ammending things but appear to have broken the website. Have you any idea where I might have gone wrong? – Paulmcf1987 Jun 2 '18 at 13:24

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.