画像遅延ロードプラグインLazy Loadの設定と使い方

※2018年9月追記

Lazy Loadは今も問題なく使えるプラグインなのですが、現時点で2年間アップデートが行われていないため、セキュリティー的に問題がある可能性があります。こだわりがなければ代わりに「BJ Lazy Load」を利用してください。


BJ Lazy Loadでサイト読み込みを遅延&表示速度改善!使い方と設定方法


ブログの記事を書くのに慣れてくると段々と書きたいことも増えてきて、
ついつい記事が長くなりすぎてしまうことも多くなると思います。

そして文章の増加に伴い画像の使用率も上がっていくわけですが、
それだと読み込みに時間が掛かり過ぎる事態になってしまい、
読者の離脱率を上げる原因となってしまいます。


そこで、画像の読み込みを随時行なっていく形に変更することで、
ページ表示の遅延を最小限に抑えることが可能です。

ワードプレスの場合は遅延ロードプラグインLazy Loadを使えば
スクロール毎に画像を読み込んでいく形に出来るので、
このページでLazy Loadの設定と使い方を確認して行きましょう。

Lazy Loadの使い方と設定方法


まずはLazy Loadをダウンロードして、
プラグインを新規追加して行きましょう。

このプラグインは特に設定等はしなくても有効化するだけでOKで、
スクロールしていくと画像が遅延ロードされるようになるのですが、
デフォルトだと少し読み込みのタイミングが遅いんですよね….

別に気にならない人も居ると思いますが、個人的には少し気になるので、
もう少し読み込みのタイミングを早くして行きたいと思います。


ダッシュボードの「プラグイン」をクリックすると一覧が表示されるので、
Lazy Loadの項目の部分で「編集」をクリックしてください。

そうするとLazy Loadのソースコードが表示されるわけですが、
右側のプラグインファイルの「lazy-load/js/lazy-load.js」を選択します。



後は表示されるソースコードの中から「distance: 200」を探して、
ここを「distance: 400」に変更しておきましょう。


これによって画像読み込みのタイミングが早くなるので、
閲覧に支障が無い程度に画像の遅延ロードが可能になります。

アドセンスを使用する場合スコアカードに読み込み時間の項が有りますが、
このプラグインを使えばそれを改善することが可能ですよ。
アドセンスのスコアカードの改善方法と見方





コメントを残す