こんにちは！フロントエンドの世界へようこそ。チーフアーキテクトの私です。

Webサイトを作っていて、「あれ、なんか画面が表示されるまでに一瞬真っ白な時間ができるな…」って気になったこと、ありませんか？ 読者があなたのサイトにアクセスしたとき、最初に見せる「ファーストビュー」がなかなか表示されないのは、Web制作において一番避けたいハプニングの一つです。

「コードはちゃんと書いたのに、何が起きているんだろ……」と不安になるかもしれませんが、大丈夫ですよ。安心してください。今回は、ブラウザの裏側で何が起きているのか、その「見えない渋滞」の正体を、身近な例えを交えながら一緒に優しく解き明かしていきましょう！

—

ブラウザは「超真面目な職人さん」

まず、Webブラウザが画面を表示する仕組みをイメージしてみましょう。
ブラウザというのは、届いたHTMLやCSS、JavaScriptをただ適当に並べる怠け者ではありません。むしろ、「ルールにめちゃくちゃ厳しい、でも超真面目な大工さん」だと思ってください。

大工さんは、設計図（HTML）をもとに、家を組み立てていきます。
しかし、ここで問題が発生します。家を建てている最中に、急に「あ、そこの壁紙、やっぱり別のデザインにして！」という指示（CSS）が来たり、「ここに最新のからくり装置（JavaScript）を埋め込んで！」という注文が入ったりすると、大工さんはどうするでしょうか？

「えっ、壁紙の色が決まるまで、内装の工事を止めて待たなきゃいけないの！？」
「からくり装置が動くかテストするまで、床板を張るわけにいかないよ！」

……そう、これがまさに「レンダリングブロック（描画の停止）」の正体です。ブラウザは、完璧で安全な家を建てるために、特定のファイル（CSSやJS）を読み込んでいる最中、画面を表示する手をピタッと止めてしまうのです。

—

悪者じゃない！CSSとJSが描画を止める理由

もう少し具体的に、CSSとJSがなぜブラウザの作業を止めてしまうのかを見てみましょう。つまずきやすいポイントなので、ゆっくり行きますね。

1. CSS：見た目を整える「絶対のルールブック」

HTMLは骨組みですが、CSSはその骨組みに色を塗ったり、形を整えたりする「お化粧」です。
もしCSSの読み込みを待たずに、骨組みだけの素っ裸の状態（HTMLのみ）をパッと画面に出してしまうとどうなるでしょう？ 読者は一瞬、めちゃくちゃに崩れたレイアウトの画面を目にしてしまい、そのあとCSSが適用された瞬間に画面がバッと切り替わりますよね。これでは、目がチカチカして最悪のユーザー体験になってしまいます。

そのためブラウザは、「CSSが全部読み込まれて、デザインのルールが完全に頭に入るまでは、絶対に画面を表示しない！」という頑固なルールを自分に課しています。これが、CSSがレンダリングをブロックする理由です。

2. JS（JavaScript）：何をしでかすか分からない「暴れん坊の職人」

JavaScriptは、ボタンを押したらアニメーションが動いたり、サーバーからデータを取ってきたりする、いわば「動的なからくり」です。
ここで厄介なのが、JSは「HTMLの構造（DOM）そのものを書き換える力を持っている」という点です。

ブラウザが上から順にHTMLを読んで家を建てている途中に、突然JSが登場すると、ブラウザはこう思います。
「おいおい、せっかくここまで建てた柱を、このJSが引っこ抜くかもしれないぞ？ 一旦手を止めて、このJSのコードを実行し終わるのを待とう……」

結果として、JSの読み込みと実行が終わるまで、ブラウザは次のHTMLを読むのをストップしてしまいます。これが、JSによるレンダリングブロックです。

—

大渋滞を防ぐ！優しさいっぱいの最適化テクニック

「じゃあ、どうすればいいの？ 全部読み終わるまで待つしかないの？」と思いますよね。
ここからが腕の見せ所です！ ブラウザの大工さんに「全部一気にやろうとしなくていいからね、効率よく進めて！」と伝えてあげるための、現代のスマートなテクニックを見ていきましょう。

テクニック1：CSSは「メディアクエリ」で賢く分ける

すべてのCSSを1つのファイルにまとめて「全部読み終わるまで画面出すな！」とやると、スマホでもPCでも大きなロスが生まれます。
例えば、「印刷用のCSS」や「大型モニター用のCSS」は、今見ているスマホの画面には関係ありませんよね。

そんなときは、ブラウザに「このCSSはこういう条件のときだけでいいよ」と教えてあげます。

こうすることで、ブラウザは「おっ、今のスマホの画面には関係ないCSSだから、先にメインの画面を描いちゃおう！」と判断してくれ、表示スピードがグッと上がります。

—

テクニック2：JSには `async` や `defer` という「おまじない」をかける

HTMLの途中でJSを読み込むとき、何も指定しないと大渋滞が起きます。そこで、scriptタグに魔法の言葉を追加してあげましょう。

① `defer`（デファー）：HTMLを読み終わってから、順番に実行する（一番おすすめ！）

【例え話】
「資材のカタログ（JS）を裏でこっそり受け取っておいてね。でも、家全体の組み立てが終わるまでは、カタログを開いて作業するのはお預けだよ！」というイメージです。HTMLの構造を邪魔しないので、安全かつ高速になります。

② `async`（アシンクロナス）：準備ができたら、その場で即座に実行する

【例え話】
「届いた順に、その場で即座に作業しちゃうからね！」というスタイルです。主に、アクセス解析ツール（Googleアナリティクスなど）のように、他のHTML要素と関係なく独立して動くプログラムに向いています。

—

実際のコードで確認してみよう！

それでは、これまでのお話をふまえて、ブラウザに優しい「理想的なHTMLの骨組み」を見てみましょう。そのままあなたのエディタにコピーして試せるサンプルです。

—

まとめ：ブラウザと仲良くなろう

いかがでしたでしょうか？
レンダリングブロックという言葉を聞くと難しそうに感じますが、要するに「ブラウザという真面目な大工さんが、効率よく仕事できるように、指示の出し方を工夫してあげようね」というお話です。

• CSSはデザインの基本！ でもスマホ用や印刷用はメディアクエリで上手に切り分ける。
• JSはDOMを壊す暴れん坊！ `defer`や`async`のおまじないをかけて、HTMLの邪魔をさせない。

このちょっとした気配りが、あなたの作るWebサイトを「サクサク動いて気持ちいい！」と言われる最高のものに変えてくれます。
最初から完璧にできなくても大丈夫。まずは`defer`を使ってみるところから、少しずつブラウザとの仲を深めていってくださいね。あなたのフロントエンドライフを、心から応援しています！