昨年ダルシーさんの記事「ダルシーの日記：BloggerでReadMoreを自動でつける」を参考にして自動的に続きを読む（readmore）を付加する機能を導入してみました。
導入によってトップページの見た目がスッキリしました！
非常に気に入っているんですが、トップページのページサイズが変わらない問題に今更気が付きました。
今回は自動ReadMore機能を使いつつ、ページサイズを改善する方法をメモしておきます。
ページサイズが変わらない理由は？
昨年投稿した「bloggerに自動readmore(もっと読む)を導入して読み込み速度を上げる」を見ていただければわかりますが、導入前後でページサイズ（1.1MB）は全く変わっていません。
自動readmore機能は
- 設定した最大件数分の記事内容をロードする
- JavaScriptを使用し、クライアント処理で記事の先頭部＋最初の画像のみを表示
する作りになっています。
ページサイズが変動する原因は？影響は？
トップページのページサイズの変動は
- トップページに表示する記事数
- 記事に載せる画像のサイズや数
- ガジェット（ウィジェット/ブログツール）の数
などに起因します。
ページサイズが肥大化した場合、ADSLや3G回線だと表示が完了するまでに時間がかかります。
結果、イライラ感がつのる→離脱率・直帰率が向上／ページビューやユニークユーザ数の減少につながるかもしれません。
相当そのサイトが魅力的で時間がかかっても見たい！というユーザは別でしょうけども。。。
Snippet＋ThumbnailUrlでページサイズを改善！
自動ReadMore機能を使いつつページサイズを改善するためにはdata:post.snippetタグとdata:post.thumbnailUrlタグを使います。
論より証拠、導入前後のページサイズをみてください。
上の画像は導入前（1.2MB）、下は導入後（0.65MB）の計測結果ですが、導入前後でページサイズが約半分になっています。
※ロード時間が増加したのはブログパーツによるものだと思います。
↓
各タグの動作は下記のようになっています。
- data:post.snippetタグ
サーバ側で記事の先頭を抽出、表示します。 - data:post.thumbnailUrlタグ
軽量なサムネイル画像を表示します。
両タグともにモバイルサイトのソースコードを解析した時に見つけました。
ソースコード
実際に導入したソースコードは下記のようになります。
サムネイル画像を通常画像に変更＆リサイズ処理はBLOGGER PLUGINの記事「Post Thumbnails for Blogger」を参考にしました。
<!--readmore-->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><div class='csnippet'>
<b:if cond='data:post.thumbnailUrl'>
//サムネイル画像を通常画像に変更＆リサイズ処理<div class='Image'>
<script type='text/javascript'> //<![CDATA[ function bp_thumbnail_resize(image_url,post_title) { var image_size=170;var show_default_thumbnail=true;
var default_thumbnail='';
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]></script>
<script type='text/javascript'>document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</div>
</b:if><div class='post-body'>
<!--記事先頭部のみを表示-->
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if></div>
</div>
<!--readmore（続きを読む）-->
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>続きを読む»»</a></span>
</div>
</b:if><!--readmore end-->