Google推奨のSEO対応IntersectionObserverで画像の遅延読み込み
- 公開日：2019/12/11
- 更新日：2019/12/11
- 投稿者：n bit
SEO対応に有効な画像の遅延読み込み。様々なLazyLoadのやり方がありますが、今回はGoogleが推奨しているIntersectionObserverを利用した画像の遅延読み込みの解説です。もちろんGooglebotにも対応していますので安心して利用できます。
この記事は約 分で読めます。（文字）
Google推奨のSEO対応
IntersectionObserverで画像の遅延読み込み
Googleのウェブマスター向けの公式ブログで2019年5月に公式アナウンスされたGooglebotのレンダリングエンジンのアップデートによってIntersectionObserverによるLazyLoad（遅延読み込み）に対応しました。
LazyLoad（遅延読み込み）とは
LazyLoad（遅延読み込み）はページの表示速度を上げるための技術の1つ。
通信回線の速度が早ければ特に大きな影響は無いのですが、通信状況があまり良くない環境でページ内に大量の画像や容量の大きい画像が貼られていた場合はなかなかページが表示されません。
そこで、ビューポート内に表示されていない容量の大きい画像の代わりに軽量のダミー画像を先に読み込ませ、ビューポート内に実際に表示させる段階で元画像に切り替えて表示することで初期のアクセス速度を上げます。これがLazyLoadの仕組みです。
仕組み自体は非常に単純でウェブサイトのページ表示速度を高速化するためには必須とも言えるLazyLoad（遅延読み込み）ですが、主にJavaScriptのscrollを利用して実装されることが多く、SEOの観点では非常にネックとなる技術でした。
しかし、Googleボットのレンダリングエンジンがアップデートされたことにより今後はIntersectionObserverを利用してSEOにもしっかりと対応したLazyLoad（遅延読み込み）を実装することができます。
それでは早速実装方法確認していきましょう。
IntersectionObserverで画像の遅延読み込み実装
実装のために必要な手順は3つです。
1つ目は軽量な画像を用意すること。2つ目はimgタグの変更。最後は画像の差し替えのためにスクリプトの記述です。
軽量な画像を用意
軽量の画像はどのようなものでも構いません。
今回は1ピクセル× 1ピクセルのGIF画像を用意しています。
- placeholder.gif
imgタグの変更
imgタグを以下のように変更します。
<img class="lazy" src="placeholder.gif" data-src="image.jpg" data-srcset="image@2x.jpg 2x, image.jpg 1x" alt="alt text">
LazyLoad（遅延読み込み）させるimgタグに「lazy」のクラスを付与します。
- class="lazy"
srcには先ほど作成した軽量な画像を指定してください。こちらがページが最初に読み込まれた時に合わせて読み込まれる画像です。
- src="placeholder.gif"
data-srcとdata-srcsetにはビューポート内に画像要素が入ったときに実際に表示させたい画像を指定します。今回data-srcsetにはRetinaディスプレイにも対応できるように解像度2倍の画像もセットしました。
- data-src="image.jpg"
- data-srcset="image@2x.jpg 2x, image.jpg 1x"
この時1点注意事項があります。ファーストビュー内に表示される画像のIMGタグについては標準のまま利用するようにしてください。LazyLoad（遅延読み込み）を利用せず標準のIMGタグのまま利用した方が早く表示されます。
IntersectionObserverで画像の遅延読み込みするスクリプト
それでは、IntersectionObserverで画像の遅延読み込みを行うJavaScriptを用意しましょう。コードは以下の通りです。
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
}, {
rootMargin:"0px 0px 256px 0px",
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to a more compatible method here
}
});
rootMargin:"0px 0px 256px 0px" を設定したことでビューポート内に画像要素が入る256ピクセル手前でトリガされます。想定される通信環境やページ内に設置された画像の大きさ等によって調整すると良いでしょう。
IntersectionObserver非対応のブラウザ用に代替ソリューションとしてpolyfillを用意しておきましょう。
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
これでGoogleが推奨するSEO対応用の画像遅延読み込みIntersectionObserverの実装は全て完了です。
今日のdot
今までなかなか実装しにくかったLazyLoad（遅延読み込み）がGooglebotのレンダリングエンジンアップデートにより非常に簡単に実装できるようになりました。
SEOだけではなくページの読み込み速度が上がることでUXも向上します。
ぜひ対応しておきましょう。
