How to eliminate render blocking resources from Blogger Theme?

Every blogger is worried about their website loading speed. This problem is often faced by new bloggers. To maintain your blog speed you might be using a simple blogger theme with few widgets but it is taking unexpected time to load.


The main reason behind this is the big size of images and uses of is many JavaScript and CSS Files which loads in the background with a default and custom Blogger theme and that cause delay to load your site. such scripts are known as render-blocking CSS bundle Files.

In this tutorial, we will discuss tricks to solve "eliminate render-blocking CSS bundle Files".

well, I have already given a trick to use Lazy Loader for Images and get rid of large image size which reduces your page loading speed-

Note:- This is not the only reason for slowing your web page but sure this is one of the important reason.

• Read: How to Add "Lazy loader for Images in blogger" [blogspopt]

 Why We face rendering javascript problem

By default, CSS is treated as a render-blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed. So make sure to keep your CSS clean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

Default Blogger theme have already CSS files, but if you are using customize Blogger themes then those CSS files are unnecessary. Generally in custom Blogger theme developer uses a custom script to design the theme. So if default CSS script files load with custom CSS script then your theme may conflict with both scripts. As a result, the CSS script may not give you proper output and JavaScript files eliminate render-blocking CSS.

Steps To Remove Render Blocking CSS and JavaScript

However, before proceeding to steps just check your Blogger theme loading speed by visiting the URL  PageSpeed Insights - Google Developers
And after applying the below settings again check the page speed so you can make a difference in page loading speed. After applying the trick my site loading speed has increased up to 20%

SEO Tips: How to remove date from Blogger [Blogspot] post URL

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Now Click on  Theme then dropdown-menu in the right corner of your page and select Edit HTML

Step #3: Now locate opening  html or HTML from the top of the Blogger theme by pressing Ctrl+F (On Windows device) or CMD+F (on Mac devices)

Step #4: Now add b:css='false' just after the html or HTML code. The script would be similar or nearly look like below code line.

Step #5: Finally hit the Save theme button


Now you can see the magic. View your blogger theme page source and see the render-blocking CSS file has gone after applying the above trick.

Note: You can also see if the code is working or not. You will note that alert message from google page insight has been removed secondly you can also check by opening your home page of the blog then press crrl+U and in first or second-line where HTML tag is located, the code which you have been added reflect theirs.



This small trick will help to boost website loading speed and you can get rid of render-blocking resources.