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);
Improve this question

    1 Answer 1

    Reset to default
    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')
    Improve this answer
    3
    • Thanks a lot for your reply. Can I ask what the difference may be between defer and ensure to wp_footer?
      – Paulmcf1987
      CommentedJun 1, 2018 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
      CommentedJun 2, 2018 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
      CommentedJun 2, 2018 at 13:24

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.