Using loadCSS with WordPress

I have been using loadCSS from the Filament Group recently, it’s a great tool to asynchronously load your CSS files in-order to increase your scores for Google’s PageSpeed tests.

The main issue I faced is using loadCSS with WordPress. WordPress has many plugins to install and each of these plugins usually integrate with the hook system to load their own CSS files – there is generally not much configuration which you can do with how these CSS files are loaded into your site’s HTML.

To combat this issue, I have created a function which will alter these ‘link’ attributes so they can be used with loadCSS. There is also the support to load Critical CSS (This can be done with this tool, or the ‘grunt-criticalcss‘ wrapper), and Async or Defer on JavaScript files is supported too.

To start, download the loadCSS library from Github, you will be using the ‘cssrelpreload.js’ file located in the ‘src’ folder.

Then add this code into your theme’s ‘functions.php’ file:

//Enqueue CSS and Javascript
function enqueue_scripts() {
    //Critical CSS Inline styling - To prevent a flashof unstyled HTML when using LoadCSS, disable if you're not using this
    //Use or the 'grunt-criticalcss' wrapper with Grunt
    wp_register_style( 'site-critical', false );
    wp_enqueue_style( 'site-critical' );
    wp_add_inline_style( 'site-critical', file_get_contents(get_stylesheet_directory() . '/critical.min.css') );
    //LoadCSS - Use the 'loadCSS_parser()' function to implement loadCSS to CSS scripts below
    //LoadCSS v2.1.0 - See
    wp_enqueue_script( 'loadCSS', get_template_directory_uri() . '/libs/loadCSS/cssrelpreload.js', false, null, false );
    //Google Fonts
    wp_enqueue_style( 'google-fonts', ',700', false );   //Disable if you're not using this
    //CSS - Remove any references to this file from your theme, as it will be loaded here instead
    //E.g. bloginfo('stylesheet_url');
    wp_enqueue_style( 'site', get_template_directory_uri() . 'style.css');   //Your website's CSS
add_action( 'wp_enqueue_scripts', 'enqueue_scripts', 15 );   //Prirority: 1 (High)

//Convert CSS scripts for use with loadCSS library -
function loadCSS_parser( $tag ){
    //If not a stylesheet, do not edit
    if ( FALSE === strpos( $tag, "rel='stylesheet'" ) ) return $tag;
    //Set a variable which will hold the default script for a '<noscript>' tag
    $noscript = '<noscript>' . $tag . '</noscript>';
    //Change 'rel' value from 'stylesheet' to 'preload'
    $tag = preg_replace("/='stylesheet'/", '="preload"', $tag);
    //Add 'as' and 'onload' attributes
    $tag = preg_replace("/type='text\/css'/", 'as="style" onload="this.onload=null;this.rel=\'stylesheet\'"', $tag);
    //Remove media attribute
    $tag = preg_replace("/media='.*'/", '', $tag);
    return $tag . $noscript;    //Return
add_filter( 'style_loader_tag', 'loadCSS_parser' );

//Pass Defer or Async to JavaScript files
if (!is_admin()) {
    function async_defer_js ( $url ) {
        //If file is not a .js file, do not alter
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        //** Excluded files
            if ( strpos( $url, 'jquery.js' ) ) return $url;         //Replace this with your jQuery file
        //** If Async - Files for Async
            if ( strpos( $url, 'cssrelpreload.js' ) ) return "$url' async async='true";
        //** If Defer
            //By default add defer tag to all JS files unless specified as async/excluded above
            return "$url' defer defer='true";
    add_filter( 'clean_url', 'async_defer_js', 11, 1 );

Note: If you’re not using Critical CSS, disable the lines on #6, #7 and #8. And if you’re not using Google Fonts, disable line #15.

There are no comments, be the first. Use the form below to add your comment

Post a Comment