![blogger-logo_mini blogger-logo_mini](http://lh3.ggpht.com/-jeTFAkMgRy4/Ubk9xwiWw-I/AAAAAAAAG9o/Hw65UAyZaVY/blogger-logo_mini_thumb.jpg?imgmax=800)
福岡chはGoogleのブログサービス『Blogger』を使っています。Wordpressへの移行も何度か検討したのですがダラダラと使い続けております。
Bloggerはアメーバやライブドアなどに比べ日本ではややマイナーではありますが、例えば”Twitter”もその公式ブログにBloggerのプラットフォームを使うなど世界的にはポピュラーなものとなっております。
さて、我が福岡chですが、広告やらソーシャルプラグインやらZenbackやら貼っているものですから表示が重たい!(ご迷惑をおかけします・・・)
他のBloggerを利用したブログを見てもソーシャルプラグインとの相性が悪いのか(特に『いいね!ボタン』!コノヤロウ!)うちみたくモッサリしてるページが多い気がします。
そこで少しでもページ表示が早くなるように”使えそう”かつ効果が出た(いまだ重たいですが以前よりマシ)記事を見つけたので共有しておきます。
画像をふわっと表示させる”Lazy Load Plugin”を入れよう
How To Add JQuery Lazy Load Plugin to Blogger(英語サイト)
ページのスクロールに合わせて画像を表示する”Lazy Load Plugin”というやつがあるのですが、それをBloggerに実装する方法です。これがまた1分程度でできて非常にお手軽。
![基峰 基峰](http://lh4.ggpht.com/-vvZQlq-_RFk/UbeXqa_PkzI/AAAAAAAAG8U/NDmR-Fcxf4g/%2525C3%2525BA%2525C3%2525B0_thumb%25255B5%25255D.jpg?imgmax=800)
![基峰3 基峰3](http://lh6.ggpht.com/-HzsTc2uTu8U/UbeXrdm5IZI/AAAAAAAAG8c/q7VzknAOvxg/%2525C3%2525BA%2525C3%2525B03_thumb%25255B3%25255D.jpg?imgmax=800)
![基峰4 基峰4](http://lh6.ggpht.com/-9dXNEbBFJDM/UbeXspDIzyI/AAAAAAAAG8k/iZk32K6zJ7o/%2525C3%2525BA%2525C3%2525B04_thumb%25255B3%25255D.jpg?imgmax=800)
![基峰5 基峰5](http://lh3.ggpht.com/-GDEbEyFcedc/UbeXuoj99AI/AAAAAAAAG80/1okn5L_aYAk/%2525C3%2525BA%2525C3%2525B05_thumb%25255B3%25255D.jpg?imgmax=800)
![基峰6 基峰6](http://lh4.ggpht.com/-YDZAFkwmJL8/UbeXvqZGKxI/AAAAAAAAG88/pJfpCCWYU58/%2525C3%2525BA%2525C3%2525B06_thumb%25255B3%25255D.jpg?imgmax=800)
どうですかね?フワっと表示されてます?
早い話が、ページを開くと同時に全ての画像を読み込むと表示に時間がかかる→スクロールに合わせて適宜表示しようじゃないか、ということです。
方法は以下の3ステップ。
</head>直上に以下のコードをコピペ
- Bloggerのダッシュボードにログイン
- 「テンプレート」の「HTMLの編集」を開く
- ctrl+fで”</head>”を検索し、</head>直上に以下のコードをコピペ
<!--Lazy Load Plugin for jQuery-->以上!!場所は<head>~</head>間ならどこでもいいと思いますが分かりやすいように</head>の真上にコピペしましょう。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery(".post-body img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Qzu8YUE-X49g-WgbZgfwo7xjIM4OXeSR3HOEnI00wfyWUkAy2Vqjxnof8fIvxcag-hbIc-okODumlZSBeuU7IwmkJ96v9LbLYOKecgOCYGTf_xMoiBC7NTJdc0v91XVz7T761KkSK_k/s1600/grey.gif"
});
});
</script>
<!--Lazy Load Plugin for jQuery-->
※コード貼り付け前にテンプレートの保存を忘れずに!
※ 元記事のコードを若干いじってます。福岡chで言うところの右側カラム「人気記事ランキング」などのサムネまでLazyになってたのでブログ本文(post-body)だけLazyにするよう書き換え。
※「ガジェットの追加」で(場所はどこでも良し)「HTML / Javascript」ガジェットを追加してそこに上のコードをコピペしてもいいらしい(この方法は試してないので確証なし)。
※Javascriptの置き場が気になる人はプラグインを本家から落としてGooglesites等に各自アップロードのこと。
※上記手順で生じたいかなるトラブルも当方は一切の責任を負い兼ねます。
Before
After
![アフター アフター](http://lh6.ggpht.com/-prc1I9O2OY8/Ubk90v1qXJI/AAAAAAAAG-I/J_gvz1brxCU/%2525C2%2525A2%2525C3%252595%2525C2%2525BF%2525C3%2525BC_thumb%25255B1%25255D.jpg?imgmax=800)
プラグイン導入後3.69秒。ほんの気持ち早い(笑)
画像が多いページだともう少し差が出てくるかもしれませんね。
作業自体はすぐ終わるし、フワッと画像表示されたほうがなんか気持ちいいしオススメです!
いままさに表示しているこのページが重たいんで説得力ありませんけどね気持ちの問題ですええ。