このページは Cloud Translation API によって翻訳されました。

未使用の CSS を削除します

Lighthouse レポートの [改善案] セクションには、未使用の CSS が含まれ、2 KiB 以上の削減が見込めるすべてのスタイルシートが一覧表示されます。使用していない CSS を削除して、ネットワークアクティビティによって不必要に消費される通信量を抑えます。

未使用の CSS がパフォーマンスを低下させる仕組み

ページにスタイルを追加する一般的な方法は、<link> タグを使用する方法です。

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

ブラウザがダウンロードする main.css ファイルは、使用する HTML とは別に保存されるため、外部スタイルシートと呼ばれます。

デフォルトでは、ブラウザはコンテンツをユーザーの画面に表示またはレンダリングする前に、検出されたすべての外部スタイルシートをダウンロード、解析、処理する必要があります。スタイルシートにページのスタイルに影響するルールが含まれている可能性があるため、スタイルシートが処理される前にブラウザがコンテンツを表示しようとしても意味がありません。

各外部スタイルシートはネットワークからダウンロードする必要があります。このような余分なネットワークトラフィックにより、コンテンツが画面に表示されるまでユーザーが待つ時間が大幅に長くなる可能性があります。

未使用の CSS は、ブラウザによるレンダリングツリーの構築を遅らせます。レンダリングツリーは DOM ツリーに似ていますが、各ノードのスタイルも含まれます。レンダリングツリーを構築するには、ブラウザが DOM ツリー全体を走査し、各ノードに適用される CSS ルールを確認する必要があります。未使用の CSS が多いほど、ブラウザが各ノードのスタイルの計算に費やす時間が長くなる可能性があります。

使用されていない CSS を検出する方法

Chrome DevTools の [カバレッジ] タブを使用すると、重要な CSS と重要でない CSS を見つけることができます。 [カバレッジ] タブで使用済みと未使用の CSS を確認するをご覧ください。

クリティカルな CSS をインライン化し、クリティカルでない CSS を先送りする

<script> タグ内のインラインコードと同様に、HTML ページの head にある <style> ブロック内で、First Paint に必要なインラインクリティカルスタイルを行います。次に、preload リンクを使用して残りのスタイルを非同期で読み込みます。

クリティカルツールを使用して、「スクロールせずに見える範囲」の CSS を抽出してインライン化するプロセスを自動化することを検討してください。

詳しくは、クリティカルではない CSS を先送りするをご覧ください。

スタック固有のガイダンス

Drupal

使用されていない CSS ルールの削除を検討し、必要な Drupal ライブラリのみを関連性の高いページまたはページのコンポーネントに接続してください。詳細については、Drupal のドキュメントをご覧ください。

不要な CSS を追加している接続ライブラリを特定するには、Chrome DevTools でコードカバレッジを実行してみてください。Drupal サイトで CSS の集約が無効になっている場合、スタイルシートの URL から、該当のテーマやモジュールを特定できます。

コードカバレッジが赤色で示されている複数のスタイルシートがリストされているテーマとモジュールに注意してください。テーマとモジュールは、実際にページで使用される場合にのみ、スタイルシートライブラリをアタッチします。

Joomla

ページで使用されていない CSS を読み込む Joomla 拡張機能の数を減らすか、他の拡張機能に切り替えることをご検討ください。

WordPress

ページで使用されていない CSS を読み込む WordPress プラグインの数を減らすか、他のプラグインに切り替えることをご検討ください。

リソース

使用していない CSS を削除の監査のソースコード