Skip to main content

Critical CSS

This section will explain the Critical CSS setup.

Directory Structure​

In our /src/ directory, there is a path for Critical CSS at: /src/scss/critical/.

This is where all of our Critical CSS styles will live, so if you have anything that lives "above the fold" (you know, that fold in your monitor or laptop screen) and needs to be loaded first then this is where you'll want to toss it.

What lives here now?

  • _header.scss – the main global header file

Enqueue Critical CSS​

In /inc/setup/critical-css.php, Critical CSS is loaded as such:

function critical_css() {
    ?>
    <style>
        <?php include get_stylesheet_directory() . '/build/critical.css'; ?>
    </style>
    <?php
}
add_action( 'wp_head', __NAMESPACE__ . '\critical_css', 1 );

With this, Critical CSS is added inline into the head of your site. When running start or watch, these styles will not be minified. When build is run, the styles will be minified.