Critical CSS

Introduction

This section will explain our Critical CSS setup and where you may find some Sass files that used to live in other areas.

---

Directory Structure

In our /src/ directory, there is a new 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
• _menus.scss – the main global navigation/menus file
• _mobile-menus.scss – the main mobile navigation/menus 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 dumped 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.