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.
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 :
Save the Template.
Search for the following code :
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 "<link>" 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 HTMLSearch 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 "</head>" element. Before it add the following code :<style></style>
Copy the code that we moved to a file and paste it after "<style>" in the above code.Save the Template.
Did It Work ?
Now, we should check if it worked on your blog. So, go to your blog address, right click on an empty space and choose the "View Page Source" option from the right click context menu Or use the CTRL + U keyboard shortcut.Search for the following code :
<style><!---/*
If you found the code above and it is highlighted in black/gray
color, then you have successfully disabled the Blogger CSS loading.
No comments:
Post a Comment