Eliminate render blocking CSS

Have you ever heard this term? What is render blocking CSS?

Render means to become or visible, so render blocking CSS are CSS files that stop the page from becoming visible or loading. Everyone of your CSS files delay the page from rendering. The bigger the CSS file is, the longer the page takes to load. The more CSS files you have the longer the page takes to load.

So how do you eliminate render blocking CSS?

1. Properly call your CSS files
2. Use less CSS files

How to properly call CSS

CSS can be called in many ways. In the modern world of web design, there are many ways that are the wrong way to call your CSS. The main culprit, @import!

Don’t use @import to call css files

This method of calling CSS is bad because it adds to the time that it takes to load your css before your page can load.

Elegant themes have a tutorial on creating a child theme that uses this method. It is the old way of how WordPress used to handle child themes and when they found out that it was the wrong way – they looked at how they would change this and came up with a solution.

This is the tutorial I am talking about – https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial. As you can see it was posted in 2013 so is seriously out of date.

See below for how you should be linking your child theme to Divi.

The old way as per the elegant themes tutorial uses the following code:

@import url("../Divi/style.css");

/* =Theme customization starts here
[/php]

THIS IS BAD

WordPress says “Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.”

You should be creating a child theme this way:

CSS in your child theme should be this

[php]
/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
[/php]

Note: you can change the theme name, theme URI, description, author, author URI and version to whatever you want.

You then need to add the following into your functions.php file. If you don’t have one in your child theme, just create a new file and name it “functions.php”. Add the following code to it.

[php]
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
[/php]

That’s it, you now have properly called your css in your child theme!

Ok so now we have removed or not using @import on our child theme, what about other plugins – how do we change these?

To fix this issue, use https://gtmetrix.com and look for “Avoid CSS @import”. Locate the CSS files that are using this method and change the way they are being called.

You will be looking for something like the example below usually at the top of the CSS file:

@import url(“style.css”)

How do you remove the @import?

1. The best way is to just copy the CSS from the imported sheet and paste it into the other file. This will kill two birds with one stone and lessen the amount of CSS files you are using. Then delete that bit of code (@import).
2. Ask the developer to sort this as is bad code.
3. If you cannot do that for some reason, link the CSS in your functions.php page as per the example below (just change the location and filename to be the same as the imported one) – then delete the @import code in the plugin.

Note: if you edit the plugin code when you update the plugin it will remove your changes.

[php]
function enqueue_my_style() {
    wp_enqueue_style( 'style-name', 'path_to_css_file' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_style' );
[/php]

Use less CSS files

Each physical CSS file you have enqueued (linked to your site) will slow down the load time of your site.

There are three ways that you can use less CSS files.

1. Combine CSS files
2. Use inline CSS
3. Use less plugins

Combine CSS files

To combine CSS manually, you must copy the css from one css file and paste it into another. Once you do that, you must remove the call for that CSS file.

Use inline CSS

To use inline CSS you must copy the CSS from a file and paste it directly into the html page itself. It must be noted that you shouldn’t place a large amount of CSS into the head (like the Divi style.css ). You should only use this technique on smaller CSS files.

Inlined css is placed in the head of the html document using style tags. An example below.

[css]
<style>
/*YOUR CUSTOM CSS */
</style>
[/css]

Use less plugins

WordPress is great as you can use various plugins to do certain jobs for you. The issue comes that you can become too plugin reliant and use them for jobs that you can do yourself. The more plugins that you use the call CSS files, the slower your site will be.

Take a look at GT Metrix and see what plugins are calling scripts, can you remove these and add the code yourself?

Minify your CSS files

Compressing or minifying your CSS is really straight forward. You basically remove any comments and put all the styles on one line to remove all the spaces.

An example of un-minified Divi CSS could be: (a small snippet from the Divi style.css)

[css]
/* Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
	padding-bottom: 10px;
	color: #333;
	font-weight: 500;
	line-height: 1em;
}
[/css]

The compressed version would look like this:

[css]h1,h2,h3,h4,h5,h6{padding-bottom:10px;color:#333;font-weight:500;line-height:1em}[/css]

You can use online minifiers such as https://cssminifier.com/

Uncompressed Divi style.css = 411.758 kb

Compressed Divi style.css = 367.863 kb (as per Divi Nitro minification)

As you can see minifying you CSS reduces the size of the file and therefore gives the browser less to download and will increase page speed. If you minify all your CSS and combine them, the difference is great!

Divi Nitro takes care of the above for you. It minifies and combines your CSS. It only works on styles that are enqueued properly (see above) and not using @import. You would still need to remove the @import and enqueue it for Nitro to minify and combine with other scripts.

What is does do is take all the scripts that have enqueued properly and reduce the file size by minifying it and then combines them so you have less render blocking css!