この Blog は、文章中心なので、然程、画像は多くないですが、Blog に依っては、
大きな画像を しこたま テンコ盛り の賑やかなのも多いですね。
ShiroYuki_Mot も、写真を中心にした Blog を別に持ってますが、ページを開くのがのんびりでした。
最初は、画像を Internet 経由で読み込んでるから、ショウガナイのかなあ って ... 。
他の Blog を覗いて見ても、早い処もあれば、遅い処も。
何が違うんだろうって、いつもの様に、ぼ~ と感じていました。
あるキッカケで、少し、調べて見るかぁ となったのですが、 それは、また、改めて別投稿で。
速く出来るんですね。
所謂、Lazy Load って奴です。 遅延読み込み。
最初に、必要な部分だけ読み込んで、ページの外の未表示の画像は後回しにする様です。
スクロール指示で、画面表示が要求された時に、改めて、読みに行く様です。
このため、 Lazy Load って呼ばれてるんですね。
今回、対応策として、やった事を纏めましょう。
あっ、この Blog では以下の対応策は適応していません。 別の Blog が対象です。
以下の、HTML をテンプレートに埋め込みます。
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFyf4Ezaxp1nvfsiJRvopYeRZCZ90dfIE7K37kYBQxUcmIMMSoOAd7ojMA0m4-qgs0QQdQ0IfL44IEkF_Sq58HoCMT1iY7Hqd7uJJyIQS0RPFDetbWVudq-PfQw5gLPziKLefSXho7Wvu/s1600/best+blogger+tips.png'/></a><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>埋め込む位置は、 </head> の前。 ( head ブロック要素の最後に記述します。 )
<script src='http://pwam.googlecode.com/files/jquery.lazyload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "http://pwam.googlecode.com/files/grey.gif",threshold : 200});
});
</script>
Copy and paste the following code Directly Before / Above </head> 以下のサイトの説明から引用
これは、以下の英文のサイトで見付けました。 Blogger 対象に書かれた投稿です。
http://www.spiceupyourblog.com/2010/09/speed-up-blog-lazy-load-plugin.html
Speed Up Your Blog With The The Lazy Load Plugin | Spice Up Your Blog Author : Mr. Paul Crowe
基本的には、これだけです。
これで、最初のサイト表示の所要時間が改善されます。
さて、ここからは応用編。
先に述べた様に、これで初期表示の時間短縮は図れましたが、ひとつ問題があります。
スクロール先にも、画像が沢山あった時には、また、もとの のんびり モード なのです。
これは、HTML 記述中の 赤い字 200 を 400 (~600) に変える事で、少しは改善されます。
threshold は、先読みする範囲を指定するので、これを若干大きめに設定する事で回避します。
まだ、試行錯誤の最中でして、他の対応策や方法があると思っています。
取り敢えず、今回は、上記の方法で逃げてみました って事で ... 。
0 件のコメント:
コメントを投稿