Render Blocking CSS resources always affect web site’s
loading speed and make our site slower to load. And this is also bad for SEO,
because search engine prefer fast loading website to serve then on search
engine result page. Google’s new project is Accelerated Mobile pages (AMP) project
whose main aim is to divert search traffic to fast loading website. So we must
make our Blog site faster by all means.
As a new user you might be confuse about Render Blocking CSS
resources. Generally Render Blocking JavaScript stops building DOM tree while
parsing the HTML markup. When website loads in browser then it render a page
and for rendering it has to build the DOM tree by parsing the HTML markup. And during
this process render blocking CSS resources encounters the normal rendering
process of a page. As a result it stops and execute before parsing the HTML
markup.
So if you site containing multiple render blocking CSS
resources then your site will take longer time to load. To check render
blocking CSS resources just visit below URL and test your Blog site.
- https://developers.google.com/speed/pagespeed/insights/
I am damn sure there are several render blocking CSS
resources containing in your Blogger template. There are various render
blocking JavaScript and CSS resources like JS file, Google font file, and
various widget files and those can remove by manipulate. But we are deeply
concern about CSS bundle Authorization CSS which automatically load with every
blogger template. This is a default file from Blogger for smooth loading of
Blogger default widgets. But this is really unnecessary for custom Blogger template
users.
After editing your Blogger template you won’t see those CSS bundle
and Authorization CSS file. So we have to find a way to disable this script. But
we are unable to delete those CSS files directly from Blogger HTML editor.
This tutorial is for Advance user of Blogger platform but I
have simplified the procedure. First visit your Blog site and right click on
your mouse pointer and click View Page
Source. Now locate the scripts like below.
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/2973171168-css_bundle_v2.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=XXXXXXXXXXXXXXXXX&zx=c438423a-a8f4-4cca-b115-1e1bcd093875'/>
- widget_css_bindle.css - This is a large CSS file which containing default code for generic blogger widgets like popular posts widget, labels widget etc.
- authorization.css – This is a small CSS file which is consists of two or more lines of CSS code.
The above URLs are in blue color and clickable. Just click
on it and see large CSS file open in a new tab of your browser. Every time
those 2 large CSS files loading with your Blogger template and making your site’s
loading speed slower. I will show you how to disable it.
After applying this trick your Blogger template’s Layout will break. But don’t panic it wont’ affect your site design.
Step 1 Please visit https://www.blogger.com and Sign in
to your Blogger account
Please take a backup of your Blogger template first to avoid any unexpected Incident.
Step 2 Now from Blogger Dashboard Click ->Template ->Edit HTML
Step 3 Please locate <b:skin><![CDATA[ by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 And replace the above code by
below script.
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Step 5 And
again find the find the]]></b:skin>
code snippet.
Step 6 And replace the above code snippet
by </style>. Finally your all
CSS script will go inside below script.
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
//Your All CSS Script Here
</style>
Step 7 Click Save template button to save changes on your Blogger template.
And now you can check your Blogger
template’s source code and see that the CSS resources file text color turned Black. And you
won’t able to click on it. This means
you have successfully disable the CSS bundle and Authorization CSS from
Blogger template. And to check render blocking
CSS resources please visit below link and check your Blog.
- https://developers.google.com/speed/pagespeed/insights/
And see CSS bundle and Authorization CSS file is not
displaying in page speed test result.
Alternative Solution for Default Blogger template user
If you are using default Blogger template then you can adopt
a safe procedure. Though clickable CSS resources count as render blocking so we
will add the CSS bundle file inside style tag. From your Blog page source click
on clickable URL and all CSS bundle file will open in new tab. And copy the
whole CSS script and paste it in a notepad (Don’t paste the CSS code in any
Rich text supported text editor like Microsoft Word).
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/2973171168-css_bundle_v2.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=XXXXXXXXXXXXXXXXX&zx=c438423a-a8f4-4cca-b115-1e1bcd093875'/>
In case of Authorization CSS file open it in Mozila Firefox
browser then it will be visible. Because in Google chrome and Opera browser Authorization
CSS file often remain blank.
And the finally tailor yours script like below.
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
[ Paste CSS bundle file code from Notepad here ]
[ Paste authorization CSS file code from Notepad here ]
[ Here is your all existing template’s CSS code ]
</style>
Finally save your Blogger default template and view the
page source and see CSS bundle and Authorization CSS file has disabled. And
your all widget is running smoothly. Now your template loading speed will
increase.
After applying this trick your template Layout will
completely break. But don’t panic it won’t affect your site traffic or SEO. For
any further query please feel free to leave a comment below.
vai, amar site a google analytics er code diye verification kora jasce na. template edit kore head er moddhe code bosiye save dile save hoy na, ekhon ki korte pari?
Site je kono ekta way te verify korlei hobe. Meta tag use koren. easily verify hoye jabe. Multiple verification is not necessary.
google analytics a to ektai matro way ace ar ta holo code add kore, ekhon ki korte pari?
Please follow the Google site verification tutorial-
http://www.bloggerspice.com/2015/03/how-to-verify-custom-domain-by-using-meta-tag-from-webmaster-central.html
http://www.bloggerspice.com/2015/03/how-to-verify-domain-ownership-by-using-TXT-record-in-blogger.html
http://www.bloggerspice.com/2015/03/how-to-verify-domain-ownership-in-blogger-by-Google-Analytics.html
use any method. You don't have to follow all verification procedure. use Meta tag or TXT record for verification. but don't verify multiple ways.
Thanks Sir.
Sir Blogger Lab Full Width V1.1 Responsive Template এর Demo তে দেখেছিলাম Releted Post । কিন্তু এখন ব্লগে Template সেট করার পর দেখি Releted Post নেই । এখন কি করে ব্লগ পোস্ট এর শেষে Blogger Lab Full Width এর মতো Releted Post টা আনবো ?
Thanks All for As Brother?
রাব্বী ভাই আপনি কেমন আছেন। আর আপনি নতুনদের জন্য অনেক শিক্ষণীয় টিপস শেয়ার করে চলেছেন। তাই আপনার নিকট চিরকৃত।
Alhamdlillah, I am fine brother. Thanks for dropping your comment. Stay tune for more exclusive tutorial.
Mukul Vai apni template file ta Mouse use kore right button a click koron. Tarpor "Ope With" thene "Notepad" select koron. Ekhon notepad theke all code copy koron. Tarpor Blogger dashboard theke Template->Edit Html a ager shob code delete kore notepad er code gola paste koron. And Save Template button a click koron. Ekhon shob show korbe. Dhonnobad. :>
It will work 100%
Thank you very much sir, I save first.
Welcome Putuberbagi :)
Do you know how to stop the unwanted Google Analytics injection on Pagespeed? I have removed google analytics and yet, it still shows an error:
99 / 100 Suggestions Summary
Consider Fixing:
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Leverage browser caching for the following cacheable resources:
google-analytics com/ga.js (2 hours)
Hi Night Owl, Please follow the tutorial from below. Hope it will work.
http://www.bloggerspice.com/2016/02/how-to-remove-widgets-and-Google-plus-script-to-make-blog-faster.html
^_^
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8894727874904624913&zx=7ef0df93-6f9d-4d25-8430-a4f7f34590c7
This CSS still comes when using your method. Can you pls help ?
Earlier it was not coming but since some days it is coming even after using your method.
I think you have added script inside b:skin so authorization CSS is still appearing. So remove all CSS and also follow the below URL for disabling Google Plus script from Blogger theme.
http://www.bloggerspice.com/2016/02/how-to-remove-widgets-and-Google-plus-script-to-make-blog-faster.html
Thank you. :)
not working, i still got message about rendering css from google page speed insight.
Very useful information despite the difficulty of applying this explanation, but I worked to implement it as it should and with all accuracy .. Thank you very much, my friend.
Welcome Brother. I am very glade to hear that. :)
I implemented it but am getting this error XML error message:
The character reference must end with the ';' delimiter.
Hi There ^_^
Have you change all the script at once or one by one? Just follow 1 step and save your theme and again follow another step then save your them. I think this will work.
Also you can follow the below tutorial--
https://www.bloggerspice.com/2018/07/render-blocking-css-file.html
Best job . very good guiding . 👍👍👍👍👍👍👍👍
Thank you :dn
1. the below issue is not fix as per above guidelines, i try it but not fix, please suggest me sir
www.gkforyou.com
Optimize CSS Delivery of the following:
https://www.blogger.com/…/v1/widgets/2437439463-css_bundle_v2.css
Hi Kumar :up
This will work 100% and with this tutorial please also follow the Tutorial by visiting below URL
https://www.bloggerspice.com/2018/07/render-blocking-css-file.html
thanks for sharing