Bloggerのテンプレートをカスタマイズしていくと、強制的に追加されるバンドルCSS「3950009988-widget_css_bundle.css」が非常に邪魔に感じるようになると思います。
しかも、このCSSは、読み込みに非常に時間がかかる場合があり、最悪500ミリ秒以上の遅延が発生することもあります。これが無くなるだけでBlogの表示時間を短縮できる可能性があります。しかも、ファイルサイズが21KBもあるのが悩みの種です。
今回は、自動で追加されるバンドルCSSを無効化してみようと思います。
前提
恐らく、このような問題に遭遇する方は、CSSをテンプレートに記述するのではなく、CSSを外部に移動させていると思います。
そのため、テンプレートの必須要素である「<b:skin></b:skin>」が空であることを前提とします。
そもそも、この「<b:skin></b:skin>」タグにバンドルCSSを読み込むためのタグが内包されていることが問題なので、このタグをなんとかすることで問題を解決しようと思います。
テンプレートの書き換え
How to remove blogger CSS reset stylesheet (widget bundle) | Damzaky
http://damzaky.blogspot.com/2012/10/how-to-remove-blogger-css-reset.html
上記の記事が非常に参考になりました。では、早速書き換えてみようと思います。
<b:skin><![CDATA[]]></b:skin>上記の部分を以下のように書き換えます（文字化けではありません）。
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>このように書き換えた場合、テンプレートが展開されると以下のような状態になります。
<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?*************************"/>
<style id='page-skin-1' type='text/css'><!--
*/
--></style>HTMLのコメントアウトを利用してCSSを読み込まないように細工しているのが分かります。
これによって不要なCSSの読み込みを2個も減らすことができました！。