SEOにも効果的、画像遅延読み込みの方法とは？

画像遅延読み込みとはWebブラウザが表示された時に初めて画像が読み込まれる方法です。通常Webページはアクセスした時に画像ファイルを読み込んで完成してから表示されます。この場合、画像が重いページは画像が読み込み終わるまで表示されません。Webページの表示に時間がかかる場合、離脱する可能性も上がります。ページの内容を見て離脱されるのでしたら内容を変更するなど改善の余地があります。しかし、表示時間で離脱される場合はWebサイトの作り方が原因なので改善が難しくあります。

なぜ画像を遅延読み込みしないといけないのか？

前述の通り、画像遅延読み込みを実施する目的は「直帰率改善」と「SEO施策」です（もちろんユーザービリティ向上にも繋がります）。2017年のGoogleの公式発表ではモバイルサイトの読み込み時間が3秒以上かかると53％のユーザーが離脱するとあります。

▼Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

また、Googleは2018年よりSEOのアルゴリズムで読み込み速度をランキング要因とする「Speed Update」を適用しています。

▼ページの読み込み速度をモバイル検索のランキング要素に使用します（Google 検索セントラル ブログ）
https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja

本記事の趣旨である画像遅延読み込みは読み込み速度改善の施策の一つです。その他のは読み込み速度改善についてはページ記事を参照してください。

▼PageSpeed Insightsで合格点100点獲得方法（最新版ページスピードインサイト対策）
https://www.web-ma.co.jp/column/seo/1525/

▼SEOに最適な画像形式とは？ WebPで画像軽量化、JPG・PNGの違い
https://www.web-ma.co.jp/column/seo/1546/

ここからは具体的な施策に入ります。画像遅延読み込みを実装する方法は主に2種類あります。

loading属性による画像遅延処理

一つ目はloading属性の追加です。HTMLのIMGタグに「loading="lazy"」と追加するだけです。

<img src="xxx.jpg" loading="lazy">

これだけで画像遅延読み込みを適用できます。しかし、古い環境など一部ブラウザは未対応なので注意が必要です。現時点では古い環境も考慮してloading属性に加えて次の施策も併用しておいた方が無難であります。

JavaScriptによる画像遅延処理

loading属性の追加はブラウザの機能ですが、対応環境はブラウザに依存します。対してJavascriptで実装するとほぼどの環境でも対応可能です。画像遅延読み込みを行うJavascriptのライブラリはいくつかあります。弊社が以前より使っているのは「lozad.js」です。もちろん他にもライブラリはあるのですが、使い慣れているのでこちらを紹介します。

▼lozad.js
jQuery非依存で使用できる軽量ライブラリ。オープンソースでフリーで使用可能。画像・背景画像・動画・IFRAMEなど多くの要素に対応。
https://apoorv.pro/lozad.js/

事前準備lozad.jsの読み込み
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js" defer></script>
lozad.jsの実行
<script> const observer = lozad(); observer.observe(); </script>
画像ファイルへの記述例（data-srcに画像パスを記述）
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="xxx.jpg" class="lozad">

遅延読み込みの注意点

以上が画像遅延読み込みの使用方法ですが、注意点もあります。画像遅延読み込みはデバイスの画面に表示された時に画像が読み込まれるだけです。画像の読み込みが速くなる訳ではありません。なので画像の容量が大きい場合、当然読み込むまでに時間がかかります。画像自体を軽くする施策も別途行う必要があります。

▼SEOに最適な画像形式とは？ WebPで画像軽量化、JPG・PNGの違い
https://www.web-ma.co.jp/column/seo/1546/

また、lozad.jsはデバイスの画面に表示された時にdata-src属性をsrc属性に書き換えることで遅延読み込みを実施しています。つまり画像のsrc属性に画像ファイルのパスを記述しているとすぐに画像が読み込まれてしまいます。なので前述の画像ファイルへの記述例はsrc属性に1pxの透明画像を指定しています。今の人には馴染みがないかと思いますが、古くからWeb業界にいる方はTABLEレイアウトでコーディングをしている時代はspacer.gifという透明画像を使い調整していました。画像遅延読み込みのために透明画像を使用していると懐かしくなります。

この記事は株式会社Webの間のコラムの転載です。オリジナル記事はこちら。
https://www.web-ma.co.jp/column/seo/1574/