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

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

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

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

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

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

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

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

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

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

  1. ブログアーカイブの Ajax メニューが動作しない。
  2. 画像のライトボックス表示機能が動作しない。
  3. 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","MS Pゴシック",Osaka,"ヒラギノ角ゴ Pro W3,"メイリオ",Meiryo,sans-serif\"", 
    "unvisitedLinkColor": "rgb(0, 0, 238)"
}

転送量を計測してみます

比較軽量化前軽量化後減量率
jsリクエスト数9 件4 件44.4%
jsリクエストサイズ289.9 KB43.5 KB15.0%
総リクエスト数26 件20 件76.9%
総リクエストサイズ347.0 KB93.7 KB27.0%

以下に計測に使用した Firefox + Firebug のスクリーンキャプチャを添付します。

軽量化前の全てのリクエストです。

軽量化前の js のリクエストです。

軽量化後の全てのリクエストです。

軽量化後の js のリクエストです。

ひとつは自分で追加したコードハイライターのもの。残りの三つはコメントフォームの iframe が呼び出しているものです。

javascript のグローバル空間の様子

軽量化前の Firefox の DOM パネルの様子です。

グローバル空間に様々なプロパティがぶちまけられています。これではブラウザアドオンや外部スクリプトと干渉しないかとヒヤヒヤものです。

軽量化後の Firefox の DOM パネルの様子です。コードハイライターのオブジェクトが追加されているだけです。

最後に

数百Kbit/秒 という転送速度のワンコインデータ通信 SIM が登場してしばらく経ちます。ISDN 時代の再来のような軽量な Web 開発の重要性が再び増しつつあるのではないでしょうか?

さぁ、今こそあなたの Blogger も肥大化した <script> を捨て去るときです!なんちゃって…