大量の画像を含む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
画像の遅延ロードはSEO上もメリットあり
以上、Lazy Load の使い方を説明しました。
スマホサイトはページが長いので、読み込む必要のない画像が特に多く出現します。SNSでシェアされるキャンペーンページ等は対策しておいた方がよいでしょう。
また、ページの表示速度はPageSpeed Insightsで測定できます。PageSpeed Insightsの点数で気になるところを改善してみてはどうでしょうか？ 遅延ロードはSEO上のメリットもあるので、ぜひ使ってみてください。
Googleがどのようなコンテンツを検索結果の上位に表示するかは公式のドキュメントに記載されています。シンメトリックが開催しているSEOのオンラインセミナーではGoogleの公式ドキュメントから特に重要な部分を抜粋し、分かり易く解説しています。
「SEOの何から学べばいいか分からない」「SEOに関する情報は何が正しいのか分からない」このようなお悩みをお持ちの方は是非ご参加ください！
最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。
