How to Eliminate Render-blocking JavaScript and CSS on Blogger

03:38
https://codextech.blogspot.com/2018/08/how-to-eliminate-render-blocking-javascript-and-css-on-blogger.html

If your website running on blogger platform, you might heard of Render Blocking Resources often because most of the blogger templates contains Render Blocking Resources. These resources including JavaScript files, CSS bundle files and various google font files.

https://codextech.blogspot.com/2018/08/how-to-eliminate-render-blocking-javascript-and-css-on-blogger.html

If you test your site's loading speed from PageSpeed Insights Tool, the results suggests you to Eliminate Render Blocking Resources.

It is important to block those scripts to optimize your blog in SEO point of view.
These resources stops your page DOM building process while loading which effects your website loading speed. your website can't be loaded fully until or unless those resources fully loaded. This will effect your blog's SEO.

Generally you can't remove those resources as they won't appear in your blogger template because blogger inject those resources while your website loading. You can view the source code your website to see those resources in the head section.

So,in this blog post i will be showing you How To Eliminate/Disable Render Blocking Resources.

1. Disabling widget_css_bundle.css and authorization.css

NOTE: This trick may not be applied to all the templates, your website design loose its responsiveness. Make sure you have a backup of your template.

  1. Goto blogger.com and sign-in to your blogger account.
  2. In the dashboard section click Template->Edit HTML
  3. In your template code, search for <![CDATA[  by pressing cntrl+F 
  4. Now, replace the above code by below script.
[&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin><style type='text/css'>]
     5. Now, find and ]]></b:skin> and replace it with </style>

Alternate Method : 

  • Search for <head> and replace it with &lt;head&gt;
  • Again search for </head> then replace it with &lt;/head&gt;&lt;!--<head/>--&gt; 
  • Click Save and You are done

2. Eliminate Render Blocking JavaScript Resources

  1. Go-to your blogger dashboard.
  2. Select Themes >> Edit HTML
  3. Now search for </body> and replace it with the below code

[&lt;!--</body>--&gt;&lt;/body&gt;]



     4. Click SAVE and You are done!!

Let us know in the comments section if you have any doubts.

Post a Comment

7 Comments

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)