In this post, I will be talking about eliminating unused JavaScript and CSS files, as shown as follows, injected by Blogger:
http://www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css http://www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css http://www.blogger.com/static/v1/widgets/3115898655-widgets.js
You should only have one of first two CSS files, which are for different versions of templates, and one JavaScript. They are for widgets as the filenames have suggested.
For normal Blogger bloggers, who dont touch the template code and use quite some gadgets, then this definitely isnt going to improve your blog but bringing your problems.
For bloggers who code their own templates, JavaScript, and CSS; and uses almost no gadgets and no dynamic contents generated by Bloggers Javascript, then this would probably be helping your a bit.
Itd be less files (2 files) and less data transmitted (100 KB, gzipd ~37 KB). Think about it: 100 KB and most of them are not needed, its a huge waste of downloading, parsing, and processing.
1 Removing CSS for widgets
In my template, I use an external CSS, so <b:skin/> is empty as follows.
<b:skin></b:skin>
Id think I have no extra stylesheet, but no. Because its rendered out as:
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> <style id='page-skin-1' type='text/css'><!-- --></style>
As you can see, a <link/> element is injected and linked to an external CSS file, 20 KB or 5 KB gzipd. 20KB is quite large in terms of a CSS file, let along its only accountable only for widgets, which you can say this blog only have some essentials. I am almost certain that its a waste and I may also need to do some hard overriding !important for some rules, if any gets conflicted with Bloggers in my own CSS.
I spent some time trying to find a setting or template tag to stop that injection, but I couldnt find any. Luckily, I found a page1 which uses quite interesting way to get rid of them. The following code shows how I did with slight modification:
<style><!--<b:skin></b:skin>
Basically, it uses HTML comment and an additional opening <style> tag in a wicked way. Its rendered out as follows.
<style><!--<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> <style id='page-skin-1' type='text/css'><!-- --></style>
You can see from the syntax highlighting, the <link/> and the original opening <style> tag have been commented out and thats why we need to an additional <style> in order to have a valid HTML for that part of code. Wicked, isnt it?
2 Removing JavaScript for widgets
After the CSS was wickedly removed, I thought I had removed all injected external stuff, but then I saw that ...-widgets.js in the Net tab of deverloper tool. There is more work has been done. The following code is what Blogger adds.
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/3115898655-widgets.js"></script> <script type='text/javascript'> // a lot of stuff goes on here </script> </body> </html>
It has two part of JavaScript one is the external JavaScript, the other is embeded for something called jstiming, whose corresponding code is injected into <head/> and I havent found a good way to get ride of that.
Nonetheless, with the trick I have learned, I adpoted and made one this this part, the code is shown as follows.
<!-- </body> --> </body> </html>
Results the unwanted code being commented out:
<!-- <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/3115898655-widgets.js"></script> <script type='text/javascript'> // a lot of stuff goes on here </script> </body> --> </body> </html>
Its the same trick, only used in reverse way.
3 Conclusion
Although Bloggers CSS and JavaScript for widgets or gadgets can be removed by using the trick above, but I really dont like ding that. Its cool, but its doomed to fail someday, prone to re-surface of those and probably to error. That comment trick may comment out important part of HTML code one day when Blogger changes something.
Blogger loves injecting and changing piece of code in your template from now and then. Its understandable and fairly safe since most of bloggers not only knowing nothing about HTML but definitely also having no knowledge about template, what those people have are the standard templates. Its good but not for someone wants to minify everything, its a headache for them.
Ive been thinking, maybe I should move away to have total control of everything. I know one or two blogs hosted on GitHub, they look nice and simple. But I am not sure if I should do that, it feels I may lose one or two features or functionality. If I am really going to move away, I probably will choose a Google App Engine blogging engine. But thats just an if.
| [1] | http://damzaky.blogspot.com/2012/10/how-to-remove-blogger-css-reset.html is gone. |