CSS のパフォーマンス最適化

CSS では、メディアクエリーによって、具体的な条件に合わせてスタイル設定を行うことができます。メディアクエリーはレスポンシブウェブデザインにとって重要であり、重要なレンダリングパスを最適化することを支援します。ブラウザーはこれらのスタイルをすべて解釈するまでレンダリングをブロックしますが、印刷スタイルシートのように使用しないことがわかっているスタイルについてはレンダリングをブロックしません。メディアクエリーに基づいて CSS を複数のファイルに分割することで、使用しない CSS をダウンロードする際の描画ブロックを防ぐことができます。ブロックされない CSS リンクを作成するには、印刷スタイルのようなすぐに使用しないスタイルを別個のファイルに移動し、HTML マークアップに <link> を追加し、この場合、印刷スタイルであることを示すメディアクエリーを追加してください。

<!-- styles.css の読み込みと解釈は描画ブロック -->
<link rel="stylesheet" href="styles.css" />

<!-- print.css の読み込みと解釈は描画ブロックされない -->
<link rel="stylesheet" href="print.css" media="print" />

<!-- mobile.css の読み込みと解釈は、広い画面では描画ブロックされない -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

既定では、ブラウザーは指定されたスタイルシートが描画ブロックされることを想定しています。スタイルシートが適用されるタイミングは、メディアクエリーを使って media 属性を追加してブラウザーに指示します。ブラウザーはスタイルシートを見ると、特定のシナリオにのみ適用する必要があることを認識し、スタイルシートをダウンロードしますが、描画はブロックしません。CSS を複数のファイルに区切ることで、描画をブロックするメインのファイル（この場合は "styles.css"）をより小さくし、描画がブロックされる時間を短縮しています。

ブラウザーは CSS アニメーションを処理するように最適化されており、再フロー（つまり再描画）を発生させないプロパティのアニメーションはとてもうまく処理します。パフォーマンスを向上させるために、アニメーションさせるノードをメインスレッドから GPU に移すことができます。合成をもたらすプロパティには、3D 座標変換（transform: translateZ() や rotate3d() など）、アニメーション座標変換、opacity、position: fixed、will-change、filter などがあります。また、<video>、<canvas>、 <iframe> など、いくつかの要素がレイヤーになることもあります。要素をレイヤーとして昇格させることは、合成とも呼ばれますが、座標変換プロパティのアニメーションを GPU で行うことで、特にモバイルでのパフォーマンスが向上します。

CSS の will-change プロパティは、要素がどのように変化することが予想されるかをブラウザーに示唆します。ブラウザーは、要素が実際に変更される前に最適化を設定することがあります。この種の最適化は、実際に必要とされる前に高価な可能性のある作業を行うことで、ページのレスポンスを向上させることができます。

.element {
  will-change: opacity, transform;
}

@font-face ルールに適用される font-display プロパティは、フォントファイルがどのようにブラウザーで読み込まれて表示されているのか、フォントの読み込み中、または読み込みが失敗した時に代替フォントでテキストを表示できるようにするかを定義します。これにより、空白の画面を表示することなくテキストを表示することができ、パフォーマンスを向上させることができます。

@font-face {
  font-family: someFont;
  src: url(/path/to/fonts/someFont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

contain は CSS のプロパティで、作成者がある要素とその内容が、できるだけ、文書ツリーの残りの部分から独立指せることを示します。これにより、ブラウザーはページ全体ではなく、DOM の限られた領域に対してレイアウト、スタイル、描画、サイズ、またはそれらの任意の組み合わせを再計算することができるようになります。

• 前のページ
• Overview: ウェブパフォーマンス
• 次のページ

• CSS アニメーションのパフォーマンス