CSSとレンダリングブロック（Render-Blocking）問題
ブラウザがウェブページを読み込む際、画面に最初のピクセルを描画する前に、リンクされているすべてのCSSファイルをダウンロードしてパースする必要があります。これはレンダリングをブロックするリソースと呼ばれます。CSSファイルが重ければ重いほど、ユーザーが真っ白な画面を見つめなければならない時間が長くなります。
GoogleのCore Web Vitalsへの直接的な影響
Googleは、以下の指標を通じて実際のユーザー体験に基づきウェブサイトのランキング評価を行っています：
- FCP (First Contentful Paint): 画面に最初の要素が表示されるまでの時間。CSSを圧縮することでブラウザの処理スピードが早まり、FCPを大幅に削減できます。
- LCP (Largest Contentful Paint): 最も大きな要素が表示されるまでの時間。CSSファイルのサイズを小さくすると帯域幅が解放され、ヒーロー画像などの重要なリソースをより迅速にロードできるようになります。