使用していない JavaScript を削除する

使用されていない JavaScript は、ページの読み込み速度を低下させることがあります。

  • JavaScript がレンダリング ブロックを行っている場合、ブラウザでページのレンダリングに必要な他のすべての作業を進めるには、スクリプトのダウンロード、解析、コンパイル、評価を行う必要があります。
  • JavaScript が非同期である（レンダリング ブロックではない）場合でも、ダウンロード中にコードは帯域幅を他のリソースと競合します。これはパフォーマンスに大きな影響を与えます。また、無制限のデータプランを利用していないモバイル ユーザーにとっても、未使用のコードをネットワーク上で送信することは無駄です。

未使用の JavaScript の監査が失敗する仕組み

Lighthouse では、未使用コードが 20 KiB を超えるすべての JavaScript ファイルにフラグが設定されます。

監査のスクリーンショット。
[URL] 列の値をクリックすると、新しいタブでスクリプトのソースコードが開きます。

使用していない JavaScript を削除する方法

使用されていない JavaScript を検出する

Chrome DevTools の [Coverage] タブでは、使用されていないコードを行ごとに確認できます。

Puppeteer の Coverage クラスは、使用されていないコードを検出して使用するコードを抽出するプロセスを自動化するのに役立ちます。

未使用のコードの削除をサポートするビルドツール

次の Tooling.Report テストで、バンドラが未使用のコードを簡単に回避または削除する機能をサポートしているかどうかを確認してください。

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

Angular

Angular CLI を使用している場合は、本番環境ビルドにソースマップを含めて、バンドルを検査します。

Drupal

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

Joomla

ページ内で使用していない JavaScript を読み込む Joomla 拡張機能の数を減らすか、切り替えることをおすすめします。

Magento

Magento に組み込まれている JavaScript バンドルを無効にします。

対応

サーバーサイド レンダリングを行っていない場合は、React.lazy() で JavaScript バンドルを分割します。それ以外の場合は、loadable-components などのサードパーティ ライブラリを使用してコード分割を行います。

ビュー

サーバー側レンダリングを行わず、Vue ルーターを使用している場合は、遅延読み込みルートでバンドルを分割します。

WordPress

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

関連情報