接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
速度 大きな影響 難しい 1～3時間

ブロックする CSS を減らす

head 内の大きな CSS はレンダリングを遅延させます。

それは何ですか

CSS はデフォルトでブロックされています。ブラウザはスタイルをダウンロードして処理するまで何も表示しません。したがって、CSS ファイルが大きいか多数あると、ページの最初の描画が遅れます。

なぜそれに対処するのでしょうか？

サイト全体に 1 つの大きな CSS ファイルを読み込むと、単純なページであっても遅延します。最適化により、LCP と体感速度が直接向上します。

やり方

  1. 1表示部分の「クリティカル CSS」を抽出し、<head> にインライン化します。
  2. 2CSS の残りの部分を非同期的にロードします (media="print" トリックまたは rel="preload" + onload)。
  3. 3使用されていないスタイルを削除します (PurgeCSS / devtools のカバレッジ ツール)。
  4. 4CSS を 1 つのモノリスではなくページ/コンポーネントごとに分割します。

重要ではない CSS の非同期読み込み

Správně
<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>

結論

クリティカル CSS インライン + 残りの非同期は、CSS のブロックに対して最も効果的なパターンです。これはより要求の厳しい変更ですが、遅いサイトでは最初のレンダリングが大幅に高速化されます。最新のビルド ツールとフレームワークにより、それが簡単になります。

関連トピック