【入門編】 Intersection Observerを用いたレンダリング最適化 – Webブラウザの仕組み実践ガイド

ブラウザの仕組み、特にレンダリングの裏側を覗き込むのは、ちょっとした「魔法の種明かし」に似ています。

こんにちは。フロントエンドの世界へようこそ。今日は、重たいWebページを一瞬で「軽やか」に変身させる、ちょっとした賢いテクニックをお話ししますね。

—

ブラウザは「一生懸命すぎる」頑張り屋さん

まず、私たちが普段見ているWebページがどうやって表示されているか、想像してみてください。

ブラウザは、ページを開いた瞬間、「見えるかどうかにかかわらず、ページ内のすべての画像を読み込み、すべてのレイアウトを計算し、すべての装飾を塗り直す」という、とんでもなく真面目な働き者です。

これを専門用語で「レンダリング」と言います。特に、画面の表示に関わる「リフロー（計算）」や「リペイント（描き直し）」は、ブラウザにとって結構な重労働なんです。もし、ページの下の方に巨大な画像や複雑なアニメーションが隠れていたらどうでしょう？ブラウザは、ユーザーがまだ見てもいない場所のために、せっせと汗をかいて計算してくれているわけです。

これって、ちょっともったいないですよね。

「見えたらやる」という賢い作戦：Intersection Observer

そこで登場するのが「Intersection Observer（インターセクション・オブザーバー）」というAPIです。

これ、名前は難しそうですが、役割はとってもシンプル。「ある要素が画面（ビューポート）に入ってきたら教えてね」と、ブラウザに見張り役を頼む機能のことです。

身近な例えで言えば、「お店の倉庫管理」です。
すべての商品を最初から店頭に並べたら、お店はパンパンで歩けませんよね？だから、お客さんが棚の前に来たときだけ、裏の倉庫からサッと商品を出して陳列する。これと同じことをWebページでやるんです。

実践：画像が画面に入ったら読み込む

実際にコードで見てみましょう。といっても、難しく考える必要はありません。「見張りを設定する」という手順だけ踏めばOKです。

// 1. ブラウザに「何を見張るか」と「どう処理するか」を伝える準備
const callback = (entries, observer) => {
entries.forEach((entry) => {
// もし、その要素が画面に入ってきたら（isIntersectingがtrueなら）
if (entry.isIntersecting) {
const img = entry.target;

// data-src属性に入れておいた本来の画像URLをsrcに戻す
img.src = img.dataset.src;

// 読み込みが終わったら、もう見張らなくていいよと伝える
observer.unobserve(img);

console.log(“画像を表示しました！”);
}
});
};

// 2. 見張り役（オブザーバー）を雇う
const observer = new IntersectionObserver(callback);

// 3. 画面上のすべての画像を見張るように指示する
const images = document.querySelectorAll(‘img[data-src]’);
images.forEach((img) => observer.observe(img));

なぜこれが最適化になるの？

このコードを使うと、こんなメリットがあります。

1. 初期読み込みの高速化: ページを開いた瞬間、画面外の画像はダウンロードされません。だから、表示が驚くほど速くなります。
2. ブラウザの休憩時間: ブラウザは「あ、この画像はまだ画面にないから、今は計算しなくていいんだな」と判断して、他の重要な処理に力を回せます。
3. 通信量の節約: ユーザーが途中でページを閉じたら、最後までスクロールしなかった場所の画像はダウンロードされません。スマホの通信制限を気にする方にも優しい設計ですね。

つまずきやすいポイントへの「お守り」

初めてこの機能を使うとき、こんな疑問が浮かぶかもしれません。

「画像がパッと表示されるとき、カクつかない？」

→ 大丈夫です。最近のブラウザはとても優秀なので、画像が差し替わる瞬間のチラつきはほとんど気になりません。むしろ、初期の読み込みが遅いほうがユーザーは離脱してしまいますから、この手法は大きなプラスです。

「全部の画像にこれを使うべき？」

→ 一番上のメイン画像（ファーストビュー）には使わないでくださいね。そこは「最初から見えている」はずなので、普通に読み込むのが正解です。あくまで「スクロールしないと見えない部分」に使うのがコツです。

最後に：Webページは「生き物」です

Webページは、コードを書いて終わりではありません。ユーザーがスマホでスイスイとスクロールして、気持ちよく情報を受け取れるか。その体験を支えているのは、こういった「ブラウザへのちょっとした配慮」なんです。

最初は難しく感じるかもしれませんが、大丈夫。まずは今日ご紹介した「見張り役を置く」という考え方だけ、頭の片隅に置いてみてください。それができれば、あなたはもう立派なパフォーマンス・エンジニアの第一歩を踏み出していますよ。

またいつでも、ブラウザの魔法についてお話ししましょうね。