使用していない JavaScript を削除する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
使用されていない 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 プラグインの数を減らすか、プラグインに切り替えることをご検討ください。
関連情報
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2020-07-07 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2020-07-07 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2020-07-07 UTC。"],[],[]]