Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    WordPress async JS and CSS loading

    WordPress async JS and CSS loading

    Page speed optimizations are a constant battle. New features / components are added to a website, but often there is no time for performance improvements. One of the most important factors regarding page speed load time is eliminating blocking resources. CSS/JS files prevent DOM from rendering. Until these assets are downloaded, the page will remain blank.

    Our goal is to show our visitors page content as fast as possible. The most important content is above-the-fold (viewport that is visible on initial load). The assets responsible for this aspect should be prioritized to load.

    WordPress scripts and styles

    Sophisticated systems often use conditional assets loading, or even critical CSS generation. However, WordPress uses simpler architecture, where most assets are loaded globally. In most cases, WP uses a ready-to-use theme and multiple plugins that are enqueuing their CSS styles and javascripts. Our goal here is simple, without modifying the existing code we want to make assets load asynchronously.

    Async JavaScript settings

    For JavaScripts, the most convenient way will be to use the plugin Async JavaScript by Frank Goossens. He is also the author of the popular ‘Autoptimize’ plugin.

    The following settings should be optimal for most WordPress websites:

    Wp-admin / Settings / Async JavaScript

    – Enable Async JavaScript – checked

    – Apply Defer (jQuery excluded)

    – Script Exclusion: wp-includes/js/dist/dom-ready.min.js, wp-includes/js/dist/hooks.min.js, wp-includes/js/dist/i18n.min.js

    Now ‘Save settings’ and check your website using the Incognito Mode (to prevent Browser Cache). For troubleshooting, check the Browser Console red javascript errors. Determine the js file name that causes the error and add it to Exclusions in plugin settings.

    Asynchronous CSS loading

    Other resources that can block page rendering are styles. The “Async CSS loading hack” solution, which has full browsers support, is to modify link stylesheet tag by changing media to “print” and by adding an onload inline function.

    <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

    Now, how to achieve this in WordPress? By default, styles in WordPress are added by using the wp_enqueue_style built-in function. Your theme should already have a similar action defined:

    /**
     *
     * Enqueue scripts and styles.
     */
    function ct_load_scripts() {
        define( "CT_VER", "5" );
        wp_enqueue_style( 'ct-theme-style', get_template_directory_uri() . '/assets/css/style.css', [], CT_VER );
    }
    add_action( 'wp_enqueue_scripts', 'ct_load_scripts' );

    How to Load CSS Asynchronously in WP

    To make it load in an async-way, we’re going to use the style_loader_tag filter and modify link tags on the fly. In addition, the preload tag will be generated to fetch resources earlier.

    /**
     * WP - Load CSS Asynchronously
     * Eliminate blocking-resources
     */
    function ct_style_loader_tag($html, $handle) {
        $async_loading = array(
                'u1_theme-style'
        );
        if( in_array($handle, $async_loading) ) {
            $async_html = str_replace("rel='stylesheet'", "rel='preload' as='style'", $html);
            $async_html .= str_replace( 'media=\'all\'', 'media="print" onload="this.media=\'all\'"', $html );
            return $async_html;
        }
        return $html;
    }
    add_filter('style_loader_tag', 'ct_style_loader_tag', 10, 2);

    Pros of async loading

    Our solutions change assets’ tags “on-the-fly”. Proper defer, preload or onload parameters are added to script and link resources. Contrary to other solutions, there is no need for the generation of new files, thinking about server permissions or clearing assets’ cache. This should work even in the load-balancer configuration where there are multiple independent instances of servers with WordPress code. Changes in the plugins / new js files added? These shouldn’t be an issue.

    Preloader opacity:0

    Now Javascripts aren’t blocking page rendering. That’s good, this should result in faster page load. The downside may be that for a split second unstyled page content could potentially be visible to a visitor (CSS not loaded yet, but HTML already fetched). Inline Head CSS to the rescue! We will hide body content by default, using opacity:0.

    // header.php
    <head>
        <style>
            body {
                opacity:0;
            }
        </style>
    </head>

    Then – in our asynchronously loaded style.css file, the opacity will be set to 1 again. The result: after the loading of the CSS file, styled content will be revealed to the user.

    // style.css
    body{  
        opacity:1
    }

    That’s it for today’s tutorial. Make sure to follow us for other useful tips and guidelines. Also you can check our article about fast tips for WordPress speed.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us