Bloggerを究極軽量化してワンコインSIMで爆速表示する
コメントフォームが IE7 以下で動かなかったのを修正しました。てっきり Google さん側で弾いているのかと思っていました…(2015/12/06)
“画像のライトボックス表示機能が動作しない”も「Blogger究極軽量化の完成、画像拡大は非lightboxで」で対策できました。(2015/11/23)
軽量 Web 時代、再び―
ADSL や光回線といったネットワーク環境の大容量化に歩を合わせて最近の Web サイトは1ページ辺りの読み込み量が 1MB を超えることもザラです（Web アプリケーションではないですよ！）。
一方で、固定回線に比べて低速であったり通信量制限のあるモバイル通信の拡大、さらにはワンコインデータ通信 SIM の登場によって、軽量な Web の重要性が再び増しつつあります。
原稿用紙にして数枚分のテキストを流通させるために、ｩン MB はないですよね…何千ページか閲覧する内に速度制限が掛かっていてはたまりません。
早速 Blogger を軽量にしていきます
前回の記事で超軽量化を達成した僕の blogger ですが、一方でいくつかの問題が発生しました。
ブログアーカイブの Ajax メニューが動作しない。解決、というより回避！- 画像のライトボックス表示機能が動作しない。
js が無効の場合もコメントフォームが表示され動作しない。解決！
本記事では上の 3 つの問題のうち 2 つをいい感じに解決しました。さらに 50% 程度の高速化ができました。
以下にご紹介します、何かの参考になりましたら幸いです。
ブログアーカイブの調整
ブログアーカイブ・ウィジェットはユーザーのクリック操作によって動的に月毎の記事情報を取得して記事タイトルとリンクを表示していました。
blogger.com が提供する一切の javascript を読み込まなくなったことでこの部分の動作も停止しました。
独自に javascript を書いてこの部分を再び動作させることも検討しましたが、画像のように年～月までのデザインとしたため不要になりました。
そんなブログアーカイブのテンプレート部分は次の通りです。
<b:widget id='BlogArchive1' locked='true' type='BlogArchive'>
<b:includable id='main'>
<div class="footer-sub-inner">
<b:if cond='data:title != ""'>
<h3><data:title/></h3>
<b:else/>
<h3>記事アーカイブ</h3>
</b:if>
<b:loop values='data:data' var='i'>
<div class="archive-item">
<span><data:i.name/></span>
<b:loop values='data:i.data' var='j'>
<a expr:href='data:j.url'> <data:j.name/><b:if cond='data:j.post-count != 1'><small>(<data:j.post-count/>)</small></b:if></a>
</b:loop>
</div>
</b:loop>
</b:includable>
</b:widget>
究極軽量化！コメントフォームを動的に読み込み
今回のカスタマイズによって、無駄なリクエストを無くして高速に投稿のプレビューができるようになりました。
さらに、コメントフォーム用 iframe の生成を読者による操作の後に行うようにすれば、プレビュー画面といわず常に高速にページを表示することだってできます。
js が切れているとコメントできない
まず Blogger のコメントフォームは残念なことに javascript が切られていると動作しません。
このためか Blogger のデフォルトではフォームは javascript によって動的に表示されています。これならば、javascript を切っているユーザーに対してフォームを表示することはありません。
前回のカスタマイズでは <script> タグを全廃した結果 javascript の有無に関わらず常にフォームを表示するようになっていました。
これをユーザーのクリックによって（javascript で）フォームを表示するようにしました。
javascript を切っているユーザーに対して無用にフォームを読みこむことは無くなり、閲覧だけのユーザーにフォームは読み込まれません。
コメントフォームを表示しない → 転送量が 30KB 程度に
ところでコメントフォームを表示すると 30KB 程度のコンテンツを追加で読み込みます。記事ページの総読み込み量は 60KB 程度、つまりコメントフォームが転送量の約半分を占めていました。
そんなコメントフォームの改造によって 1 ページ辺りの転送量は僅かに 30KB になってしまいました。
フォーム周りのテンプレートは以下の通りです。div タグの onclick 属性で諸々書き出しているためちょっと複雑になっています。
<b:if cond='data:post.allowNewComments'>
<div id="Cf" class='Ch' expr:onclick=""this.className=this.onclick='';this.innerHTML='<h3>" + data:postCommentMsg + "</h3><p>" + data:blogCommentMessage + "</p><iframe frameborder=0 scrolling=no name=If>';If.location.href='" + data:post.commentFormIframeSrc + "';"">
<a href="javascript:void(0)" hidefocus="true"><noscript>javascript が無効のため</noscript>コメントを投稿<noscript>できません。</noscript>
</a>
</div>
<data:blogTeamBlogMessage/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
次のコードは IE7 以下で動作しません。
<b:if cond='data:post.allowNewComments'>
<div class='comment-form comment-form-hidden' expr:onclick=""this.className='comment-form';this.removeAttribute('onclick');this.innerHTML='<h3>" + data:postCommentMsg + "</h3>" + data:blogCommentMessage + "<iframe frameborder=0 scrolling=no src=" + data:post.commentFormIframeSrc + ">'"">
<a href="javascript:void(0)">コメントを投稿する <data:blogTeamBlogMessage/>
<noscript>javascript が切れているためコメントできません。</noscript>
</a>
</div>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
そうそう、Blogger にはポップアップ・ウィンドウ型のコメントフォームもありますが、こちらは機能過多でヘビーなため早々に検討から外しました。
その他の軽量化
コメントフォームの軽量化に加えて一般的な js と css の minify も行っています。
また js ファイルは今のところコードハイライターだけのため、これは記事ページと固定ページだけで読み込んでいます。
ちなみに css の minify は CSS Minifier と比較して若干圧縮率の高かった CSS optimizer を使用しています。
この他にテンプレートの xml に対してもコメントの除去とタブの削除の minify を行っています。これによって微々たるものですが 2KB 程度の転送量を減らしています。
ここでホリエモンの“テキストの時代だ”の件
2013 年の記事ですが html 書きとしてホリエモンの指摘したこの件は折に触れ考えています。
たとえば日刊サイゾーっていうのがある。日刊サイゾーのアプリを入れてるんだけど、めちゃくちゃサクサク読めるわけ。テキストと写真がちょっとしか載ってないから、いますごい読みやすいんですよ。
で、僕はテキストの時代だと思ってる。映像も画像もそれはリンクで飛ばせば、Facebookのタイムラインみたいに、サムネイルだけ載ってますみたいな。僕はその程度でいいと思うんですよ。テキストだと表示も早いし、アプリもさくさく動く。
テンプレート xml から空白ノードを除去したり（空白ノードだって僅かながらマシンリソースを喰いますから）画像も意識的に小さいものを貼って、軽量化・高速化には心を砕いています。
テキストの軽快さには敵うものではありませんが、30KB ならなかなかいい線いっているのではないでしょうか…？