画像遅延読み込み（ Lazy Loading Images ）をはてなブログで試す方法
試す機会があったのでその時にやったことをメモしておきます。
画像遅延読み込み（ Lazy Loading Images ）とは
ページの読み込みの際に、今表示している画面外の画像読み込みを遅延させる手法です。
例えば、ページをスクロールして画像の位置に着いたらその画像を読み込み始めるように設定します。あるいは、一旦解像度の粗い画像を読み込ませておき、高解像度の画像へと置き換えます。
これによって、画像が大量にある長いコンテンツであっても、ユーザーはページ読み込みの最初に長時間待たされることなくスムーズにコンテンツを読み進めることができます。
どう実装するか
いくつかJavaScriptのライブラリがあるので活用すると楽です。
今回ははてなブログ向けに解説しますが、細かい設定やオプションについては各Githubページのhow toをご確認ください。
Lazysizes
当ブログでも、こちらの記事だけ試験的に導入しています。
1. スクリプトの読み込み
まずhttp://afarkas.github.io/lazysizes/lazysizes.min.jsを読み込む必要があります。
もしレンタルサーバーなど自前で用意していれば、このファイルをアップロードして、 <script src="＊＊＊（自前サーバーのパス）/lazysizes.min.js" async=""></script> をフッタにでも記述してください。
自前のサーバーを持っていなくても、こんな感じでコードの内容をベタ張りすればOKです。
<script async=""> ＊＊＊＊＊＊（ http://afarkas.github.io/lazysizes/lazysizes.min.js の内容をコピペ） </script>
それか、オススメではありませんが次のように上記Github上のファイルを直接読み込んでも動きます。
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js" async=""></script>
2. クラスにlazyloadを追加し、src属性をdata-src属性に書き換える
たとえば、見たままモードで挿入した画像は、次のように変更します。
<p><img class="hatena-fotolife" title="f:id:rokuzeudon:20180831231741p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/rokuzeudon/20180831/20180831231741.png" alt="f:id:rokuzeudon:20180831231741p:plain" /></p>
↓
<p><img class="hatena-fotolife lazyload" title="f:id:rokuzeudon:20180831231741p:plain" data-src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/rokuzeudon/20180831/20180831231741.png" alt="f:id:rokuzeudon:20180831231741p:plain" /></p>
これでOKです。
「一旦解像度の粗い画像を読み込ませておき、高解像度の画像に置き換える」場合はもう少し作業が要りますが、その辺りは元のGithubのページを参照して下さい。
…ちなみに、Markdown記法/はてな記法の場合も少し手間が増えます。
[f:id:rokuzeudon:20180730005038j:plain]
↓
<img data-src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/rokuzeudon/20180730/20180730005038.jpg" class="lazyload" />
- フォルダに日付が含まれていて、アップロードのタイミングによって文字列が違う
- j → jpg、p → png のように拡張子を判断する必要がある
- fotolife/ の後ろのアルファベットはユーザー名の先頭文字
この辺り、一括で変更作業しようと思うと注意が必要です。
LazyLoad（jQuery）
先に紹介したLazysizesと異なり、jQueryが必要です。
はてなブログではソースコードの下の方で jQuery をデフォルトで読み込んでいますが、このLazyLoadはその後に読み込ませる必要があります。
フッタ欄に読み込みコードを書いても、デフォルトのjQueryはさらにその後で読み込まれるため、LazyLoadが動作しません。
そこで次のようにフッタに記述し、jQueryを先に読み込みます。
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script> <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
jQueryのバージョンは、はてなブログが読み込んでいるものと揃えておけば問題ないと思います。ページのソースを確認してみて下さい。
ちなみに、imgタグ関連の作業はLazysizesと全く同じです。
尚、なぜか私のはてなブログ環境だとスマホ実機で表示した時だけ画像が遅延して読み込まれず、原因もよくわからなかったので採用を見送りました。
終わりに
Lazy Loading Images の現段階での有効性について私は正直よく知らないのですが、このように簡単に実装できるのでページ表示の高速化/ユーザー体験向上に興味のある方は試してみてください。
画像がGoogleインデックスされない = SEO対策で不利!という記事をたくさん見かけます。でも画像検索重要視してないサイトやWebサービス/ツールとかであれば問題ないのか…みたいなところもピンときていません。
詳しい方お見えになりましたらぜひ教えて下さい！
