# How To Inline And Defer CSS On WordPress Without Plugins
> Google Pagspeed complains about CSS stylesheets being "render-blocking". Here's how to inline and defer CSS without a plugin on WordPress
- Author: [Bhagwad Park](https://www.namehero.com/blog/author/bhagwad-park/)
- Published: 2018-12-05
- Updated: 2024-11-07
- Category: [Showcase](https://www.namehero.com/blog/category/showcase/), [WordPress](https://www.namehero.com/blog/category/wordpress/)
- Web page: https://www.namehero.com/blog/how-to-inline-and-defer-css-on-wordpress-without-plugins/
[](https://blogcdn.namehero.com/blog/wp-content/uploads/2023/07/12110751/howtoinline.jpg)
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](https://www.namehero.com/blog/the-right-way-to-load-javascript-in-wordpress-without-a-plugin/) though). Unfortunately, this has some side effects that we need to take care of.
This tutorial will show you how to:
1. Generate critical CSS
2. Defer CSS stylesheets
3. 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](https://www.sitelocity.com/critical-path-css-generator), 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:
[](https://www.namehero.com/blog/wp-content/uploads/2018/12/Copy-Critical-CSS.png)
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 element in the head that looks like this:
[](https://www.namehero.com/blog/wp-content/uploads/2018/12/CSS-Files-Without-Preload.png)
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;
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:
[](https://www.namehero.com/blog/wp-content/uploads/2018/12/CSS-is-Preloaded.png)
Great right? Not so fast!
## Step 3: Panic As your Site Breaks
Unfortunately, running the above code makes your site “unstyled” like this:
[](https://www.namehero.com/blog/wp-content/uploads/2018/12/But-the-Page-is-Doesnt-Display.png)
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 of our webpage with following code:
```
function hook_css() {
?>
***[insert critical css here]***
tags around it. If you’re using a different tool, it might just give you the CSS rules without the