Knowing how to inline and defer CSS on your WordPress site is a vital part of improving the viewer experience. While it doesn’t improve your page load time, it makes a huge difference to how the user perceives the page to load.
Normally, all externally linked CSS stylesheets are render-blocking. Which means that the browser doesn’t proceed until they’ve been downloaded. So it’s a best practice to defer them (not the same “defer” as with Javascript though). Unfortunately, this has some side effects that we need to take care of.
This tutorial will show you how to:
- Generate critical CSS
- Defer CSS stylesheets
- Inline the critical CSS from Step 1
So let’s go.
Step 1: Generate Critical CSS
The importance of this step will become evident after step 2. For now, just visit a site like like, enter your site’s URL or page, and click “Generate Critical Path CSS”. The tool will scan your website and eventually give you a blob of text like this:
Copy this and keep it safe. We’ll use it later.
Step 2: Defer CSS Stylesheets
Most CSS in WordPress is (and should be) enqueued properly using the “wp_enqueue_style” function. This will place a <link> element in the head that looks like this:
As mentioned earlier, this CSS stylesheet is render blocking. If you plug your page into a tool like Google’s PageSpeed insights for example, it’ll complain that a lot of stuff is preventing the page from displaying – and those tools will be right.
About the rel=’preload’ Attribute
To solve this problem, browsers have started supporting the “preload” attribute for resources like scripts. Basically, it tells the browser that the resources marked in this manner can be downloaded simultaneously in the background and that they’re not terribly important for page loading.
Of course, that’s not true. The CSS stylesheets are important. They define how your site looks after all! But for the moment, we’re interested in using the “preload” attribute value to defer our external stylesheets.
You can do this by inserting the following code into your WordPress’s functions.php file:
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );
After you save your changes, your CSS stylesheets will have the “preload” tag attached to them like this:
Great right? Not so fast!
Step 3: Panic As your Site Breaks
Unfortunately, running the above code makes your site “unstyled” like this:
This is because the CSS styles with “preload” haven’t been applied since the page went ahead and rendered without them. This is where the “critical” CSS from Step 1 comes in.
The “critical CSS” refers to only those CSS rules that apply to the “above the fold” content – namely the content that’s visible when your page first loads. This is typically a very tiny subset of the actual CSS contained in all the stylesheets.
In Step 1, we generated this critical CSS, and we need to insert it into the <head> of our webpage with following code:
function hook_css() {
?>
[insert critical css here]
<?php
}
add_action('wp_head', 'hook_css');
Replace [insert critical css here] with the code you copied from Step 1.
Note that this must include the <style></style> tags around it. If you’re using a different tool, it might just give you the CSS rules without the <style> opening and closing tags. Make sure you add them!
Once you’ve done this, your page will load normally and look the same. With the important difference that all your stylesheets are loading in a deferred manner! Say hello to fast page load speed scores!
Leave a Reply