Lazy Loadとは？メリットや注意点・実装方法を解説

遅延ロードとは？

Lazy Loadを理解する際、先に遅延ロードの概要を理解することが大切です。遅延ロードとは、ユーザーに表示されている範囲内（領域内）の画像のみを読み込む仕組みのことで、表示されていない画像の読み込みは行いません。ブラウザは通常では、imgタグの画像ファイルを一度にすべて読み込む仕組みとなっています。

そのため、画面の範囲外の画像まですべて読みこんでしまうことから、ユーザーからすれば無駄に読み込みが行われているということです。結果的にWebページの表示速度を低下させることにも繋がるため、それらを防ぐ方法の1つが遅延ロードになります。遅延ロードを実装することで、画面の範囲内である必要な画像のみを読み込めます。

Lazy Loadとは？

遅延ロードの概要をご説明したところで、Lazy Loadについて解説します。Lazy Loadとは、上記でご説明した遅延ロードを行うライブラリのことであり、JavaScriptにて記述します。Lazy LoadはjQueryへの依存性もないため、実装は非常に簡単です。

また、実装することによってWebページの表示速度が上がり、検索エンジンからの評価が高まることにも期待ができます。

Lazy Loadの実装方法

Lazy Loadは、GitHubにてソースコードが公開されています。こちらを踏まえて、Lazy Loadを実装する手順は下記のとおりです。

• scriptタグの配置
• imgタグの記述
• lazyload()関数の呼び出し

それぞれの手順を順番に見ていきましょう。

scriptタグの配置

まずは、scriptタグを配置します。これはloadload.jsを読み込むために配置するものであり、head内、body内のどちらでも構いません。

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

imgタグの記述

次に、デフォルトで動作するimgタグの記述を行います。下記の書き方でないと動作しないため、imgタグの記述には注意が必要です。

<img class="lazyload" width="765" height="574" data-src="img/logo.png" alt="〇〇" />

なお、画像にはalt属性を記述することを忘れないようにしましょう。alt属性があることによって、検索エンジンが画像の内容を適切に読み込みやすくなるためです。

lazyload()関数の呼び出し

最後に、lazyload()関数の呼び出しを行います。基本的なタイミングとしては、bodyの最後に記述する形で問題ありません。

上記までの手順が完了すれば、無事にLazy Loadが適用されます。

ChromeのアップデートによりネイティブのLazy Loadがサポートされた

ここまで、Lazy Loadの概要や実装方法を解説しました。しかし、2019年のGoogle Chromeのアップデートによって、ネイティブでLazy Loadがサポートされるようになりました。つまり、JavaScriptの記述なしで、Lazy Loadが実装できるということです。

ただし、それにまつわる注意点も存在しますので、ここではそれらについてご紹介します。

IEとSafariは未対応・Firefoxではimg要素のみ

まず、IE（Internet Explorer）とSafariでは、ネイティブでのLazy Loadが未対応です。加えて、Firefoxではimg要素のみの適用となっています。つまり、引き続きJavaScriptでの対応は必要になるということです。

引き続きJavaScriptでの対応は必要

現在、70％を超えるブラウザがネイティブでのLazy Loadに対応していると言われています。しかし、裏を返せば30％のブラウザは未対応であるため、やはりJavaScriptによる記述は必要だと言えるでしょう。

Lazy Load自体は高速化に非常に有用であるため、ネイティブ・JavaScript問わず、積極的に実装することを推奨します。

Lazy Loadを実装するメリット

ここからは、Lazy Loadを実装する下記2つのメリットをご紹介します。

• データ容量を節約できる
• ユーザーの体感速度が向上する

それぞれ順番に見ていきましょう。

データ容量を節約できる

まず、データ容量を節約できることがLazy Loadのメリットです。これは言葉のとおりなのですが、画面外の画像は一切読み込まないため、その分だけ携帯キャリア等のデータ容量を節約できます。

ユーザーの体感速度が向上する

次に、ユーザーの体感速度が向上することもLazy Loadのメリットです。簡易的にご説明すると、通常Webページは下記の手順を経て表示されます。

• ユーザーがWebページを見るためのリクエストがWebサーバーに対して行われる
• HTMLの確認が始まる
• 同期スクリプトが読み込まれる
• 非同期スクリプト・画像が読み込まれる

上記の画像の読み込みに関しては、ユーザーからすれば、画面外の画像がすべて読み込まれている必要はありません。Lazy Loadでは、表示している領域内の画像のみが読み込まれるため、結果的にユーザーの体感速度が向上します。特に、ECサイト等の大量の画像が使用されているWebサイトに有用だと言えるでしょう。

Lazy Loadの注意点

ここまで、Lazy Loadを実装するメリット等を解説しました。ここでは、Lazy Loadの下記3つの注意点をご説明します。

• 画像がすぐに読み込まれてしまう
• 画像の読み込みが遅い
• 画像が読み込まれない

それぞれ順番に見ていきましょう。

画像がすぐに読み込まれてしまう

src属性で画像を指定してしまうと、画像がすぐに読み込まれてしまいます。対策方法はdata-src属性で指定することです。また、画像を読み込む前にブラウザ側が画像サイズを認識できるように、min-heightプロパティをCSSで記述したり、width / height属性をimgタグで指定したりましょう。

画像の読み込みが遅い

Lazy Loadは、画像の配信を早くするための記述ではありません。あくまで、領域外の画像は読み込まないようにするための記述ですので、画像の読み込みが遅い場合は、画像自体のファイルサイズを軽量化させることが重要です。

画像が読み込まれない

画像が読み込まれない場合は、lazyload()関数の呼び出しが早すぎる可能性があります。また、lazyload()関数を呼び出していないかもしれません。必ず、bodyの末尾に記述されているか確認するようにしましょう。

Lazy Loadの実装はSEOに効果があるのか

最後に、Lazy Loadの実装がもたらすSEO効果を解説します。前提として、測定するWebページやWebサイトによって異なる上でご説明すると、Lazy Loadの実装によって、「約2秒」読み込み速度が向上すると言われています。

もちろん、画像があまり使用されていないWebページでは大きな向上は見込めないかもしれませんが、ECサイト等の大量の画像が使用されている場合は、表示速度の向上が見込めるでしょう。

検索エンジンは、表示速度の早いWebサイトを評価します。つまり、Lazy Loadによって表示速度を高速化させることで、結果的にSEOに効果をもたらし、検索順位が上がることに期待ができます。

まとめ：高速化のためにもLazy Loadを実装しましょう

本記事では、Lazy Loadの概要や実装するメリット、実装方法等について解説しました。Lazy Loadは、ネイティブ対応しているブラウザも存在しますが、未対応のブラウザもあるため、現時点ではJavaScriptでの記述は必須だと言えます。

SEOで良い評価を受け、検索順位を上げるためにも、本記事を参考にLazy Loadの実装を始めてみてはいかがでしょうか。

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。