CSSが1つのファイルにバンドルされている場合、tree-shaking後でも、さまざまな@mediaコンテキスト（モバイル、タブレット、デスクトップ、ダーク/ライト/その他のテーマなど）のために、多くの未使用CSSが含まれてしまいます。
これはCore Web Vitalsに悪影響を及ぼします：First Input Delay (FID)、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)だけでなく、First Contentful Paint (FCP)、Total Blocking Time (TBT)、Time to Interactive (TTI)、DOMContentLoadedイベントなど、他の重要なパフォーマンスとユーザビリティの指標にも影響があります。
CSSの読み込みとレンダリングを大幅に改善する方法として、CSSを異なるファイルに分割し、各ファイルにそのコンテキストで必要なコードのみを含めるという方法があります。
CSSを以下のファイルに分割してください：
📄main.css - すべての@media条件に必要なCSSを格納
📄screen.css - screen @media条件のみに必要なCSSを格納
📄print.css - print @media条件のみに必要なCSSを格納
📂breakpoints
📄x-small.css - X-Smallブレークポイントのみに必要なCSSを格納
📄sm.css - Smallブレークポイントのみに必要なCSSを格納
📄md.css - Mediumブレークポイントのみに必要なCSSを格納
📄lg.css - Largeブレークポイントのみに必要なCSSを格納
📄xl.css - Extra largeブレークポイントのみに必要なCSSを格納
📄xxl.css - Extra extra largeブレークポイントのみに必要なCSSを格納
📂themes
📄light.css - ライトテーマのみに必要なCSSを格納
📄dark.css - ダークテーマのみに必要なCSSを格納次に、CSSファイルをこのようにインクルードします：
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">このアプローチにより、最新のブラウザは現在の@media条件に必要なCSSの読み込みを優先するため、未使用のCSSの読み込みを待つ必要がなくなり、ページレンダリングが大幅に高速化されます。
すべてのCSSが1つのファイルにバンドルされており、linkタグのmedia属性で条件を指定しない場合、ブラウザはCSSのセット全体が読み込まれるまでページレンダリングを開始しません。これにより、ページレンダリングが大幅に遅くなります。
この例のブレークポイントはBootstrap 5に基づいています。Bootstrapが間もなくライト/ダーク/その他のテーマのサポートを追加することを考えると、このアプローチはさらに重要になります。
ウェブをより良く、より速くしたい場合は、以下にご協力ください：
- この記事を共有する。
- この記事をあなたが使用しているフレームワークの開発者に送る。
- あなたのサイトでこのCSS分割を実装する。
ソーシャルメディアで共有するか、後で保存してください：
この最適化とブラウザの動作についてもっと詳しく知りたい場合は、以下を参照してください：
- Vadim Makeev氏による記事「条件付きで適応するCSS。パフォーマンスを改善する可能性のあるブラウザの動作」。この記事のカバー画像は彼の素晴らしい記事から引用されており、そこにはさらに多くのスクリーンショットと実験が掲載されています。
- MDN Web Docs: CSS パフォーマンス最適化。