はてなブログでLazy Loadを使う方法！コピペで簡単に使える！

当サイトは広告、アフィリエイトを含みます

以前からはてなブログで、画像遅延読み込みするLazy Loadの導入を考えていて、不具合が多かったのでやってなかったのですが、久しぶりにやってみたらほぼ誤作動なく動いたので、皆さんにも紹介しようと思います。

ちなみに私のサイトは、Innocentですが他のテーマでも動くと思います。

Contents

画像遅延読み込みとは？
注意点
Lazy LoadのCSS
- 画像のコードを変える
最後に

画像遅延読み込みとは？

画像遅延読み込みとは、その名の通り画像の読み込みを遅らせるものになります。

読者が記事をクリックし、ページが表示されたときに全部の画像を一気に読み込むとページの表示速度が落ちます。

なので、目視できない部分にある画像を読み込むのを遅らせるによって、ページの表示速度を上げるんです。

ページの表示速度が上がるのは、SEO的にも良いですよ。

私は今はWordpressを使っているのですが、Lazy Loadを使っていない人はいないと思います。みんな使っていますね。

注意点

Lazy Loadを使うにあたって4点ほど注意点があります。

グーグルクローラーが画像を認識しない（可能性があり）
見たまま編集では画像が表示されない
手作業が必要
遅延されていない画像が時々ある

1　Lazy Loadを使うとグーグルクローラーが画像を認識しないらしいので、画像検索から流入がある人はよく検討してから導入するかしないか決めてください。

なぜ「らしい」と言ったかと言うと、WordpressのLazy Loadはクロールに認識されているので、はてなでもされるんじゃないかな？って思っています。

ただしalt属性を入れたら不具合になるので、どちらにしても画像検索から流入が無い人向けになります。

２　見たまま編集では画像が表示されなくなりますが、プレビューでは表示されているので、そちらで確認してください。

３　下で説明していますが、記事内の画像のHTMLを手作業で変えるので、ちょっと面倒です。

４　先ほど「ほぼ不具合が無い」と言ったのですが、「ほぼ」とは、時々遅延読み込みされない画像があるんです。

理由は分かりません。

Lazy LoadのCSS

まずはこちらのテストサイトをどうぞ。最後の写真は2MBの写真ですが、サイトが重くならずに表示されています。

参考にしたサイトは、PhotogLifeさんです。

Lazy Loadのコードの貼り付け場所は、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「フッタ」です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
$('.lazy').lazyload({
effect : 'fadeIn',
threshold :200
});
</script>

ちなみに、jqueryを入れてない人は、下記のコードをフッタの一番最初に張り付けておいてください。でないと動作しないです。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

これで準備は終わったので、さっそくやってみましょう。

画像のコードを変える

まず、はてなブログに画像をアップロードし、HTML編集で見たら、画像のコードはこんな感じになっています。

<img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/n/your name/20200121/20200121061709.jpg” alt=”f:id:your name:20200121061709j:plain” title=”f:id:your name:20200121061709j:plain” class=”hatena-fotolife” itemprop=”image” />

で、必要な部分は赤文字の部分です。

赤文字の部分を下のコードにコピペし、HTML編集で下記コードを貼り付ければ完成です。