Lazy Loadとは？導入するメリットや使い方・注意点も紹介！
Webページの読み込み速度を高める方法を探すなかで、「Lazy Load」と呼ばれる手法が気になった方も多いのではないでしょうか。Lazy Loadを正しい方法で実装すれば、Webページにアクセスしたユーザーに対して、情報をスムーズに表示することが可能です。
当記事では、Lazy Loadの概要や導入するメリット・デメリット、Lazy Loadの具体的な使い方・注意点について解説します。Lazy Loadの導入を検討しているWeb担当者の方はぜひ参考にしてください。
1.Lazy Loadとは
Lazy Loadとは、Webサイトに含まれるデータがブラウザに読み込まれるタイミングを調整し、ユーザーが目にするオブジェクトを優先的に表示させる技術です。
Lazy Loadなどの技術を使用していないWebサイトでは、アクセスしたページで表示されるすべてのデータが読み込まれます。しかし、ページに複数の画像データが含まれる場合、すべてのデータの読み込みが完了するまでに長い時間がかかる傾向です。
一方、Lazy Loadを実装したWebサイトでは、ユーザーの目に触れる部分の画像だけが優先的に読み込まれます。ユーザーがページをスクロールしたタイミングで、必要な画像データを読み込んで表示するため、無駄な待ち時間を省くことが可能です。
2.Lazy Loadを導入するメリット・デメリット
Lazy LoadをWebサイトに導入する際は、以下に挙げるメリットとデメリットの両方を理解しておきましょう。
| Lazy Loadを導入するメリット |
|---|
| ・ページの表示速度が向上する Lazy Loadを導入すると、必要な部分のデータだけが順次読み込まれるため、画像表示速度を向上させることが可能です。 ページの表示速度が高まることは、ユーザーの満足度を向上させるだけでなく、検索エンジン向けの最適化対策にも役立ちます。検索エンジンのアルゴリズムでは、読み込み速度が高いページが高評価となり、掲載順位が上がりやすい傾向です。 |
| ・データ転送容量が節約できる Lazy Loadを導入したページでは、ユーザーの目に触れない部分の画像データは読み込まれないため、データ転送容量が節約できます。 Lazy Loadによってデータ転送容量を減らすことで、サーバーの運営コストを下げることが可能です。また、データ転送容量が減ることで、Webサイト訪問者は通信容量制限を圧迫せずにページを閲覧できる点もメリットといえます。 |
| Lazy Loadを導入するデメリット |
|---|
| ・ページのずれが発生する可能性がある Lazy Loadを導入すると、画像の遅延読み込みにともなって、ページに含まれる要素がずれる可能性があることがデメリットです。ページの表示領域がずれると、ユーザーがリンクやボタンを誤ってタップしてしまう恐れがあります。また、ページに表示される要素のずれは、検索エンジンから低評価を受ける対象です。 ただし、Lazy Loadを実装する際に適切なコーディングを行うことで、ページがずれる問題は解決できます。 |
| ・読み込みが遅れた画像は低画質で表示される Lazy Loadが実装されたページの画像部分は、スクロールされるまで空白や低画質の状態です。そのため、ユーザーの通信環境や端末の挙動によって、スクロールされたタイミングにページ表示が間に合わない場合があります。 ページ全体で使用する画像のデータを圧縮するなどの対策により、低画質な画像が表示されるリスクは抑えられます。 |
3.Lazy Loadの導入方法と使い方
Lazy Loadは、専用のプログラムを用いてWebサイトに直接コーディングするか、CMSツールである「WordPress」のプラグインを使う方法のいずれかで導入が可能です。Lazy Loadを実装したいWebサイトの状況に応じて、適切な方法を選択しましょう。
ここでは、Lazy Loadの導入方法と使い方について解説します。
3-1.専用のプログラムをコーディングする方法
専用のプログラムをコーディングしてLazy Loadを実装する場合、GitHubで公開されているJavaScriptライブラリ「Lazy Load」を使用しましょう。
専用のプログラムをコーディングしてLazy Loadを実装する方法は、次の通りです。
（1）ライブラリを読み込むためのscriptタグを記述する
最初に、Lazy LoadのJavaScriptを読み込むためのタグを記述します。Lazy Loadを実装したいWebページのhead部分またはbody部分に、次のコードを追記してください。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>（2）imgタグの属性を設定する
ページに含まれるimgタグに、次のような属性を設定します。
<img class="lazyload" width="400" height="300" data-src="img/gazou.jpg" alt="サンプル画像" />Lazy Loadを実装したい画像のimgタグでは、クラス属性に「lazyload」を記述しましょう。横幅と高さを表すwidth属性とheight属性には、実際に表示する画像サイズのピクセル数を指定してください。
読み込む画像のパスは、data-src属性で指定しましょう。alt属性には画像の内容を表すテキストを記述します。
遅延読み込みをさせたい画像が複数ある場合は、該当するすべてのimgタグで上記のような設定が必要です。
（3）Lazy Load関数を実行するためのコードを記述する
Lazy Loadによって画像の遅延読み込みを発生させるためには、Lazy Load関数を実行する必要があります。ページのbody内最下部に、次のコードを記述してください。
<script>lazyload();</script>以上の3つの設定により、ユーザーのスクロールに合わせた画像の遅延読み込みが可能です。
3-2.WordPressのプラグインを使う方法
WordPressを利用して作られたWebサイトの場合、専用のプラグインをインストールし、有効化と設定の調整を行うことでLazy Loadが実装できます。
WordPressのプラグインを使ったLazy Loadの導入方法は次の通りです。
（1）WordPressにLazy Loadプラグインをインストールする
WordPressの管理画面にログインし、左側にあるメニューの「プラグイン」から「新規追加」を選択してください。プラグインの検索画面で「Lazy Load」と入力し、作成者が「Mohammad Jangda」となっているプラグインを探し、「今すぐインストール」のボタンを選択しましょう。
（2）Lazy Loadプラグインを有効化する
WordPressにLazy Loadプラグインがインストールされたら、「プラグインを有効化」を選択してください。インストールするだけでは画像の遅延読み込みが機能しないため、必ず有効化を行いましょう。
（3）読み込みタイミングの設定を調整する
標準の仕様では画像要素が読み込まれるタイミングが遅く、画面表示が間に合わないケースがあります。そのため、より早いタイミングで画像を読み込むための調整が必要です。
Lazy Loadプラグインを有効化したあとに、「編集」を選択し、右側に表示される「lazy-load/js/lazy-load.js」を選択してください。
ファイル内の「distance： 200」の値を「distance： 400」に変更し、「ファイルを更新」ボタンを選択します。このオプション変更により、適切なタイミングで画像を遅延読み込みさせることが可能です。
4.Lazy Loadを導入する際の注意点
Lazy Loadを導入する際は、Googleクローラーの挙動や、既存スクリプトとの競合に注意する必要があります。主な注意点は次の3つです。
・GoogleのクローラーがLazy Loadを適用した画像およびデータを認識しない可能性がある
GoogleのクローラーはWebサイトを巡回する際、ページのスクロールを行いません。そのため、Lazy Loadを適用したコンテンツを認識しないケースがあります。クローラーが画像やデータを認識しなかった場合、検索エンジンのアルゴリズムに悪影響を与える可能性があるため、注意が必要です。
・Googleのクローラーが画像を認識しない場合、画像検索に引っ掛からなくなる
Googleの画像検索では、クローラーが認識した画像が結果画面に表示されます。しかし、Lazy Loadを適用した画像が認識されなかった場合、画像検索で上位に表示されることができません。
・JavaScriptで既に画像読み込みを最適化している場合、逆にページの表示速度が下がるケースがある
JavaScriptによって画像の読み込みを最適化しているWebサイトでLazy Loadを使用すると、スクリプト同士が競合して不具合が起きるリスクがあります。ページの表示速度が下がるケースもあるため、競合するスクリプトがないことを確認したうえでLazy Loadを実装しましょう。
まとめ
Lazy Loadは、Webサイト上にある複数の画像を、異なるタイミングで表示させる手法です。Lazy Loadを導入すると、ユーザーが体感するページの読み込み速度が上がるメリットがあります。一方、導入に知識が必要な点や、表示がずれる場合がある点などがデメリットです。
Lazy Loadは直接コーディングするほか、プラグインによっても実装できます。ただし、Lazy Loadを導入するとGoogleのクローラーが画像を認識しない可能性がある点や、既存のJavaScriptと競合するケースがある点に注意が必要です。
Lazy Loadを導入する際は、デメリットや注意点を踏まえて、正しい方法で実装を行いましょう。
KEYWORD
