公開日: 2014 年 3 月 31 日
デフォルトでは、CSS はレンダリング ブロック リソースとして扱われます。つまり、ブラウザは CSSOM が構築されるまで、処理されたコンテンツをレンダリングしません。CSS を簡潔に保ち、できるだけ早く配信し、メディアタイプとクエリを使用してレンダリングをブロック解除するようにしてください。
レンダリング ツリーの構築で見たように、クリティカル レンダリング パスでは、レンダリング ツリーを構築するために DOM と CSSOM の両方が必要です。これにより、パフォーマンスに重要な影響が生じます。HTML と CSS の両方がレンダリング ブロック リソースになるためです。DOM がなければレンダリングするものがなくなるため、HTML は明らかですが、CSS の要件はそれほど明らかではないかもしれません。CSS のレンダリングをブロックせずに一般的なページをレンダリングしようとするとどうなるでしょうか？
概要
- デフォルトでは、CSS はレンダリング ブロック リソースとして扱われます。
- メディアタイプとメディアクエリを使用すると、一部の CSS リソースをレンダリング ブロックなしとしてマークできます。
- ブラウザは、ブロック動作と非ブロック動作に関係なく、すべての CSS リソースをダウンロードします。
前述の例（CSS ありとなしのニューヨーク タイムズのウェブサイト）は、CSS が利用可能になるまでレンダリングがブロックされる理由を示しています。CSS がないと、ページは比較的使い物になりません。右側の現象は、FOUC（Flash of Unstyled Content）と呼ばれることがよくあります。ブラウザは、DOM と CSSOM の両方が揃うまでレンダリングをブロックします。
CSS はレンダリングをブロックするリソースです。初回レンダリングまでの時間を最適化するため、できるだけ早くクライアントに送信します。
ただし、特定の条件でのみ使用される CSS スタイルがある場合はどうでしょうか。たとえば、ページが印刷される場合や、大きなモニターに投影される場合などです。これらのリソースのレンダリングをブロックする必要がないのが理想です。
CSS の「メディアタイプ」と「メディアクエリ」を使用すると、次のユースケースに対応できます。
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
メディアクエリは、メディアタイプと、特定のメディア機能の条件をチェックする 0 個以上の式で構成されます。たとえば、最初のスタイルシート宣言ではメディアタイプやクエリが指定されていないため、すべてのケースに適用されます。つまり、常にレンダリングをブロックします。一方、2 つ目のスタイルシート宣言は、コンテンツが印刷される場合にのみ適用されます。レイアウトの再配置やフォントの変更など、印刷に関する重要なデザイン上の考慮事項がある場合に使用します。したがって、このスタイルシート宣言は、ページが最初に読み込まれるときにページのレンダリングをブロックする必要はありません。最後に、最後のスタイルシート宣言は、ブラウザによって実行される「メディアクエリ」を提供します。条件が一致すると、ブラウザはスタイルシートがダウンロードされて処理されるまでレンダリングをブロックします。
メディアクエリを使用すると、表示と印刷などの特定のユースケースや、画面の向きの変更やサイズ変更イベントなどの動的な条件に合わせてプレゼンテーションを調整できます。スタイルシート アセットを宣言する際は、メディアタイプとクエリに十分注意してください。これらはクリティカル レンダリング パスのパフォーマンスに大きく影響します。
次のような例を想定します。
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- 最初の宣言はレンダリングをブロックし、すべての条件で一致します。
- 2 番目の宣言もレンダリングをブロックします。
"all"はデフォルトの型であるため、型を指定しないと、暗黙的に"all"に設定されます。したがって、最初の宣言と 2 番目の宣言は実際には同等です。 - 3 つ目の宣言には動的メディアクエリが含まれており、ページが読み込まれるときに評価されます。ページの読み込み中のデバイスの向きによっては、
portrait.cssがレンダリングをブロックする場合としない場合があります。 - 最後の宣言は、ページが印刷されるとき（
"print"）にのみ適用されるため、ブラウザでページが最初に読み込まれるときにレンダリングをブロックすることはありません。
最後に、「レンダリング ブロック」は、ブラウザがそのリソースでページの初期レンダリングを保持する必要があるかどうかのみを指すことに注意してください。いずれの場合も、ブラウザは CSS アセットをダウンロードしますが、非ブロッキング リソースの優先度は低くなります。