こんにちは！フロントエンドの現場を長年歩んできた私ですが、Webブラウザって本当に面白い生き物（ソフトウェア）なんですよね。普段私たちが何気なく見ているWebサイトですが、画面が表示されるまでの裏側では、ブラウザがものすごい猛ダッシュで準備運動をしています。
今回は、その裏側の主役の一人である「プリロードスキャナー（Preload Scanner）」についてお話しします。
「なんだか難しそうな名前だな……」と思いましたか？大丈夫ですよ、専門用語なんていったん忘れてください。今日のこの記事を読み終わる頃には、「なるほど、ブラウザってこんなに気配り上手なんだ！」と愛着が湧いているはずです。一緒に紐解いていきましょう！
—
1. Webページが表示されるまでの「もどかしい時間」
私たちが普段、URLをポチッと入力してからWebサイトが表示されるまでの数秒間。ブラウザの中では、HTMLという設計図を上から順番に読み解く作業（これを「パース」と呼びます）が行われています。
ここで、ちょっと想像してみてください。
あなたが大きなお家を建てる大工さんだとします。設計図を上から順に読んでいくと、途中でこんな指示が出てきました。
> 「ここに特製のステンドグラス（画像）をはめ込みます。あと、リビングの壁紙（CSS）と、床暖房のシステム（JavaScript）を取り寄せてください！」
生真面目な大工さん（メインのHTMLパーサー）は、ここで手を止めがちです。「おっと、外部からパーツを取り寄せなきゃいけないな。届くまで次の設計図を読むのはちょっと待つか……」と。
これがもし、ネットの回線が遅かったり、遠くのサーバーからパーツを取り寄せたりする場合だったらどうでしょう？ 画面が真っ白なまま、ユーザーは数秒間待たされることになります。現代のユーザーは気が短いので、3秒待ったらもう別のタブにいってしまいますよね。せっかくの素敵なサイトが台無しです。
この「待たされるもどかしさ」を華麗に解決するために、ブラウザの中にこっそり忍ばせている秘密兵器、それが「プリロードスキャナー」なんです。
—
2. プリロードスキャナーってなに？ 例えるなら「優秀な買い出し担当」
お買い物を想像してください。
あなたが今度、お友達を呼んで盛大なホームパーティをするとします。あなたはキッチンで料理のレシピ（HTML）を上から順番に読んで作っています。
もし、あなた一人だけで「あ、バターが切れてる！買いに行かなきゃ」「あ、ワインクーラーも必要だ！」と、レシピのその行にぶつかるたびに買い出しに走っていたら、パーティの準備はいつまで経っても終わりませんよね。
そこで、あなたの隣に「超優秀なアシスタント（プリロードスキャナー）」を配置したとしましょう。
このアシスタントは、あなたと一緒にレシピをじっくり読むわけではありません。レシピをパラパラッとめくりながら、「あ、ここにバターって書いてある！」「こっちにはワインクーラーが必要だね！」と、必要な材料だけを先回りして一瞬で見つけ出し、あなたが料理を始めるよりもはるか前に、一足先にスーパーへ走って買いにいってくれるのです。
ブラウザの世界でもまったく同じことが起きています。
メインのHTMLパーサーがじっくりとHTMLを解読している裏で、プリロードスキャナーは、HTMLのテキストの中を「先読み（スキャン）」し、画像、スタイルシート（CSS）、JavaScriptといった外部リソースのありか（URL）を、メインの処理がそこに到達するよりもはるか手前でフライング気味に見つけ出し、裏でこっそりダウンロードを始めているのです。
これのおかげで、メインのパーサーが「そろそろCSSが必要だな」と思った時には、すでにそのCSSのダウンロードが完了している、あるいは完了寸前になっているというわけです。ブラウザ、すごい気配り屋だと思いませんか？
—
3. 実務で知っておくべき！プリロードスキャナーを味方につけるコツ
私たちWeb制作・開発者が書くコード次第で、このプリロードスキャナーの動きはもっと機敏になったり、逆に邪魔されてノロノロ運転になってしまったりします。
ここでは、実務で絶対に知っておいてほしい「プリロードスキャナーを最大限に活躍させるコツ」を、簡単なコード例とともに見ていきましょう。
コツ①：画像の指定は、最初からHTMLに書いておく（CSSの背景画像に頼りすぎない）
ブラウザのプリロードスキャナーは、HTMLのテキストをパパッとスキャンするのが得意です。つまり、HTMLの中に書かれているタグ（例えば `` タグなど）は、一瞬で見つけて先回りしてダウンロードしてくれます。
ですが、これが「CSSファイルの中」に隠れている画像だと、プリロードスキャナーのフライングが見えにくくなってしまいます。
上記のコードであれば、プリロードスキャナーは一瞬で `main-visual.jpg` を見つけ出し、CSSの読み込みを待たずに画像のダウンロードを始められます。
逆に、CSSファイルの中で `background-image: url(‘main-visual.jpg’);` と書いてしまうと、「まずCSSファイルをダウンロードして、中身を解読して……」というステップを踏む必要があり、画像の発見がどうしても遅れてしまいます。サイトの「顔」になるような大切な画像は、できるだけHTML側に書いてあげると、プリロードスキャナーが大喜びします。
コツ②：JavaScriptの読み込みで道を塞がない
JavaScript（特に普通の `
こんにちは、ブラウザの世界へようこそ！
プリロードスキャナーが裏でせっせと働いています。