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!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Hey there,
Really interesting method to remove CSS render-blocking. An issue with the function though, it only works for the home page. The critical path CSS I copied into the head only works for the home page. So other pages still break and even after page loading is complete, the layout is broken.
Could the function and method be improved to include conditional logic so I can target pages on an individual basis? Or even better, on a template by template basis?
It’s possible, but I would suggest just including ALL the critical CSS inline – even for those pages that don’t need it.
What you’re suggesting is valid in theory, but in practice it would require a LOT of maintenance. And each time you make a change like adding a plugin, changing a theme, or even styling a table, you would need to make modifications to your code. This would quickly become unmanageable.
Given the small size of text, the performance benefits would be truly minuscule – so small, that I doubt they could even be measured. So if I were you, I would gather all the critical CSS from all my site’s pages in one blob and paste them for all pages.
If you use Fast Velocity Minify – some prefer Autoptimize – you can inline all your CSS in the header or header and footer. As long as the file size in the header is no more than 50 – 60 kb you are good. No need to worry about critical CSS.
Obviously it’s better to deffer unused style rules, but if you’re within this limit then the benefits aren’t worth the hassle.
AMP has a 50 kb CSS limit for same reason.