未使用の CSS を削除します

Lighthouse レポートの [最適化] セクションには、未使用の CSS を含むすべてのスタイルシートが一覧表示され、2 KiB 以上削減される可能性があります。未使用の CSS を削除して、ネットワーク アクティビティによって不要なバイトを消費しないようにします。

Lighthouse の「未使用の 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 を [カバレッジ] タブで確認するをご覧ください。

Chrome DevTools: [カバレッジ] タブ
Chrome DevTools: [カバレッジ] タブ

クリティカルな CSS をインライン化し、クリティカルでない CSS を遅らせる

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

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

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

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

Drupal

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

Joomla

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

WordPress

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

リソース