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ステップです。
- Lazy Loadのscriptタグを配置する
- imgタグにclass=”lazyload”とdata-src属性を記述する
- 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="アナトミー" />class="lazyload"を追加src属性ではなく、data-src属性で画像パスを指定する
また、後述しますが、width属性やheight属性、もしくはそれに相当するCSSを書いておくとよいです。
alt属性はimgタグのSEO効果を高めるので、忘れずに書きましょう。装飾目的の画像はalt=""でOKです。
- 関連記事：SEOに効果的な画像の配置方法・使い方
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.
動作確認方法
遅延ロードが正しく動作しているかを確認するには、ブラウザのDeveloper Toolでネットワークをチェックします。
ページをスクロールするにしたがって、読み込まれる画像が増えていけば成功です。
Lazy Loadのよくある問題
Lazy Loadが動かないというトラブルをよく耳にするので、原因と対策をまとめました。どうしても動かないという人は、サンプルコードをダウンロードできるので、是非使ってみてください。
画像が永遠に読み込まれない
lazyload()関数を呼び出していないか、もしくはlazyload()関数を呼び出しているタイミングが早すぎます。
<body>の末尾でlazyload()関数を呼び出します。
<body>
<img class="lazyload" width="765" height="574" data-src="img/logo.png" alt="アナトミー" />
<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
まだライブラリの力を借りる必要がありそうです。
平均読み込み時間を確認する方法
SEO分析ツール「アナトミー」では、ページごとの平均読み込み時間を確認することができます。どのページから改善すべきか事前に確認しておきましょう。また、過去のデータが蓄積されているため、Lazy Loadの導入前後の変化を評価する際にも有用です。
コンテンツ差し替えによる高速化
レスポンシブページで、PC向けコンテンツとスマホ向けコンテンツが同一ページに共存している場合、デバイスごとにコンテンツを差し替えることで、ページの読み込みを高速化できることがあります。
たとえば、PCでしか利用しないHTMLタグをJavaScriptで挿入する、といった方法です。
このようなコンテンツ差し替えはライブラリ「alter.js」のデータ置換機能で簡単に実装できます。差し替えたい部分のセレクタとHTMLフラグメントをそれぞれ指定します。
Lazy Loadに効果がない場合や、Lazy Loadの導入が難しい場合に、利用してみてはいかがでしょうか。
- 関連記事：サイト共通設定 | alter.js
まとめ
以上、Lazy Load の使い方を説明しました。
スマホサイトはページが長いので、読み込む必要のない画像が特に多く出現します。SNSでシェアされるキャンペーンページとかは対策しておいた方がよいでしょう。
また、ページの表示速度はPageSpeed Insightsで測定できます。PageSpeed Insightsの点数で気になるところを改善してみてはどうでしょうか？
遅延ロードはSEO上のメリットもあるので、ぜひ使ってみてください。
また、ページの表示速度以外にもコンテンツ作成においてGoogleが重要視している項目があります。
「Google公式SEOガイド読解セミナー」では、Google検索セントラルにまとめられている公式ドキュメントから「SEOスターターガイド」を読み下し、ポイントをまとめて解説いたします。
SEOスターターガイドを読んだことがない人、SEO初心者のWebサイト担当者、サイトオーナーの方々にお勧めの内容となっております。是非ご参加お待ちしております。
最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。
