How to eliminate render-blocking and reduce unused CSS

Today I am going to share how to reduce render blocking and reduce unused CSS from our website that slows down the website.

PageSpeed Insights

First of all, we need to check the website using pagespeed.web.dev website to find out the problem. From here we can see the files that are slowing down our website. Once we find out the issue, now let's fix it.

Eliminate Render-Blocking

Option 1: Defer the JavaScript File

The defer attribute tells the browser to load the script in the background while continuing to parse the HTML. The script will be executed after the HTML is completely parsed.

<script src="https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js" defer></script>

For the Blogger website, the code will be the following.

<script defer='defer' src='https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js'/>

Option 2: Load the JavaScript File Asynchronously

The async attribute also loads the script in the background but executes it as soon as it's downloaded, which can be beneficial for non-essential scripts.

<script src="https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js" async></script>

For the Blogger website, the code will be the following.

<script async="async" src="https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js">

Reduce Unused CSS

To address the second problem of reducing unused CSS, we can optimize the inclusion of the Bootstrap CSS file to only include the necessary parts that your website uses. Here are a couple of approaches we can consider:

Option 1: Custom Build Bootstrap

Bootstrap provides a way to create custom builds where we can select only the components and styles you need. This reduces the overall file size of the CSS.

Visit the Bootstrap Customizer.
Select the components and styles that your website uses.
Download the custom Bootstrap CSS file and include it in your project.

Option 2: Use PurgeCSS

PurgeCSS is a tool that scans your HTML and JavaScript files to remove unused CSS. This can be particularly effective if your Bootstrap CSS includes many styles that are not used on your website.

However, it is not possible to use this tool if we are using a CMS like WordPress or a Blogger website. In that case, we can use PurifyCSS to purge the CSS from our website. PurifyCSS is an online tool that can scan our website using the URL and provide a minified version of CSS.

Now we can download this pure CSS file and use a CDN to link the file to our website.