対象範囲: 使用していない JavaScript と CSS を見つける

Kayce Basques 氏
Kayce Basques

Chrome DevTools の [Coverage] タブを使用すると、使用されていない JavaScript や CSS コードを見つけることができます。使用していないコードを削除すると、ページの読み込みが速くなり、モバイル ユーザーのモバイルデータを節約できます。

コード カバレッジを分析しています。
図 1. コード カバレッジを分析する

概要

使用されていない JavaScript や CSS の送信は、ウェブ開発における一般的な問題です。たとえば、ページで Bootstrap のボタン コンポーネントを使用するとします。ボタン コンポーネントを使用するには、次のように Bootstrap のスタイルシートへのリンクを HTML に追加する必要があります。

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

このスタイルシートには、ボタン コンポーネントのコードだけが含まれています。Bootstrap のすべてのコンポーネントの CSS が含まれています。ただし、他の Bootstrap コンポーネントは使用しません。つまりページ内に不要な CSS を 多数ダウンロードしますこの追加の CSS が問題となる理由は次のとおりです。

  • 追加コードによりページの読み込みが遅くなります。レンダリングをブロックする CSS をご覧ください。
  • ユーザーがモバイル デバイスでページにアクセスした場合、追加のコードがモバイルデータ通信を使用します。

[カバレッジ] タブを開く

  1. コマンド メニューを開きます
  2. coverage」と入力して [Show Coverage] コマンドを選択し、Enter キーを押してコマンドを実行します。[Coverage] タブがドロワーに表示されます。
[カバレッジ] タブ。
図 2. [一致率] タブ。

コード カバレッジを記録する

  1. [一致率] タブで次のいずれかのボタンをクリックします。
    • ページの読み込みに必要なコードを確認するには、[Start Instrumenting Coverage And Retry Page] 再読み込み をクリックします。
    • ページの操作後に使用されたコードを確認するには、[Instrument Coverage] 録音 をクリックします。
  2. コード カバレッジの記録を停止するには、[Stop Instrumenting Coverage And Show Results] 停止 をクリックします。

コード カバレッジを分析する

[カバレッジ] タブの表には、分析されたリソースと、各リソース内で使用されているコードの量が表示されます。行をクリックすると、そのリソースが [ソース] パネルで開き、使用されるコードと未使用のコードの行ごとの内訳が表示されます。コードのうち、使用されていない行は、先頭に赤い行が表示されます。

コード カバレッジ レポート。
図 3. コード カバレッジ レポート
  • [URL] 列は、分析されたリソースの URL です。
  • [タイプ] 列には、リソースに CSS、JavaScript、またはその両方が含まれているかどうかが表示されます。
  • [Total Bytes] 列は、リソースの合計サイズ(バイト単位)です。
  • [Unused Bytes] 列は、使用されなかったバイト数です。
  • 名前のない最後の列は、[Total Bytes] 列と [Unused Bytes] 列を可視化したものです。バーの赤色の部分は未使用バイトです。緑色のセクションはバイトです。