LazyLoadの設置|画像の遅延読み込みでWEBページを高速化
更新日:2021年10月8日 / 投稿日:2021年07月28日
![WEBサイトの表示速度改善にはこれ!LazyLoadの設置方法](https://knowledge-base.site/kbwp/wp-content/uploads/2021/06/how-to_lazyload_iamge-665x443.jpg)
WEBサイトの表示が遅いとユーザーにとってはストレスになるので離脱率が上がり、CVにも影響が出てきます。
また、検索結果にも影響が出ますので、SEOの観点からも改善が必要です。
今回はWEBサイトの画像の読み込み遅延をさせるプラグイン「LazyLoad」の設置で表示速度を上げる方法をご紹介いたします。
関連記事:WordPressの表示速度改善に!高速化におすすめのプラグインまとめ
~ 目次 ~
LazyLoadの設置方法
![LazyLoadの設置方法](http://knowledge-base.site/kbwp/wp-content/uploads/2021/06/how-to_lazyload_iamge0.jpg)
ライブラリーのダウンロード
まずは以下のURLより必要なファイルをダウンロードします。
URLはこちら:https://github.com/tuupola/lazyload
ダウンロードしたファイルを読み込む
LazyLoadをダウンロードしたら、headタグの中かbodyタグの閉じタグの直前に入れて読み込みます。
<script src="assets/js/lazyload.min.js"></script>
CDNを利用する場合は以下のタグを入れて読み込みます。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
ファイル読み込ませたらLazyload関数を呼び出す
ファイルを読み込ませたらLazyloadを実行させる関数を使い呼び出します。
ここまでができましたら次は遅延させる画像にクラス名を記述していきます。
<script>
$("img.lazyload").lazyload();
</script>
imgタグにクラスを追加し、data-srcを記述します
読み込み遅延を行いたいimgタグに以下のように記述を行います。
<img class="lazyload" data-src="assets/images/image.jpg" width="100" height="100" alt="image">
imgタグに「lazyload」というクラス属性を入れ、src属性を「data-src」属性に変更します。
以上がLazyloadの設定になります。
ここまでが完了しましたら後は実際に表示速度を確認し、速度が上がっていたら無事設置完了となります。
Page Speed Insightsで確認ができます
![Page Speed Insightsで確認ができます](http://knowledge-base.site/kbwp/wp-content/uploads/2021/06/how-to_lazyload_iamge02.jpeg)
Googleの表示速度チェックツール「Page Speed Insights」でWEBサイトの表示速度が確認できます。
このツールでは表示速度の他に、どの部分にどれくらい時間がかかっているかなどの分析もできますので、是非一度使ってみましょう。
LazyLoadのオプション
LazyLoadにはオプションが用意されていて、読み込ませるタイミングなども調整が可能です。
以下のパラメーターを使って読み込みを調整していきます。
threshold | 表示画面に入る200px手前で読み込まれます | |||
event | デフォルトはscrollとなっていて他にclickで画像表示が可能 | |||
effect | fadeinで画像がフェードインして読み込まれます | |||
effect_speed | エフェクトのタイミングを数値で調整できます |
loading属性で遅延表示も可能
これまではjsファイルを読み込ませて画像の遅延表示を行っていましたが、loading属性を使用する事で画像遅延を行う事も可能です。
ただし、現状は一部のブラウザのみのサポートとなっているので、使用には十分に注意して使いましょう。
<img loading="lazy" src="assetsimages/image.jpg" width="100" height="100" alt="image">
まとめ
画像の遅延読み込みのできるプラグインLazyLoadについて、使い方などをご紹介いたしましたが、いかがだったでしょうか?
ユーザーにとって使いやすいWEBサイトである事はSEOの観点からも良い事ですので、ご興味のある方は是非一度試してみましょう。
この記事を書いた人
![KNOWLEDGE BASEの中の人](https://knowledge-base.site/kbwp/wp-content/themes/knowledge_base/assets/images/common/auther_image.png)
KNOWLEDGE BASEの中の人
2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。