未使用の JavaScript

Silktide は実際のブラウザーでページを読み込み、ページの読み込み中に各スクリプトのどれだけの部分が実際に実行されるかを測定します。未使用のコードが大量に含まれるスクリプトを、削減できる可能性のある容量とともに報告します。

重要な理由

未使用のは、訪問者に二重の負担をかけます。まずダウンロードする必要があり、さらにブラウザーが実行されないコードを解析してコンパイルする間も負荷がかかります。スマートフォンでは、2つ目の負担が大きくなります。ミッドレンジのスマートフォンでは、スクリプトの処理にダウンロードの数倍の時間がかかることがあり、その間、ページはタップやスクロールに応答できません。

未使用のコードは、未使用の CSS と同じように蓄積します。フレームワークやライブラリには使用しない機能が含まれており、古いコードが削除されることはほとんどありません。訪問者は、ページを表示するたびにその負荷を負うことになります。

修正方法

ページで不要になったスクリプトを削除します。使用を停止したサービスのタグも含まれます。
大きなバンドルを分割し、各ページが使用するコードだけを読み込むようにします。最新のビルドツールではコード分割に対応しており、これを自動的に行えます。
ファーストビューより下にある機能やオンデマンド機能（モーダル、プレーヤー、ウィジェットなど）のコードは、最初に読み込むのではなく、必要になったときだけ読み込みます。

// 訪問者が要求したときだけチャットウィジェットを読み込む
button.addEventListener('click', async () => {
  const { openChat } = await import('./chat.js');
  openChat();
});

Silktide によるチェック方法

実際のブラウザーでページを読み込み、ページの読み込み中に各スクリプトのどの部分が実行されるかを記録します。
各スクリプトについて、何バイトが一度も実行されなかったかを測定します。
意味のある無駄がある各スクリプトについて、現在のサイズ、未使用の割合、削減できるバイト数を示して報告します。

トラブルシューティング

コードは実行されるが、ページの読み込み中ではない

測定対象は初回の読み込みです。後でしか実行されないコード（フォームのバリデーション、メニューの処理、クリックの先にある機能など）は、最終的にページで必要になる場合でも未使用として扱われます。このようなコードは、最初に読み込むのではなく、オンデマンドで読み込むのに適しています。

未使用のコードがサードパーティ製スクリプトに含まれている

通常、他者のバンドルを削減することはできませんが、いつ読み込むかは制御できます。方法については、サードパーティコードとサードパーティ用ファサードを参照してください。