このブログですが、最近画像を多用しているせいかトップページの読み込み速度が低下していることに気が付きました。
そこで、一番アクセスがあるトップページの読み込み速度を改善すべく、自動でreadmoreをつけるスクリプトを導入してみました。
導入方法や導入前後でどの程度速度が変わってくるかをメモしておきます。
2012.03.02 ページサイズを半減する方法を追記しました。
修正前の状態
Googleウェブマスターツールのサイトパフォーマンスを見ると現在は5sec前後です。当然、トップページに表示される記事の文字数・画像によって変化はありますが、結構重い・・・
自動readmoreを導入する
トップページの読み込み速度を向上させるため、まずは自動readmoreを導入してみました。※本当はブログパーツやFlashを使ったアフェリエイトパーツを削除するのが一番効くんでしょうけど・・・
自動readmoreを導入するにあたって、ダルシーさんが書いているダルシーの日記：BloggerでReadMoreを自動でつけるを参考にしています。
ダルシーさん、ナイス記事ありがとう～！！！
1.</head>タグの直前に下記スクリプトを挿入
※ダルシーさんは</head>の後に！と書かれていましたが、XHTMLのお作法にのっとって<script>は<head>内に挿入してみました。
1: <script type='text/javascript'>
2: /* readmore */
3: var thumbnail_mode = "no-float" ;
4: summary_noimg = 200; 5: summary_img = 120; 6: img_thumb_height = 200; 7: img_thumb_width = 200; 8: </script>9: <script type='text/javascript'>
10: //<![CDATA[
11: function removeHtmlTag(strx,chop){
12: if(strx.indexOf("<")!=-1)
13: {14: var s = strx.split("<");
15: for(var i=0;i<s.length;i++){
16: if(s[i].indexOf(">")!=-1){
17: s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
18: } 19: }20: strx = s.join("");
21: } 22: chop = (chop < strx.length-1) ? chop : strx.length-2;23: while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
24: strx = strx.substring(0,chop-1);25: return strx+'...';
26: } 27: 28: function createSummaryAndThumb(pID){
29: var div = document.getElementById(pID);
30: var imgtag = "";
31: var img = div.getElementsByTagName("img");
32: var summ = summary_noimg;
33: if(img.length>=1) {
34: imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
35: summ = summary_img; 36: } 37: 38: var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
39: div.innerHTML = summary; 40: } 41: 42: //]]>
43: /* readmore end */
44: </script>私が使っているテンプレートには<data:post.body/>は2ヶ所ありました。
そのうち、2つ目の<data:post.body/>を下記コードに置換します。
1: <!--readmore-->2: <b:if cond='data:blog.pageType == "static_page"'>
3: <br/> 4: <data:post.body/>5: <b:else/>
6: <b:if cond='data:blog.pageType != "item"'>
7: <div expr:id='"summary" + data:post.id'>
8: <data:post.body/> 9: </div>10: <script type='text/javascript'>
11: createSummaryAndThumb("summary<data:post.id/>"); 12: </script>13: <span class='rmlink' style='float:right;padding-top:20px;'>
14: <a expr:href='data:post.url'>続きを読む>></a>
15: </span>16: </b:if>
17: <!--readmore end-->どの程度高速したかをチェック！
サイトパフォーマンス計測のWebサービス「pingdom:full page test」を使って、どの程度速くなったかを確認してみました。
結果、4.71sec→4.16secと0.5sec速くなりました。
どっちにしても4secかかっている時点で遅いといえば遅い・・・
ページサイズを改善したい方は
※2012.03.02 追記
トップページのページサイズを半減する方法を見つけました。
気になる方は下記記事を見てくださいね。
サイトパフォーマンスを向上させる対策としては、まずまずの結果。
後はブログパーツなどを見直して、今度は4sec未満を目標にしたいと思います。
余談ですが、www.Apple.comはページサイズが420KB程度で3.5sec前後。
このくらいのパフォーマンスまでもっていきたいな～