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>

上記の部分を以下のように書き換えます(文字化けではありません)。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<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個も減らすことができました!。

関連性がある記事

Disqusでコメント