Logo-final
Home
Contact Us
Logo-final
29 September Website Development

Remove Render Blocking CSS

Remove Render Blocking CSS in WordPress

The Cascading Style Sheets are files that contain data and functionalities related to a website’s style and appearance. To make a WordPress website load fast, it is not just vital to remove render-blocking JavaScript but also to remove render-blocking CSS.
All externally linked CSS are render-blocking and make a website slow. The reason being, browsers do not tend to load CSS files unless they have been completely downloaded which consumes a little more time. To ease out the process it is important to defer them but remember not to defer them as JS, it will damage your website.
To defer and eliminate render-blocking one must follow the following steps:

  • Create a safe back up

It is always essential to create safe backups when modifying code in any way, this lowers down the risk of not being able to recover a website.

  • Access critical CSS

To access critical CSS, you will need to use online ‘critical path CSS generating’ tools. Once that you get access to the CSS file, copy the code and save it for later use.

  • Defer CSS stylesheets

To make this possible access the functions.php file paste the following code in it:

function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

By adding this code, you will attribute the CSS to preload, this means that now the rendering shall take place simultaneously as other elements of the website load. But wait! The task isn’t done yet.
By using this code, the CSS may load simultaneously as other elements, but the website will look broken or in other words ‘unstyled’. This is because the CSS is responsible for styling a website either above-the-fold or below-the-fold. To recover the look, you will now have to follow the following step:

  • Use Critical CSS

Use the following code snippet and paste it into the functions.php file:

function hook_css() {
?>
[insert critical css here]
 }
add_action('wp_head', 'hook_css');

Paste the critical CSS derived in Step 2 into the [insert critical css here] part. Make sure that you do not forget to add the

 

tags. This will recover the website’s look as now the CSS important for above-the-fold will render before others.
Once that you have followed the above-mentioned steps, the website will load normally but with an evident difference in the speed. With a faster website, you can attract great leads as well as add value to the website’s SEO practices.
Want to learn more? Comment below to start a conversation.

Tags:

Leave A Comment