HTML、CSS、JavaScript を書き始めた頃、「JavaScript は body タグの最下部に書く」のようなことを聞いたことがあるかもしれません。
これは <code>レンダーブロック</code> 対策の一環です。
<h2 id="レンダーブロックとは">レンダーブロックとは<a aria-hidden="true" tabindex="-1" href="#レンダーブロックとは"></a></h2>
ブラウザがHTML文書をサーバーからレスポンスとして受け取ったとき、ブラウザはHTMLをパースしてDOMツリーを構築します。
解析している時に スタイリングの CSS だったり、JavaScript だったりが見つかった場合は、そのファイルを取得して解析、実行をします。
その間、ブラウザはDOMツリーの構築を一時停止します。
この一時停止のことを <code>レンダーブロック</code> と呼びます。
ページの一部または全部の描画がブロックされ、これが結果的にページロード時間の増加やユーザー体験の低下を引き起こします。
<h2 id="レンダーブロックの影響が深刻化する原因">レンダーブロックの影響が深刻化する原因<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響が深刻化する原因"></a></h2>
ブラウザがHTMLを解析している間に、大きなCSSファイルやJavaScriptファイルがあると、それらが大きければ大きいほど、レンダーブロックの深刻度が増加します。
<h2 id="レンダーブロックされていると何が表示されるのか">レンダーブロックされていると何が表示されるのか<a aria-hidden="true" tabindex="-1" href="#レンダーブロックされていると何が表示されるのか"></a></h2>
JavaScriptやCSSのダウンロード・解析・実行が完了するまで、それらのスクリプトやスタイルシートに依存する部分の描画が遅延またはブロックされます。
<h3 id="cssのレンダーブロック">CSSのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロック"></a></h3>
CSSはページのレイアウトとスタイルを決定します。つまり、すでに読み込まれている HTML はあるが、そこにあてられるべき CSS 
がまだ読み込まれていなかったら、取得と解析のためにレンダーブロックされている間はブラウザはスタイルやレイアウトが適用されていない文章を表示することがあります。
このようなページを読み込んだ際、スタイルが適用されていない状態が一瞬表示されてしまう現象を<code>FOUC（Flash of unstyled content）</code>といいます。
CSSを head 内に配置すると、ブラウザはスタイリング情報をすべて取得してから、HTMLを解析することになります。なので、<code>FOUC（Flash of unstyled content）</code>を防ぐことができます。
(HTMLの解析の前にスタイリングを読み込んで、スタイリングされていない見た目の表示をさせないというだけで head内で読み込んでいれば、そこでレンダーブロックは起きています。)
<h3 id="javascriptのレンダーブロック">JavaScriptのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロック"></a></h3>
JavaScriptは、HTML文書の解析が一時停止され、スクリプトがダウンロードおよび実行されるまで、その後のコンテンツの表示がブロックされることがあります。したがって、JavaScriptファイルがロードされるまで、その下にあるHTMLコンテンツは表示されません。
<h2 id="レンダーブロックの影響を軽減するための指針">レンダーブロックの影響を軽減するための指針<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための指針"></a></h2>
上記の説明の通り、レンダーブロックは大きいCSSファイルやJavaScriptファイルの取得と解析・実行によって HTML の解析が停止して、ページの描画の遅延を引き起こします。
つまり、<code>HTML の解析を一時中断させないような実装をすれば良い</code>ことになります。
そのためには、<code>ページの最初の描画に必要な最小限のCSSをインライン化し、JavaScript をページのフッターに移動する</code>ことです。
この JavaScript をフッターに移動させることが冒頭の「JavaScript は body タグの最下部に書く」という部分に繋がってきます。
また埋め込む JavaScript がもし DOM を操作するスクリプトだったら、HTML の解析が終わっていなければ DOM を取得できないので、そういった観点でも下に書く必要があります。
しかし、<code>全ての JavaScript をフッターに移動させれば良いわけではありません</code>。
Google Tag Manager タグの埋め込みスクリプトだったり、メタタグ、CSS、Polyfill などのスクリプトなど、<code>ページのレンダリングの前に必要なものは、head 内に書く必要</code>があります。
<h3 id="余談">余談<a aria-hidden="true" tabindex="-1" href="#余談"></a></h3>
CSSとJavaScriptファイルをHTMLのどこに埋め込むかといった話をしていると、ReactやVue.jsといったモダンなフロントエンドフレームワークを使っている場合は、HTMLに直接書くことがないので関係なさそうです。
しかし、これらのフレームワークを使っていても、最終的にクライアントがブラウザで見るときは HTML になっているので、全く無関係の話ではないです。
<h2 id="レンダーブロックの影響を軽減するための具体的な方法">レンダーブロックの影響を軽減するための具体的な方法<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための具体的な方法"></a></h2>
<h3 id="cssのレンダーブロックを軽減する方法">CSSのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロックを軽減する方法"></a></h3>
CSSは、HTML文書の<code>headタグ内に配置するのが最も一般的</code>です。
これにより、スタイルシートが最初に読み込まれ、ページのレンダリング中に適用されます。
しかし、CSSが大きい場合やネットワーク速度が遅い場合、HTMLの解析が完了する前にCSSの読み込みが終わらない可能性があり、それがレンダリングをブロックする可能性があります。
この場合、以下の3パターンを今回は紹介します。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>CSSファイルを予めダウンロードしておくために<link rel="preload">を使用します。これにより、CSSファイルが早期にダウンロードされ、実際に必要になったときにすぐに適用することができます。</li>
<li><code>rel="preload"</code>はダウンロードだけするので、解析用に別途<code>&#x3C;link rel="stylesheet"></code>を使用する必要があります。しかし、<code>onload</code> 
属性を追加してダウンロードして、そのまま適用ができます。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずCSSをプリロードします -->
 &#x3C;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

 &#x3C;!-- その後、通常のリンクタグでCSSを適用します -->
 &#x3C;!-- &#x3C;link rel="stylesheet" href="styles.css"> -->
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
ファイルの分割 :
<ul>
<li>大きなCSSファイルはパースと実行に時間がかかり、ページのレンダリングをブロックする可能性があります。 
ファイルを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。</li>
<li>webpackなどのモジュールバンドラーを使用している場合は、CSSをモジュールごとに分割することもできます。</li>
</ul>
</li>
<li>
クリティカルCSSのインライン化 :
<ul>
<li>クリティカルCSSとは、最初のページ表示（ページロード直後の画面）に必要なスタイルのことを指します。 
これをHTML内に直接記述（インライン化）することで、ページロード時にこれらのスタイルがすぐに利用可能になり、ファーストビューのレンダリングが高速化されます。</li>
</ul>
</li>
</ul>
<h3 id="javascriptのレンダーブロックを軽減する方法">JavaScriptのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロックを軽減する方法"></a></h3>
基本的にはレンダリングの前に実行するスクリプトは限られているので、それを除けば、途中でHTML解析を停止させない、またはDOMを操作できるようにするために body 
タグの最下部に書きますが、それ以外にも以下の方法があります。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>JavaScriptファイルを予めダウンロードしておくために<code>&#x3C;link rel="preload"></code>を使用します。 これにより、JavaScriptファイルが早期にダウンロードされます。</li>
<li>ダウンロードだけで<code>別途任意のタイミングで実行する必要</code>があります。</li>
<li>任意のタイミングで実行できるのが<code>script タグの async と defer 属性を使った方法との違い</code>です。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずJavaScriptをプリロードします -->
 &#x3C;link rel="preload" href="script.js" as="script">
&#x3C;/head>
&#x3C;body>
 &#x3C;!-- HTML要素 -->

 &#x3C;!-- HTML文書の最後、すなわち&#x3C;body>タグの最後でスクリプトを実行します -->
 &#x3C;script src="script.js">&#x3C;/script>
&#x3C;/body>
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>async</code>および<code>defer</code>属性を使用する :
<ul>
<li><code>async属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行い、スクリプトのダウンロードが完了したらすぐに実行します。ダウンロードされるとすぐに実行されるため、レンダリングをブロックする可能性があります。</li>
<li><code>defer属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行いe、全てのHTMLの解析が終わった後にスクリプトを実行します。これにより、HTMLの解析がJavaScriptによってブロックされるのを防ぎます。</li>
<li>async属性とdefer属性の<code>両方を同時に書くべきではない</code>です。
<blockquote>
asyncとdeferの両方を使うことはアンチパターンで、defer部分は無視されてasyncが優先されるので避けるべきものです。
</blockquote>
引用元: <a href="https://almanac.httparchive.org/ja/2022/javascript#javascript%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F" title="almanac">almanac</a></li>
<li>使用例 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- async属性を使用する -->
 &#x3C;script async src="script.js">&#x3C;/script>

 &#x3C;!-- defer属性を使用する -->
 &#x3C;script defer src="script.js">&#x3C;/script>
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
スクリプトの分割
大きなJavaScriptファイルもパースと実行に時間がかかり、ページのレンダリングを遅延させます。JavaScriptのコードを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。
</li>
<li>
クリティカルJavaScriptのインライン化
クリティカルなJavaScript（ページの初回描画に必要なJavaScript）をHTML内に直接記述（インライン化）することで、スクリプトがすぐに利用可能になります。これにより、特に重要な機能のレンダリングが高速化されます。
</li>
</ul>
<h2 id="まとめ">まとめ<a aria-hidden="true" tabindex="-1" href="#まとめ"></a></h2>
HTML についての学習はweb開発において初心者の頃にする傾向があると思うので、意外と読み込みの手法については知らない場合があると思います。自分はそのパターンだったので今回まとめました。

Tag: css