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 don’t touch the template code and use quite some gadgets, then this definitely isn’t 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 Blogger’s Javascript, then this would probably be helping your a bit.
It’d be less files (2 files) and less data transmitted (100 KB, gzip’d ~37 KB). Think about it: 100 KB and most of them are not needed, it’s 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>
I’d think I have no extra stylesheet, but no. Because it’s 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 gzip’d. 20KB is quite large in terms of a CSS file, let along it’s only accountable only for widgets, which you can say this blog only have some essentials. I am almost certain that it’s a waste and I may also need to do some hard overriding !important for some rules, if any gets conflicted with Blogger’s in my own CSS.
I spent some time trying to find a setting or template tag to stop that injection, but I couldn’t 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. It’s 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 that’s why we need to an additional <style> in order to have a valid HTML for that part of code. Wicked, isn’t 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 haven’t 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>
It’s the same trick, only used in reverse way.
3 Conclusion
Although Blogger’s CSS and JavaScript for widgets or gadgets can be removed by using the trick above, but I really don’t like ding that. It’s cool, but it’s 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. It’s 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. It’s good but not for someone wants to minify everything, it’s a headache for them.
I’ve 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 that’s just an if.
| [1] | http://damzaky.blogspot.com/2012/10/how-to-remove-blogger-css-reset.html is gone. |
This was of huge help for me, thanks. You have a good style of writing, I enjoyed this article.
ReplyDelete