使用されていない JavaScript は、ページの読み込み速度を低下させることがあります。
- JavaScript がレンダリング ブロックを行っている場合、ブラウザでページのレンダリングに必要な他のすべての作業を進めるには、スクリプトのダウンロード、解析、コンパイル、評価を行う必要があります。
- JavaScript が非同期である（レンダリング ブロックではない）場合でも、ダウンロード中にコードは帯域幅を他のリソースと競合します。これはパフォーマンスに大きな影響を与えます。また、無制限のデータプランを利用していないモバイル ユーザーにとっても、未使用のコードをネットワーク上で送信することは無駄です。
未使用の JavaScript の監査が失敗する仕組み
Lighthouse では、未使用コードが 20 KiB を超えるすべての JavaScript ファイルにフラグが設定されます。
使用していない 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 プラグインの数を減らすか、プラグインに切り替えることをご検討ください。