Disable Blogger Official CSS From Loading In Template


Read {count} times since 2020

Blogger adds their CSS styles to every templates. These files’ load time will make your site slow. So for a better user experience, Blogger CSS files should be removed. But there isn’t any Settings page for this. Blogger automatically add it’s style sheets. But you can disable the loading with a simple hack.

Blogger Style Sheets

The Blogger CSS files are these :

https://www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css
https://www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css
https://www.blogger.com/static/v1/widgets/3160349130-widget_css_2_bundle.css

When Blogger updates, the above URL’s will also change. Thus page load increases.

Warning

The Blogger CSS files contain the styles of Blogger Native Widgets. If you are using a Blogger Made Template and disable the Style Sheet loading, your site will look ugly. Use this hack only if your blog is using a custom template.

How ?

The CSS loading “” tags will appear on the source code of your blog, but won’t be loaded by browsers, because it is wrapped in HTML Comment tag. Browsers ignore the HTML markup inside the comments. So, the Blogger CSS files won’t be loaded.

Disable Loading In Template

Go to your Blogger Blog -> Template -> Edit HTML

Search for “<b:skin>” in the Template Code using your browser Find Tool (CTRL + F). Move the contents of the “<b:skin>” to “</b:skin>” element to a file. Now, replace the “<b:skin></b:skin>” code with the following :

<style><!--/*<b:skin><![CDATA[*/]]></b:skin>

After replacing search for the “” element. Before it add the following code :

<style></style>

Copy the code that we moved to a file and paste it after “