How To Inline & Defer Unused CSS WordPress Without Plugin

You must have seen warnings like “Eliminate render-blocking resources” in Lighthouse. This means having too many resources like CSS or JS files on your page that are blocking the first paint of your page. This causes your web pages to take a huge time while loading that ultimately affects the user experience.

So, you should consider deferring all the non-critical CSS or JS files on your page to get rid of such warnings. So, today, we will share how to defer unused CSS on WordPress without any plugin. Stay with this guide to learn all the processes for deferring CSS on your WordPress site and improve page loading time.

How to Defer Unused CSS WordPress Without Plugin

Before the browser renders any page, the CSS files must be loaded or processed. In this case, web pages that contain unnecessary styles take longer times to render. 

defer unused css in WordPress with out plugin

Here, in this image, the lighthouse report shows the opportunity “Eliminate render-blocking resources,” pointing to the style.css file. That means the browser has to wait for all CSS files to load on your page and get processed before starting painting a single pixel on the screen. 

Fortunately, you can fix this issue up by optimizing your page so that only the critical styles will be loaded, and the rest will load in a non-blocking way. So, let’s find out how to defer unused CSS WordPress without a plugin.

1. Identify Critical CSS

The first step is to identify what’s critical and what’s not before reducing the render-blocking CSS. Here, you can use DevTools to identify the non-critical CSS. so, follow the below steps-

  • Press Ctrl+Shift+C and the Mac users press Command+Shift+C to open the DevTools.
  • After that, the Windows, Linux, and Chrome OS users press Ctrl+Shift+P, and the Mac users press Command+Shift+P.
  • Then, once the command menu appears, start typing Coverage, and you will see three options. From these options, select Show Coverage.
Identify Critical CSS
  • Now you will see a page like the following image.
show coverage
  • Click the reload button, and the coverage tab will start providing an overview of your CSS files that the browser loads. See the following image, here the blue color represents used CSS, and the red color represents unused CSS. 
red color represent unused CSS
  • Now, click on a CSS file, and it will show the line-by-line breakdown of what CSS it uses.
show line by line breakdown what CSS used

So, use this information to optimize your CSS so that the browser can start processing the critical CSS right after page loads. 

2. Preload the Links

  • Once identifying the critical code, extract the class definition marked with blue and put those classes inside a <style> block at the head of the page.
<style type="text/css">.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline:none;font-size: 15px;transition: 0.4s;}.container{padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align:center;} </style>
  • After that, load the rest styles asynchronously using the <preload> link.
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript>

Here’s how this works-

  • The link rel=”preload” as=”style” requests the stylesheet asynchronously.
  • Onload allows the CSS to be processed when the loading is completed.
  • Null is to unload handler that helps browsers avoid recalling the handler upon switching the rel-attribute.
  • The stylesheet inside the nonscript element works as a fallback for browsers that don’t execute JavaScript. 

Also, by inserting the following code, you can do this into your WordPress 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 );

Once done, the page will look the same as before and will load much quicker.

Conclusion

Page loading is one of the key contributors to improve user experience and conversion rate. So, you can’t take your web page’s loading speed lightly; otherwise, you have to face the consequences.

Here, we have shared how to defer unused CSS WordPress without a plugin. It is one of the major factors that cause the page to take more time to load. Consider this guide while deferring your unused CSS files. Hopefully, it will help you to improve the page loading speed.

Leave a Comment