enqueing Javascript and CSS

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')

Related Posts: