改善できる項目「使用していない CSS の遅延読み込み」

「使用していないルールをスタイルシートから削除して、データ通信量を減らしてください。」となっているこの項目に関しては、読み込みのタイミングを変更するなど方法はありますが、今回は「未使用のCSSを整理する事」を検討しました。

未使用のCSSを整理する場合にチェックツールはいくつかありますが、Google Chromeでも調査可能です。
1Google Chromeのデベロッパーツールを起動
2[Console]を表示し、画面を閉じる×アイコンの下の [⋮]→[More tools]→[Coverage]

3reloadアイコンをクリック

すると、デベロッパーツールの下部に、読み込んでいるCSSなどのファイルが表示されます。
該当のファイルをクリックすると、緑のバーと赤色でセレクタが表示されますが
赤色（未使用のセレクタ）のセレクタを確認、整理する事ができます。
ここで1点注意が必要です。レスポンシブデザイン用のメディアクエリの部分も赤色で表示されます。削除する前は、事前にバックアップを残しておき、注意し作業を実行しましょう。