テクニカルSEO BLOG
テクニカルSEOを中心にSEO対策をまとめています

Lazy Loadで画像を遅延ロードする方法

   

大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。
imgタグを使って、普通に実装すると次のような現象が起きてしまいます。

  • 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
  • ネットワークやサーバーの負荷が瞬間的にひっ迫する
  • PageSpeed Insightsで低スコアになる

これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。
対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。

今回は、Lazy Load で画像を遅延ロードする方法を解説します。

遅延ロードとは?

画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面領域外に存在する画像はロードしないことで、画面表示を高速化する仕組みのことです。

ブラウザは通常、HTMLに含まれるimgタグの画像ファイルを実直にすべて読み込みます。実直に読み込むということは、どんなに長いページでも、ユーザーがほとんど閲覧しない下部の画像でも、読み込んでしまうということです。ほとんど閲覧されないのに、必ず画像を読み込むのはネットワーク的にも無駄ですよね。

そこで、Lazy Loadによる画像の遅延ロードの登場です。

画面のスクロール位置に応じて「必要な分だけ画像を取得」するので、とても効率的です。

Lazy Loadとは?

Lazy Loadは、画像の遅延ロードを行うためのJavaScriptライブラリです。Lazy Loadライブラリを使うと、煩雑な遅延ロード処理を簡単に実現できます。

jQueryとの依存関係もなく、さまざまなサイトに導入しやすいのもメリットです。

Lazy Loadで表示速度を高速化すると、PageSpeed Insightsでの点数アップができ、検索エンジンの評価アップにもつながります。PageSpeed Insightsでのスコアアップが目的なら、PageSpeed Insightsスコア改善サービスを利用すれば、効率的にパフォーマンス改善を実現できます。

Lazy Loadの使い方

Lazy LoadはGitHubで公開されています。

https://github.com/tuupola/lazyload

Lazy Loadを導入する手順は、以下の3ステップです。

  1. Lazy Loadのscriptタグを配置する
  2. imgタグにclass=”lazyload”とdata-src属性を記述する
  3. lazyload()関数を呼び出す

scriptタグを配置する

まず、loadload.jsを読み込むscriptタグを記載します。

場所はhead内でも、body内でもOKです。

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

imgタグを記述する

imgタグの書き方には注意が必要です。

デフォルトで動作する標準の書き方は以下の通り。

<img class="lazyload" width="765" height="574" data-src="img/logo.png" alt="CLUSTER SEO" />
  • class="lazyload"を追加
  • src属性ではなく、data-src属性で画像パスを指定する

また、後述しますが、width属性やheight属性、もしくはそれに相当するCSSを書いておくとよいです。

alt属性はimgタグのSEO効果を高めるので、忘れずに書きましょう。装飾目的の画像はalt=""でOKです。

lazyload()関数を呼び出す

最後に、lazyload()関数を必ず呼び出します。
タイミングは、bodyの最後もしくはDOMContentLoadedイベント時とかで良いです。

<script>
    lazyload();
</script>

対象の要素を指定したい場合は、引数で指定もできます。

<script>
    lazyload(document.querySelectorAll("ul.many-images li img"));
</script>

jQueryを使う場合は、jQuery.lazyload()関数を呼び出します。
具体的には、bodyの末尾に以下を書いておけば、標準の書き方で書いたimgが遅延ロードされます。

<script>
    $("img.lazyload").lazyload();
</script>

Lazy Loadのサンプル

Lazy Loadのサンプルを作ってみました。スクロールするたびに、画像が読み込まれていることが分かります。

See the Pen lazyload by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

手元で動くサンプルをダウンロード(651KB)

動作確認方法

遅延ロードが正しく動作しているかを確認するには、ブラウザのDeveloper Toolでネットワークをチェックします。

ページをスクロールするにしたがって、読み込まれる画像が増えていけば成功です。

Lazy Loadのよくある問題

Lazy Loadが動かないというトラブルをよく耳にするので、原因と対策をまとめました。どうしても動かないという人は、サンプルコードをダウンロードできるので、是非使ってみてください。

画像が永遠に読み込まれない

lazyload()関数を呼び出していないか、もしくはlazyload()関数を呼び出しているタイミングが早すぎます。

<body>の末尾でlazyload()関数を呼び出します。

<body>

<img class="lazyload" width="765" height="574" data-src="img/logo.png" alt="クラスターSEO" />

<script>
    lazyload();
</script>

</body>

jQueryの場合は次のように書いて、DOM構築完了後に初期化するようにします。

$(function() {
  $("img.lazyload").lazyload();
}); 

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

data-src属性ではなく、src属性で画像を指定しているときに起きる現象です。ブラウザが画像を読み込んでしまわないよう、data-src属性で画像パスを指定してください。

また、画像ファイルの読み込み前に、ブラウザが画像の大きさを認識できるよう、CSSのmin-heightプロパティやimgタグでwidth/height属性を指定しておきましょう。

画像の読み込みが遅い

そもそもファイルサイズが大きすぎるのかもしれません。Lazy Loadは画像の配信速度を速くするわけではないので、画像自体の最適化は別途必要です。画像の縦横サイズやフォーマットを見直したり、圧縮ツールを活用することで、ファイルサイズを削減しましょう。

ブラウザ側でのネイティブサポート

ChromeやEdgeではloading属性をサポートしており、画像の遅延ロードをブラウザがネイティブでサポートしています。

以下のように loading="lazy"を書いておくと、ブラウザによって適切なタイミングでロードされます。

<img loading="lazy" src="img/example.jpg" width="765" height="574" />

ライブラリも不要でとても便利なのですが、現時点ではSafariがloading属性に対応していません。
https://caniuse.com/#feat=loading-lazy-attr

まだライブラリの力を借りる必要がありそうです。

コンテンツ差し替えによる高速化

レスポンシブページで、PC向けコンテンツとスマホ向けコンテンツが同一ページに共存している場合、デバイスごとにコンテンツを差し替えることで、ページの読み込みを高速化できることがあります。

たとえば、PCでしか利用しないHTMLタグをJavaScriptで挿入する、といった方法です。

このようなコンテンツ差し替えはライブラリ「alter.js」のデータ置換機能で簡単に実装できます。差し替えたい部分のセレクタとHTMLフラグメントをそれぞれ指定します。

alter.jsのデータ置換機能の利用

Lazy Loadに効果がない場合や、Lazy Loadの導入が難しい場合に、利用してみてはいかがでしょうか。

CSS・JavaScript・動画の見直しやインフラチューニングを検討する

Lazy Loadを導入しても、CSSやJavaScriptでの記述や、Webサーバー設定によっては、表示速度が改善しないこともあります。

PageSpeed Insightsスコア改善サービスは、コピー環境にて速度改善効果が実証された施策をアドバイスするので、本番環境での試行錯誤を繰り返すことなく、パフォーマンス改善を効果的に進められます。

まとめ

以上、Lazy Load の使い方を説明しました。

スマホサイトはページが長いので、読み込む必要のない画像が特に多く出現します。SNSでシェアされるキャンペーンページとかは対策しておいた方がよいでしょう。

また、ページの表示速度はPageSpeed Insightsで測定できます。PageSpeed Insightsの点数で気になるところを改善してみてはどうでしょうか?

遅延ロードはSEO上のメリットもあるので、ぜひ使ってみてください。

Page Top