未使用の 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 を表示するをご覧ください。

<ph type="x-smartling-placeholder">
</ph> Chrome DevTools: [カバレッジ] タブ <ph type="x-smartling-placeholder">
</ph> Chrome DevTools: [カバレッジ] タブ

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

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

スクロールせずに見える範囲の抽出とインライン化のプロセスの自動化を検討するCSS クリティカル ツールを使用する。

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

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

Drupal

使用していない CSS ルールの削除をご検討ください。必要な Drupal ライブラリのみをアタッチする 該当ページまたはページ内のコンポーネントに ユーザーを誘導する手間が省けますライブラリの定義をご覧ください。 をご覧ください。

Joomla

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

WordPress

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

リソース