Bloggerの読み込み遅延の元凶「widget css bundle」を削除して高速化する

所謂…「SEO対策」など微塵も興味が無いのですが…

Blogger でテンプレートを好みのデザインにするため…

JavaScript を多用すると…いかに非同期読み込みにしようとも…当然ながら…

ページのロードスピードは低下して行きます…これは我慢できません…

しかしながらデザイン優先でやっていますから…

JavaScript との兼ね合いでバランスを取る事になる訳です…

…で…他の…様々な読み込み遅延の原因を調べて…

Remove the following redirect chain if possible:

…とか叱られムカツキながらも…

ページのロードスピードを少しでも速くするため個別に対応して行く訳ですが…

その過程の中で必ず行き当たるのが…

Blogger から自動的に付与されてしまう「widget css bundle」です…

仕様だからと…サイト開設から３年以上放置して来ましたが…

朗報は…突然舞い込みました…

「How to remove blogger CSS reset stylesheet (widget bundle) / Damzaky」

素晴らしい …長年の懸案事項が…いともアッサリと

このチュートリアルのおかげで外部 ファイル化していた自前の CSS を元に戻しても…

読み込み速度が…１秒以上改善されました…

上記サイトでは…中身をカラにして直下に自前の CSS を記述していますが…

中身をカラにしなくても問題無さそうですので…一応…手順を記載しておきます…

ちゃんと…バックアップしてから作業して下さいな…

「デザイン」「HTMLの編集」から…

「Ctrl + F」で「<b:skin><![CDATA[」を検索すると…該当部分は…

<b:skin><![CDATA[
ご自身のスタイルシート
]]></b:skin>

…ってな感じになっていますので…

黄文字部分を以下のように書き換えます…

<style type="text/css">
&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?targetBlogID=ご自身のブログID"/>
<style id='page-skin-1' type='text/css'><!--
*/
ご自身のスタイルシート
--></style>

…ってな感じに…CSS が２つコメントアウトされています…

ブラボー～～

2013.08,10 追記

コメントで…universe さんにご指摘いただいた通り…
テンプレートデザイナー対応の CSS ではカラム落ちします…
CSS を独自に構築して下さい…ｍ(＿ ＿;)ｍ

Tips Header Sidebar Main Footer Current-Label : Universal