CSS Academy · レッスン

クリティカルCSSとレンダリングブロック

ファーストビューに必要なクリティカルCSSをインライン化し、不要なスタイルを遅延させてレンダリングブロックを解消します。

「クリティカルCSSとレンダリングブロック」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

ブラウザーのレンダリング方法

ブラウザーはHTMLをDOMに、CSSをCSSOMに解析し、それらを組み合わせてレンダーツリーを作成し、レイアウトを実行してからペイントします。CSSOMが完成するまでCSSはレンダリングをブロックするため、クリティカルパス上のCSSは1バイト増えるごとに最初のペイントを遅らせます。

クリティカルCSSとは

クリティカルCSSとは、ファーストビューのコンテンツを描画するために必要な最小限のスタイルです。<head>内の<style>タグにインライン化すると、初期表示でレンダリングをブロックするスタイルシートのリクエストが不要になります。

レンダリングをブロックするリソース

head内の<link rel="stylesheet">はすべてレンダリングをブロックします。async/deferのないスクリプトもHTMLの解析をブロックします。レンダリングをブロックするリソースを減らすと、Largest Contentful Paint（LCP）とFirst Contentful Paint（FCP）が直接改善します。

クリティカルCSSの抽出

critical（npm）、Penthouse、Puppeteerベースの抽出ツールなどは、特定のビューポートサイズでページを描画し、表示要素に適用されるスタイルを取得します。出力をインライン化し、完全なスタイルシートは非同期で読み込みます。

非クリティカルCSSの非同期読み込み

media="print"とonloadによる切り替えを使うか、rel="preload" + as="style" + onload="this.rel='stylesheet'"のパターンを使うと、ブロックせずに完全なスタイルシートを読み込めます。

  <pre class="snippet">&lt;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" href="styles.css"&gt;&lt;/noscript&gt;</pre>

メディアクエリを読み込みヒントとして使う

一致しないメディアクエリ（例：media="print"）で読み込まれたCSSファイルは低い優先度でダウンロードされ、レンダリングをブロックしません。これは、クリティカルパスをブロックせずにスタイルシートを読み込む古典的なテクニックです。

HTTP/2とCSS分割

HTTP/2の多重化により、多数の小さなファイルにCSSを分割しても、HTTP/1よりオーバーヘッドが小さくなります。すべてのページのスタイルを含む1つの巨大なバンドルではなく、home.cssやcheckout.cssのように、各ルートで必要なCSSだけを読み込みます。

CSSとプリロードスキャナー

ブラウザーのプリロードスキャナーはスタイルシートの<link>タグを早期に検出し、HTMLパーサーがその位置に到達する前にダウンロードを開始します。スタイルシートは<head>内に置き、body内には置かないでください。そうすればプリロードスキャナーが早く検出できます。

レンダリングブロックの影響測定

Chrome DevToolsのNetworkパネルでは、ウォーターフォール上でリソースのブロック時間を確認できます。Lighthouseはリソースごとの削減効果とともに「レンダリングをブロックするリソースを排除」というレポートを表示します。WebPageTestでは、フィルムストリップビューにrenderBlockingResourcesが表示されます。

サーバーサイドのクリティカルCSS

Next.jsやAstroなどのフレームワークは、SSR中にクリティカルCSSを自動的にインライン化します。サーバーが初期HTMLに適用されるスタイルを特定してインライン化するため、クライアント側で抽出する手順は必要ありません。

実用上のトレードオフ

CSSをインライン化しすぎるとHTMLサイズが増加し、TTFBが遅くなり、キャッシュ効率が低下します（HTMLはCSSファイルほど長くキャッシュされません）。インライン化するクリティカルCSSは、最初のTCP輻輳ウィンドウに収まるよう14KB以下を目標にします。

知識チェック

レンダリングをブロックするスタイルシートがFirst Contentful Paintを遅らせるのはなぜですか？

概要

クリティカルCSSはファーストビューのスタイルをインライン化し、レンダリングをブロックする遅延をなくします。残りのCSSは、preloadまたはメディアクエリのテクニックを使って非同期で読み込みます。LighthouseとDevToolsで影響を測定し、最適なパフォーマンスのためにクリティカルCSSのサイズを14KB未満に抑えます。

よくある質問

「クリティカルCSSとレンダリングブロック」レッスンは無料ですか？

はい。「クリティカルCSSとレンダリングブロック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「クリティカルCSSとレンダリングブロック」で何を学びますか？

ファーストビューに必要なクリティカルCSSをインライン化し、不要なスタイルを遅延させてレンダリングブロックを解消します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「クリティカルCSSとレンダリングブロック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る