こんにちは！フロントエンドの現場を長年歩んできたシニアアーキテクトの私です。

Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな…」「ページの読み込みがもたつく原因って何だろう？」と悩んだことはありませんか？大丈夫ですよ、そのモヤモヤ、フロントエンドの世界へ一歩踏み出した証拠です。

今回は、Webブラウザの心臓部である「レンダリング」の裏側、特に「画像」が私たちのブラウザをどうやって重くしているのか、そしてそれを魔法のように解決する「ネイティブLazy Loading（遅延読み込み）」の仕組みについて、一緒に紐解いていきましょう。

難しい専門用語はできるだけ噛み砕いて、身近な例えでお話ししますね。コーヒーでも飲みながら、リラックスして読んでいってください。

—

1. ブラウザの気持ちになってみよう：HTMLを読むって大変なんです！

私たちが普段書いているHTMLやCSS。これをブラウザは、上から順に一生懸命「解読（パース）」しています。

例えるなら、ブラウザは「超優秀だけど、ちょっと不器用な職人さん」です。
職人さんは届いた設計図（HTML）を一枚ずつ読み込み、「あ、ここに柱（DOM）を立てて、壁（CSSOM）を塗って…」と、コツコツ家を組み立てていきます。

ここで問題になるのが「画像」です。

設計図の中に「ここに大きなステンドグラス（画像ファイル）をはめ込んで！」と書いてあったとします。職人さんはどうすると思いますか？
なんと、そのステンドグラスが工場から届いて、サイズや形を確認し終わるまで、次の作業の手を止めてしまうことがあるんです。

これが、メインスレッド（職人さんの作業机）で起きている悲劇の正体です。

—

2. 「画像デコード」ってなに？ メインスレッドが悲鳴を上げる理由

画像ファイル（JPEGやPNGなど）は、そのままではブラウザの画面に表示できません。圧縮された「ただのデータ塊」だからです。

これを画面に映るピクセル（点々の集まり）に変換する作業を「デコード（復元）」と呼びます。

レストランの厨房で例えてみましょう

メインスレッドというのは、いわばレストランの「メインシェフ」の作業台です。シェフは、注文をさばき、盛り付けをし、大忙しで料理を作っています。

そこに、通販で頼んだ「巨大な冷凍マンモス肉（重たい高解像度画像）」が、いきなりドン！と厨房に届いたと想像してください。
シェフは「ちょっと待て、これを解凍して、さばかないと料理が進まないぞ！」と、包丁を握ったまま冷凍肉の解凍作業（デコード）を始めざるを得ません。

この間、お客さん（ユーザー）が「お水くださーい！」と呼んでも、シェフは手が離せなくて無視するしかありません。これが、Webサイトで「スクロールしようとしても画面がフリーズしたようにカクつく」現象の正体です。

—

3. 救世主登場！「ネイティブLazy Loading」の仕組み

昔は、この画像の重い処理を避けるために、JavaScriptを使って「ユーザーが画面をスクロールして画像が見えそうになったら読み込ませる」という、ちょっと複雑なプログラム（ライブラリ）を書くのが定番でした。

でも、安心してください。今のモダンなWebブラウザには、ブラウザ自身がその面倒を見てくれる「ネイティブLazy Loading」という機能が標準装備されています。

お買い物の「お取り寄せ」システム

ネイティブLazy Loadingは、いわば「お取り寄せの賢い仕組み」です。

カタログ（ページ全体）をパラパラ見ている段階では、重い家具（画像）の現物は倉庫に置いたままにしておきます。
ユーザーがページをスクロールして、「あ、このソファ、ちょっと見てみようかな」と、その家具のコーナーに近づいた瞬間（画面に入る少し手前）に初めて、「おーい、あのソファを倉庫から持ってきてくれ！」と手配する仕組みです。

これなら、最初にページを開いた瞬間には、まだ見えていない下のほうの画像たちのためにシェフ（メインスレッド）の手を止める必要がなくなりますよね。ページの最初の表示スピード（表示速度）が劇的に軽くなります。

—

4. 実務でどう書くの？ 今すぐ使えるコード例

使い方は驚くほどシンプルです。
HTMLの `` タグに、魔法の言葉 `loading=”lazy”` をそっと添えるだけ。これだけで、ブラウザが勝手に「後回し読み込み」のスケジュールを組んでくれます。

以下のコードを、あなたのエディタにそのまま貼り付けて試してみてください。

画像の遅延読み込み（Lazy Loading）テスト

最初の画面には、すぐに見せたい画像やテキストを配置します。

スクロールした先に現れる画像

💡 ここでワンポイントアドバイス（チーフからの実践知見）

• width と height は必ず書きましょう！

ブラウザに「この画像は縦横これくらいの大きさですよ」とあらかじめ教えてあげることで、画像が読み込まれる前にレイアウトがガタッと崩れるのを防げます（これをCLSの防止と言います）。

• ファーストビュー（一番最初の画面）の画像には `loading=”lazy` をつけないで！

一番最初に見える画像にまで「遅延」を指定してしまうと、ブラウザが「あ、これは後回しでいいんだな」と勘違いして、かえって表示が遅くなってしまいます。「最初に見えるものは即座に、下にあるものは後回し」というメリハリが大切です。

—

5. まとめ

今回は、ブラウザのレンダリングにおける「画像デコード」の重さと、それをスマートに解決する「ネイティブLazy Loading」についてお話ししました。

• ブラウザは画像をデコードするときに、ちょっと忙しくなる。
• `loading=”lazy”` を使えば、ユーザーが見る直前までその重い作業を待たせることができる。
• 結果として、サイトの動きが軽くなり、ユーザーもストレスなく快適にページを楽しめる！

Webブラウザの仕組みを知ることは、まるで自分の相棒であるマシンの「呼吸」を感じるようなものです。仕組みがわかれば、どうコードを書けばブラウザが喜んでくれるかが見えてきます。

今回の知識をあなたの引き出しにそっと入れて、明日のコーディングをもっと楽しく、もっと軽やかにしていきましょう！それでは、また次の現場でお会いしましょう。