「Webブラウザって、URLを入力したら魔法みたいにパッと画面が出るよね。でも、その裏側でブラウザくんがどれだけ必死に汗をかいて走り回っているか……想像したことはありますか？」
こんにちは。フロントエンドの現場で長年、ブラウザという「気まぐれな相棒」と付き合ってきたチーフアーキテクトです。今日は、あなたの作ったWebサイトが、ユーザーの目に触れるまでの「0.1秒の戦い」についてお話ししましょう。
—
1. 最初のピクセルへの旅：ブラウザは「大忙しの料理人」
想像してみてください。あなたは今、レストランのオーナーです。お客さん（ユーザー）が来店しました。あなたはできるだけ早く料理（Webサイト）を出さなければいけません。
ブラウザの「クリティカルレンダリングパス（CRP）」とは、まさにこの「注文を受けてから、最初の一皿をお客さんのテーブルに運ぶまでの全工程」のことです。
1. HTMLを受け取る: 材料（HTML）が届きます。
2. DOMを作る: 材料を一つひとつ並べて、レシピ本（DOMツリー）を作ります。
3. CSSで飾り付け: どんなお皿に盛るか、どんな色か（CSSOMツリー）を決めます。
4. 合体（レンダリングツリー）: レシピとお皿を組み合わせて、ようやく盛り付けを開始します。
この工程の中で、もし「あ、これがないと作れない！」という事態が起きると、ブラウザは手を止めて待機してしまいます。これが「ブロッキング」、つまり表示が遅れる原因です。
—
2. なぜ「白い画面」が続いてしまうのか？
一番よくある失敗は、「重い荷物を玄関で受け取って、そこで開梱を始めてしまうこと」です。
Webブラウザは、HTMLを上から順に読んでいくのですが、途中で`
戦略②：CSSは「一番の優先客」にする
CSSがないと、画面は崩れて表示されてしまいます。だからこそ、CSSはページの一番上（`
`内）で読み込ませて、最短距離で届けてあげましょう。戦略③：不要なリソースは「後回し（lazy loading）」
ページの最初の方に見えない画像（スクロールした先にある写真など）を、最初から読み込む必要はありませんよね？ これも「あとでいいよ」と教えてあげましょう。
---
4. 大丈夫、少しずつ改善していけばいい
「うわ、覚えることがたくさんあるな……」と不安に思いましたか？ 大丈夫ですよ。
最初は、誰でも「とりあえず動けばいいや」から始まるものです。でも、今日あなたが知った「ブラウザは慎重な料理人である」というイメージさえ持っていれば、コードを書くときに「あ、このスクリプトをここに置くとブラウザが止まっちゃうかな？」と気づけるようになります。
エンジニアとしての成長は、その「ブラウザへの思いやり」から始まります。
まずは `defer` を追加してみる、画像を `lazy` にしてみる。そんな小さな一歩が、ユーザーにとっての「爆速の体験」に繋がります。ブラウザという相棒と仲良くなって、最高のWebサイトを作り上げていきましょう！
何か詰まったら、いつでも聞きに来てください。現場の知恵なら、いくらでもおすそ分けしますから。
コメント