BloggerでGoogle製jsの読み込みを辞めて超軽量化、但しコメントフォームは動かす

2015年04月26日日曜日 08:49

Blogger mods

Blogger の挙動が変わり <head> タグの最初の子に css が追加されるようになりました。これを無効にする方法を追記しました。2017.5.10

不具合に対策し続きを書きました。2015.5.22

いざ、禁断のカスタマイズへ

Google のブログサービス、Blogger をアグレッシブにカスタマイズしたところ、とあるページにて 総リクエストサイズを 27% にすることが出来ました。

とはいえ通常は手をつけないような思い切ったカスタマイズを行っているため、どこにどんな不具合が出るやら。

僕は好奇心に負けてカスタマイズしてしまいました。リスクと効果を天秤に掛けて割に合わないことをしていると思います…

本記事はカスタマイズ方法の紹介に留まらず、万が一（どころでなく十が一）の復旧のために書き残しています。

もしこの記事を参考にカスタマイズを行う場合は諸々のリスクを覚悟し、バックアップを取る・テスト用のブログでテストを重ねる、など慎重に進めましょう。Enjoy!

また現在確認している不具合は次になります。どちらも対処が可能ですが一旦放置しています(汗

ブログアーカイブの Ajax メニューが動作しない。
画像のライトボックス表示機能が動作しない。
js が無効の場合もコメントフォームが表示され動作しない。

デフォルトの CSS を読み込まない

</head> の手前で以下のように書きます。必要な自前の CSS は <link> タグなどで読み込みます。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin></b:skin>

追記 2017.5.10

おそらく今日から <head> タグの最初の子として css（<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css' />）が追加されるようになっています。これをコメントアウトで無効化するには次のようにします。

&lt;!-- <head> --&gt;&lt;head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'&gt;

デフォルトの js を読み込まない

</head> の部分を次のようにして head の閉じタグの直前に挿入される <script> を無効化します。

&lt;!-- </head> --&gt;&lt;/head&gt;

</body> の部分を次のようにして body の閉じタグの直前に挿入される <script> を無効化します。

&lt;!-- </body> --&gt;&lt;/body&gt;

コメントフォームの DHTML を切って静的に埋め込む

以下の内容には、js が切られている場合もコメントフォームが読み込まれてしまう不具合があります。コメントフォームのために約30KBの html, css, js がロードされます。

この不具合に対策済のコメントフォームの究極軽量化については『Bloggerを究極軽量化してワンコインSIMで爆速表示する』を確認ください。(2017/10/06 追記)

コメントフォームのためのメタタグは次のようなものです。

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:none'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%' height="276"/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>   BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;,&#39;<data:post.communityId/>&#39;);
</script>

src が空の iframe に対して js でコメントフォームの url を設定しています。

<data:post.friendConnectJs/> と <data:post.cmtfpIframe/> で js のインポートをしています。これらを読み込まなくても src さえ正しく設定されればコメントフォームは動作しています。

これを次のようなタグに変更します。

<iframe allowtransparency='true' frameborder='0' expr:src='data:post.commentFormIframeSrc' width='100%' height='276'/>

いつの間にかブログ ID が取得できるように

下の code は記事へのコメント投稿は動作しましたが静的ページでコメントフォームを読み込めませんでした。上のコードは投稿と静的ページ、どちらでも動作します。

<iframe allowtransparency='true' frameborder='0' expr:src='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id' width='100%' height="276"/>

ところで、いつの間にかブログ ID が取得できる（<data:blog.blogId/>）ようになっていますね。

今まではこのタグが使えなかったため、手動で blogID を書いていました…(遠い目

iframe のハッシュにコメントフォームの css 情報を埋め込む

ちなみにオリジナルのコメントフォームでは、iframe の src にはハッシュフラグメントにスタイル定義が埋め込まれていました。

控えていたものを次に貼っておきます。但し、実際に指定が iframe 内に反映されているか？は試していません、悪しからず。

// ハッシュ文字列
'#{"color"%3A"rgb(0%2C 0%2C 0)"%2C"backgroundColor"%3A"rgb(0%2C 0%2C 0)"%2C"unvisitedLinkColor"%3A"rgb(0%2C 0%2C 238)"%2C"fontFamily"%3A"\"Hiragino Kaku Gothic Pro\"%2C\"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\"%2COsaka%2C\"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\"%2C\"\u30e1\u30a4\u30ea\u30aa\"%2CMeiryo%2Csans-serif"}'

// decodeURIComponent & format
{
    "backgroundColor": "rgb(0, 0, 0)", 
    "color": "rgb(0, 0, 0)", 
    "fontFamily": "\"Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3,"メイリオ",Meiryo,sans-serif\"", 
    "unvisitedLinkColor": "rgb(0, 0, 238)"
}

転送量を計測してみます

比較	軽量化前	軽量化後	減量率
jsリクエスト数	9 件	4 件	44.4%
jsリクエストサイズ	289.9 KB	43.5 KB	15.0%
総リクエスト数	26 件	20 件	76.9%
総リクエストサイズ	347.0 KB	93.7 KB	27.0%