2012/03/02

Blogger 自動ReadMoreを使いつつページサイズを改善する方法

昨年ダルシーさんの記事「ダルシーの日記:BloggerでReadMoreを自動でつける」を参考にして自動的に続きを読む(readmore)を付加する機能を導入してみました。

導入によってトップページの見た目がスッキリしました!

非常に気に入っているんですが、トップページのページサイズが変わらない問題に今更気が付きました。

今回は自動ReadMore機能を使いつつ、ページサイズを改善する方法をメモしておきます。

ページサイズが変わらない理由は?

昨年投稿した「bloggerに自動readmore(もっと読む)を導入して読み込み速度を上げる」を見ていただければわかりますが、導入前後でページサイズ(1.1MB)は全く変わっていません。

image image

自動readmore機能は

  1. 設定した最大件数分の記事内容をロードする
  2. JavaScriptを使用し、クライアント処理で記事の先頭部+最初の画像のみを表示

する作りになっています。

ページサイズが変動する原因は?影響は?

トップページのページサイズの変動は

  • トップページに表示する記事数
  • 記事に載せる画像のサイズや数
  • ガジェット(ウィジェット/ブログツール)の数

などに起因します。

ページサイズが肥大化した場合、ADSLや3G回線だと表示が完了するまでに時間がかかります

結果、イライラ感がつのる→離脱率・直帰率が向上/ページビューやユニークユーザ数の減少につながるかもしれません。

相当そのサイトが魅力的で時間がかかっても見たい!というユーザは別でしょうけども。。。

Snippet+ThumbnailUrlでページサイズを改善!

自動ReadMore機能を使いつつページサイズを改善するためにはdata:post.snippetタグdata:post.thumbnailUrlタグを使います。

論より証拠、導入前後のページサイズをみてください。

上の画像は導入前(1.2MB)、下は導入後(0.65MB)の計測結果ですが、導入前後でページサイズが約半分になっています。

※ロード時間が増加したのはブログパーツによるものだと思います。

image

                     ↓

image

各タグの動作は下記のようになっています。

  • data:post.snippetタグ
    サーバ側で記事の先頭を抽出、表示します。
  • data:post.thumbnailUrlタグ
    軽量なサムネイル画像を表示します。

両タグともにモバイルサイトのソースコードを解析した時に見つけました。

ソースコード

実際に導入したソースコードは下記のようになります。

サムネイル画像を通常画像に変更&リサイズ処理はBLOGGER PLUGINの記事「Post Thumbnails for Blogger」を参考にしました。

<!--readmore-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div expr:id='&quot;summary&quot; + 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(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
      </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'>続きを読む&#187;&#187;</a>
   </span>
  </div>
</b:if>
<!--readmore end-->
スポンサーリンク

スポンサーリンク