Lighthouseの「使用していないJavaScriptの削減」を修正します。

Lighthouseの 'reduce unused JavaScript' 警告とは？

最終査読: 2026年3月 Arjen Karel

Lighthouseは、使用されていないコードが20 KiBを超えるすべてのJavaScriptファイルを警告します。この警告が表示された場合、ページは現在の読み込みに必要のないJavaScriptをダウンロードし、実行しています。

この警告は、Lighthouseのパフォーマンススコアに直接影響します。しかしそれ以上に重要なのは、使用されていないJavaScriptが実際のユーザーに悪影響を与える点です。2025 Web Almanacによると、モバイルページの中央値は646 KBのJavaScriptを配信し、そのうち251 KBは読み込まれたページで使用されていません。90パーセンタイルでは、この無駄なJavaScriptの量は931 KBに跳ね上がります。

また、2025 Web AlmanacのPerformanceの章によると、モバイルのTotal Blocking Timeは前年比で58%増加し、中央値は1,916 msになりました。JavaScriptのpayloadの増加速度は、デバイスの性能向上速度を上回っています。CoreDashが監視しているサイト全体で見ると、使用されていないJavaScriptを100 KB未満に抑えているオリジンの93%がINPで「良好（good）」の評価を得ています。一方、400 KBを超えているオリジンでは64%にとどまります。

使用されていないJavaScriptの原因は？

使用されていないJavaScriptには様々な原因があります。最も一般的なものは以下の通りです。

• CMSのプラグインが多すぎる。
• 現在のウェブサイトではすでに使用されていないデッドコード。
• 不要なチェックや分岐を含む、質の低いスクリプト。
• タグマネージャーへの無制限なアクセス（マーケティングチームがタグを追加したまま削除を忘れるなど）。
• 不要なインポート。1つの関数しか使用しないのに、ライブラリ全体を読み込んでいる。
• 特定のルートでのみ必要なコードが、すべてのページで実行されている。
• 使用する直前に読み込めばよいスクリプトを、即座に読み込んでいる。

使用されていないJavaScriptはCore Web Vitalsにどう影響するか？

使用されていないJavaScriptは、パフォーマンスに2つの悪影響を与えます。

• ネットワークの競合。 すべてのJavaScriptファイルはダウンロードする必要があります。これらのリクエストは、LCP画像やフォント、CSSと帯域幅を奪い合います。モバイル回線では、この遅延によってLargest Contentful Paintが2.5秒の基準を大きく超えてしまう可能性があります。
• main threadのブロック。 ブラウザはそのすべてのJavaScriptをパース、コンパイル、実行しなければなりません。その間、ユーザーの入力に反応したり、ページのレンダリングを続行したりすることはできません。これはLCPとINPの両方に直接影響します。

LighthouseのスコアはCore Web Vitalsのスコアではない点に注意してください。Core Web Vitalsは、実際のユーザーからのfield data（CrUX）で測定されます。Lighthouseは問題を見つけるための診断ツールですが、実際のパフォーマンスとは、訪問者が実際に体験するものです。Real User Monitoringを使用すると、field dataのパフォーマンスを確認できます。

使用されていないJavaScriptの特定方法

ページ上の使用されていないJavaScriptを特定するには、3つの方法があります。

1. Lighthouseの監査結果を確認する

Lighthouseは、20 KiBを超える使用されていないコードを含むすべてのJavaScriptファイルをリストアップします。ここには、合計バイト数、使用されていないバイト数、および削減可能なデータ量が表示されます。ここから改善を始めましょう。Lighthouse 13（2025年10月）からインサイトベースのフォーマットに移行しましたが、使用されていないJavaScriptのチェックは引き続き存在します。

2. ChromeのCoverageツールを使用する

Coverageツールを使用すると、ページ上のすべてのJavaScriptとCSSファイルについて、使用されているコードと使用されていないコードを1行単位で確認できます。

Ctrl+Shift+I（MacではCmd+Option+I）でChrome DevToolsを開きます。次に、Ctrl+Shift+Pを使用してコマンドメニューを開き、coverageと入力します。Show Coverageを選択し、再読み込みボタンをクリックして計測を開始します。ページの読み込み後、すべてのファイルとその使用されていないバイト数の割合が表示されます。

より詳細な結果を得るには、パネル上部のドロップダウンから「Per block」カバレッジモードに切り替えます。ブロックレベルのカバレッジでは、関数が呼び出されたかどうかだけでなく、関数内の使用されていない分岐も検出できます。

任意の行をクリックすると、Sourcesパネルでファイルが開きます。青い行は使用されたコード、赤い行は使用されていないコードです。これにより、ページの読み込み中にどの関数や分岐が一度も実行されなかったかを正確に把握できます。

3. バンドルを分析する

webpack、Rollup、Viteなどのバンドラーを使用している場合は、バンドルアナライザーを使用してJavaScriptファイルの中身を可視化します。webpack-bundle-analyzerやsource-map-explorerなどのツールは、バンドル内のすべてのモジュールをツリーマップで表示します。これにより、小さな機能のために巨大なライブラリが読み込まれていることが一目でわかります。

使用されていないことが、不要であることを意味するとは限らない

あるページで「使用されていない」からといって、「不要」であるとは限らない点に注意してください。チェックアウトフォームを動かすスクリプトは、ホームページ上では100%使用されていないと表示されます。だからといって削除すべきではありません。ホームページで読み込むべきではない、ということです。

これを解決するのがコード分割です。各ルートで、実際に必要なJavaScriptのみを読み込むようにします。大量の「使用されていない」JavaScriptがあり、サイトがシングルページアプリケーションである場合、解決策はコードの削除ではなく、ルートレベルでの適切なコード分割であるケースがほとんどです。

'reduce unused JavaScript' を修正する方法

'reduce unused JavaScript' の警告を修正するには、まず無駄がどこから来ているかを特定する必要があります。Lighthouseは、使用されていないバイト数が多いスクリプトを教えてくれます。これを削減するための7つの方法を紹介します。

1. 不要なプラグインを削除する。 WordPressのようなCMSを使用している場合、最も簡単な解決策は不要なプラグインを削除するか、単純なプラグインを数行のコードに置き換えることです。分析プラグイン、ソーシャルシェアボタン、チャットウィジェットはよくある原因です。
2. デッドコードを削除する。 デッドコードとは、現在のウェブサイトでもう使用されていないコードのことです。少なくとも年に2回はデッドコードの監査をスケジュールしてください。Knipのようなツールを使用すると、JavaScriptプロジェクト内の使用されていないエクスポートや依存関係の検出を自動化できます。
3. バンドルをツリーシェイキングする。 ツリーシェイキングは、ビルド時に使用されていないエクスポートを削除します。これを機能させるには、CommonJS（require）ではなく、ESモジュール構文（import/export）を使用する必要があります。package.jsonに"sideEffects": falseを追加すると、バンドラーが使用されていないコードを積極的に削除できるようになります。必要なものだけをインポートしてください。

   // Bad: ライブラリ全体をインポートする (70+ KB)
   import _ from 'lodash';
   const result = _.debounce(fn, 300);
   
   // Good: debounceのみをインポートする (ツリーシェイキング込みで約1 KB)
   import { debounce } from 'lodash-es';
   const result = debounce(fn, 300);

4. ルートごとにコードを分割する。 各ページで実際に必要なJavaScriptのみを読み込みます。動的import()を使用して、ルートまたは機能ごとにバンドルを分割します。

   // 事前にすべてをインポートするのではなく:
   import { validateForm } from './formValidation.js';
   
   // ユーザーがフォームを操作したときにのみ読み込む:
   document.querySelector('form').addEventListener('focus', async () => {
     const { validateForm } = await import('./formValidation.js');
     validateForm();
   }, { once: true });

   Reactでは、コンポーネントレベルの分割にReact.lazy()と<Suspense>を使用します。Next.jsのApp Routerでは、React Server ComponentsはデフォルトでJavaScriptをクライアントに送信しません。Vueでは、defineAsyncComponent()を使用するか、Vue Routerで動的インポートを使用します。

5. タグマネージャーを整理し、アクセスを制限する。 タグマネージャーは使用されていないコードのよくある原因であり、特にマーケティングチームが古いタグを削除せずに追加し続ける場合に顕著です。タグマネージャーのコンテナを定期的に監査してください。ページの読み込み時に発火するすべてのタグは、リソースを奪い合うJavaScriptを追加することになります。
6. 不要なインポートを削除する。 React、Vue、Next.jsのプロジェクトでは、インポート文を確認してください。2つのコンポーネントしか使用しないのに、コンポーネントライブラリ全体をインポートしていませんか？ネイティブのIntl APIやdayjsのような2 KBの代替手段で十分なのに、moment.js（330 KB）を取り込んでいませんか？
7. クリティカルでないスクリプトの読み込みを遅延させる。 フォームの送信など、スクリプトが必要であっても、ページの読み込み時には必要ない場合があります。ユーザーが実際に必要としたときに読み込むようにしてください。ページの読み込み時ではなくインタラクション時に読み込まれるスクリプトは、Lighthouseの監査では「使用されていないJavaScript」とみなされなくなります。2つの読み込み戦略の違いを理解するには、async vs deferも参照してください。

完全に修正できない場合

すべての使用されていないJavaScriptを削除できないこともあります。サードパーティのスクリプト、A/Bテストツール、アドネットワークは、こちらで制御できない巨大なバンドルを配信することがよくあります。その場合は、影響を最小限に抑えます。

• サードパーティのスクリプトをセルフホストする。 可能な限りメインドメインでセルフホストしてください。これにより、外部ドメインごとの新たなDNSルックアップとTCP接続のコストを回避できます。
• クリティカルなリソースを優先する。 ネットワークキューでJavaScriptのダウンロードの後ろでブロックされないように、LCP画像と重要なフォントをプリロードします。
• できるだけ多くのJavaScriptを遅延させる。 defer、async、または遅延読み込みを使用して、クリティカルでないスクリプトをクリティカルレンダリングパスから除外します。
• fetchpriority="low"を使用する。 不可欠ではないスクリプトリソースに使用し、後回しでよいことをブラウザに伝えます。
• field dataを監視する。 Lighthouseのスコアだけでなく、実際のユーザー体験が改善されたことを確認するためにReal User Monitoringを使用してください。