「Bloggerが重い！」そんな時はわずか１分でページ表示が軽くなるこの方法を試してみればいいじゃない

福岡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分程度でできて非常にお手軽。

どうですかね？フワっと表示されてます？

早い話が、ページを開くと同時に全ての画像を読み込むと表示に時間がかかる→スクロールに合わせて適宜表示しようじゃないか、ということです。
方法は以下の３ステップ。

</head>直上に以下のコードをコピペ

Bloggerのダッシュボードにログイン
「テンプレート」の「HTMLの編集」を開く
ctrl+fで”</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>

以上！！場所は<head>～</head>間ならどこでもいいと思いますが分かりやすいように</head>の真上にコピペしましょう。

※コード貼り付け前にテンプレートの保存を忘れずに！
※ 元記事のコードを若干いじってます。福岡chで言うところの右側カラム「人気記事ランキング」などのサムネまでLazyになってたのでブログ本文（post-body）だけLazyにするよう書き換え。
※「ガジェットの追加」で（場所はどこでも良し）「HTML / Javascript」ガジェットを追加してそこに上のコードをコピペしてもいいらしい（この方法は試してないので確証なし）。
※Javascriptの置き場が気になる人はプラグインを本家から落としてGooglesites等に各自アップロードのこと。
※上記手順で生じたいかなるトラブルも当方は一切の責任を負い兼ねます。