📝

【はてなブログ】LazyLoadを導入してブログの表示を早くする方法

今回はLazyLoardを使った『ブログの表示の高速化』について紹介していきます。使うブログサービスははてなブログです。

LazyLoadとは

LazyLoadとはWordpress用に作られた画像データを遅延読み込みさせるプラグインです。

本来ブログなどのWEBページでは、ページを開く際に記事の中で使われているすべての画像が読み込まれる仕組みになっています。そのため大量の画像が貼られているページでは表示速度が大変遅くなってしまいます。

そこでLazyLoadを使うことによって、先に必要な画像だけを読み込ませることができるようになるため、結果的にブログの表示が早くなります。必要な部分とは、スクロールをしたときに実際に見えている部分を指します。つまり見えない部分はあとから読み込んでいるということになります。

はてなブログでLazyLoadを使ってみる

LazyLoadのライブラリを読み込ませる

冒頭の通り、元はWordpress用のプラグインなのでそのまま流用して使うことはできません。そのためまずはライブラリを読み込ませます。

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

<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>

上のコードをheadに書いてください。またjQueryを読み込ませていますが、すでに読み込ませている場合は余計に重くなるので、消去してください。

画像の読み込み部分を書き換える

画像を遅らせて読み込ませるには、HTMLで使うコードを少し変える必要があります。以下は普段使うコードです。

<img src="~~~">

このままではすべての画像が読み込まれてしまうので、以下のコードに書き換えます。基本的にはsrcdata-originalに変えてクラス名をつけるだけです。

<img data-original="~~~" class="hatena-fotolife lazy">

ここで注意点ですが、LazyLoadを使った場合プレビューでは画像が表示されなくなります。実際に公開すると見れるようになるので気にしなくて大丈夫です。

表示されない間の対処法

LazyLoadではあとから読み込むという特性上、若干のタイムラグが生じる場合があります。これは普通のブログでは特別問題になることではないのですが、写真ブログやECサイトなどある程度何が写っているか分かる必要があるサイトでは大問題です。

そのような場合には以下のコードを使うことで高画質の画像が表示されるまでの間、代わりに画質を落とした容量の少ない画像を表示させておくことができます。

<img class="hatena-fotolife lazy" src="画質を落とした画像のパス" data-original="元の画像のパス" />

当然、低画質とはいえ画像を一度読み込ませるわけなのでブログ自体は重くなりますが、導入する前よりは早くなると思います。


WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation