Googlebotはスクロールしないのにどうしてlazy-load画像をIntersectionObserverで認識できるのか?

[レベル: 上級]

Googlebot のレンダリングエンジン (WRS: Web Rendering Service) が更新されるという、おおいに歓迎されるニュースが先月発表されました。

新しいレンダリングエンジンは、IntersectionObserver API をサポートするようになりました。

この IntersectionObserver のサポートに関して、「あぁ、そう思うのも無理ないよね」という質問をいただきました。
同じ疑問をいだいている人もきっといるはずです。(実際に、僕もそのうちの 1 人。もっとも、すぐに自己解決できたけれど)。

そこでこの記事では、新レンダリングエンジンの IntersectionObserver サポートについてありがちな、でももっともな誤解を解きます。

IntersectionObserver で lazy-load 画像を取得可能に

冒頭で触れたように、新しいレンダリングエンジンは IntersectionObserver をサポートします。
IntersectionObserver は画像を lazy-load で遅延読み込させる際に Google 検索で推奨される技術です。

IntersectionObserver を実装すると、ページをスクロールして画像が見える範囲に入ったときに(近づいたときに)初めて、その画像の読み込みを開始させることができます。

しかしながら IntersectionObserver を使って lazy-load していても、アップデート以前は Googlebot は IntersectionObserver をサポートしていませんでした。
そのためそれを補う仕組みとして polifil の実装が結局は必要でした(polifil はその仕組みをサポートしないブラウザのための予備的な仕組み)。

ですが、IntersectionObserver をサポートする今は polifil なしで Googlebot は lazy-load 画像を取得可能です(ただし、バックアッププランとして polifil を実装すれば安心度が増す)。

Googlebot はスクロールしないはずでは?

(知っておくのが当然という願いを込めて)ご存知のように、Googlebot はスクロールしません。
ということは、

たとえ IntersectionObserver をサポートしたとしても、スクロールしないのであれば見えているスクリーンよりも下のエリアに隠れている画像を Googlebot は認識できないのではないか? じゃ、意味ないじゃん。

こんな疑問が浮かんだ人はいないでしょうか?。

たしかに Googlebot はスクロールしません。
しかし、IntersectionObserver にスクロールは必要ありません。
IntersectionObserver はスクロールを監視する API ではないのです。

画像の lazy-load の状況に限って言えば、IntersectionObserver は画像が Viewport (スクリーンに見えている部分)に入ったかどうかを監視する API です。
※ とても簡潔に説明しています。

(これも、知っておくのが当然という願いを込めて)Googlebot はページを 1 つの “塊” として取得します。
僕たち人間のユーザーのように、スクリーンに映っているエリアだけをスクロールしながら部分的に見ていくわけではありません。

なが〜いページも一気に見ます。
つまり Viewport が非常に長いのです。

Viewport に画像が入っていれば、IntersectionObserver はそれを検出します。
したがって lazy-load した画像を読み込みます(ようは、Googlebot は実際には遅延読み込みしてないってことですね)。

そんなわけで、スクロールしない Googlebot であっても IntersectionObserver で読み込ませる lazy-load 画像をきちんと取得できるのです。;)

P.S.
Googlebot は Viewport が長いと説明しましたが、どのくらいの長さなのかが気になります。
無限に長いことはないはずで、本当にものすごく長いページだと IntersectionObserver で検出できない画像があり得そうです。