lazy-stiles.php

<?php

namespace Roots\Sage\LazyStyles;
use Roots\Sage\Assets;

/**
 * Load theme scripts in the footer
 * Ref: http://gomakethings.com/inlining-critical-css-for-better-web-performance/
 */
function load_theme_files() {
    // If stylesheet is in browser cache, load it the traditional way
    // Otherwise, inline critical CSS and load full stylesheet asynchronously
    // See initialize_theme_detects()
    if ( isset($_COOKIE['fullCSS']) && $_COOKIE['fullCSS'] === 'true' ) {
        wp_enqueue_style('sage_css', Assets\asset_path('styles/main.css'), false, null);
    }
    // Load JavaScript file
    wp_enqueue_script('sage_js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\load_theme_files', 100);


/**
 * Include feature detect inits in the header
 */
function initialize_theme_detects() {
  $onloadCSSPath = Assets\asset_path('scripts/onloadCSS.js');
  $loadCSSPath = Assets\asset_path('scripts/loadCSS.js');
  $mainCSSPath = Assets\asset_path("styles/main.css");
  $criticalPath = Assets\asset_path("scripts/critical.css");


    // If stylesheet is in browser cache, load it the traditional way
    if ( isset($_COOKIE['fullCSS']) && $_COOKIE['fullCSS'] === 'true' ) {
    ?>
        <script>
            // Contains loadCSS.js, onloadCSS.js, and some light feature detection (for things like SVG support)
            <?php echo file_get_contents($onloadCSSPath); ?>
            <?php echo file_get_contents($loadCSSPath); ?>
        </script>
    <?php

    // Otherwise, inline critical CSS and load full stylesheet asynchronously
    } else {
    ?>
    <script>
        <?php echo file_get_contents($onloadCSSPath); ?>
        <?php echo file_get_contents($loadCSSPath); ?>
        var stylesheet = loadCSS('<?php echo $mainCSSPath; ?>');
        onloadCSS( stylesheet, function() {
            var expires = new Date(+new Date + (7 * 24 * 60 * 60 * 1000)).toUTCString();
            document.cookie = 'fullCSS=true; expires=' + expires;
        });
    </script>
    <style>
        <?php echo file_get_contents($criticalPath); ?>
    </style>
    <?php
    }
}
add_action('wp_head', __NAMESPACE__ . '\\initialize_theme_detects', 30);


/**
 * Include script inits in the footer
 */
function initialize_theme_scripts() {
    // If cookie isn't set, load a noscript fallback
    if ( !isset($_COOKIE['fullCSS']) || $_COOKIE['fullCSS'] !== 'true' ) {
    ?>
        <noscript>
            <link href='<?php echo Assets\asset_path("styles/main.css"); ?>' rel='stylesheet' type='text/css'>
        </noscript>
    <?php
    }

    ?>
        <script>
            // Inline footer JavaScript and inits
        </script>
    <?php
}
add_action('wp_footer', __NAMESPACE__ . '\\initialize_theme_scripts', 30);