なぜWebサイトは「読み込み中」で止まるのか？「Critical CSS」でレンダリングを爆速にする方法
こんにちは。Web開発の現場へようこそ！
皆さんは、Webサイトを開いたときに「真っ白な画面が数秒続いて、いきなりパッと表示される」という経験をしたことはありませんか？ あれ、実はブラウザが一生懸命「準備」をしている時間なんです。
今日は、そんなブラウザの裏側を覗きながら、「Critical CSS（クリティカルCSS）」という、魔法のような高速化テクニックについてお話しします。難しく聞こえるかもしれませんが、大丈夫。普段の生活に例えれば、すぐにピンとくるはずですよ。
—
ブラウザの「朝の準備」をイメージしてみよう
ブラウザがWebページを表示する作業は、まるで「朝、出かける前の準備」に似ています。
1. HTMLを受け取る：玄関に届いた「今日の服のリスト（HTML）」を広げる。
2. CSSを読みに行く：服のコーディネートや色合いが書かれた「ファッション雑誌（外部CSSファイル）」を、わざわざ隣町の図書館まで借りに行く。
3. 着替える（レンダリング）：雑誌の内容を確認しながら、実際に服を着る。
ここで問題になるのが、「わざわざ遠くまで雑誌を借りに行かなきゃいけない」という時間です。これが外部CSSを読み込むときの「待ち時間」です。この間、ブラウザは「どんな服を着ればいいか分からない！」と立ち尽くしてしまい、画面は真っ白なまま。
これこそが、Webサイトの表示が遅れる最大の原因の一つなんです。
—
Critical CSS：必要な分だけ「手元」に置いておく
そこで登場するのがCritical CSSです。
これは、「一番上に表示される範囲（ファーストビュー）に必要なスタイルだけを、メモ帳に書き写してポケットに入れておく」という戦略です。
わざわざ図書館（外部CSSファイル）まで行かなくても、その場でパッと着替えられるようにする。これができれば、ブラウザは待ち時間なしで、画面の上半分から表示を開始できるわけです。
実際にコードで見てみよう
HTMLの `
` 内に、直接CSSを書き込むのがポイントです。
なぜこれで速くなるの？
ブラウザは、HTMLを上から順に読んでいきます。`