[レベル: 上級]
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 で検出できない画像があり得そうです。