こんにちは！Web制作やフロントエンドの世界へようこそ。
日々、素敵なホームページやWebアプリを作っていると、避けて通れないのが「表示スピード（パフォーマンス）」の悩みですよね。
「画像をたくさん載せたら、ページが重くなってしまった……」
「スマホで見るときに、一番下の画像なんて最初はいらないのに、全部まとめて読み込もうとするからイライラする！」
そんなWeb制作現場の永遠の課題を、魔法のようにスッキリ解決してくれる救世主がいます。それが、今回お話しする「ネイティブLazy Loading（`loading=”lazy”`）」です。
難しい言葉や仕組みに圧倒されてしまうかもしれませんが、大丈夫ですよ。今回は、お買い物の流れや身近なモノに例えながら、ブラウザの頭の中をのぞき見する感覚で優しく紐解いていきましょう！
—
1. ブラウザさんは、実は「真面目すぎる働き者」
まず、私たちが普段何気なく使っているWebブラウザ（Google ChromeやSafariなど）が、ページを表示するときに裏側でどんな仕事をしているかを知ることから始めましょう。
ブラウザさんは、例えるなら「超がつくほど真面目なスーパーの店員さん」です。
あなたがWebサイトのURLをポチッと押すと、ブラウザさんは「よし！お客様がいらっしゃったぞ！」と大慌てでHTMLという名の「お買い物リスト」を上から順番に読み込み始めます。
ここで問題になるのが、ページの中に画像がたくさんある場合です。
昔のやり方だと、ブラウザさんは「お客様がまだ見ていない（画面の一番下にある）画像も含めて、お店にあるすべての商品を、開店と同時に一斉に棚に並べよう」としていました。
これが、ページが重くなる（表示が遅くなる）原因です。まだスクロールして見てもいない画像のために、貴重な通信量やスマホのパワーを最初に使い果たしてしまうのですから、ブラウザさんもお疲れ気味になってしまいますよね。
2. そこで登場したのが、ネイティブLazy Loading！
「最初に見えない画像は、お客様がその売り場（スクロールして画面内）にやって来るまで、バックヤードに置いておけばいいじゃない！」
このナイスなアイデアを実現したのが、HTMLの `loading=”lazy”` という属性です。これが「ネイティブ」と呼ばれるのは、JavaScriptという難しいプログラムを使わなくても、ブラウザ（ChromeやSafariなど）自身が標準の機能として持っているからなんですね。
HTMLにこの魔法の言葉をたった一つ書き添えるだけで、ブラウザさんは次のように賢くお仕事を変えてくれます。
1. 初期ロード時: 画面に見えている（ファーストビューにある）画像だけを真っ先に読み込んで、ページを素早く表示する。
2. スクロール時: ユーザーが下へスクロールしていき、「おっ、そろそろこの画像が見えてくるな」というタイミングを見計らって、裏側からこっそり画像を読み込んで表示する。
まるで、あなたの代わりに優秀なスタッフが先回りして商品を陳列してくれているようなものです。これなら、ページを開いた瞬間の表示スピードが劇的に速くなりますよね！
—
3. 実際の書き方を見てみましょう
「難しそうだな……」と思いましたか？
安心してくだだい。書き方は驚くほどシンプルです。普段使っている `` タグや `