コンテンツに移動
Silktideヘルプ

重複したJavaScript

Silktideは、ページがダウンロードするコードに同じものが複数回含まれていないかをチェックします。重複したコードは、訪問者に何も追加の価値を提供しないまま、ページを大きくし、読み込みを遅くします。

最新のは通常、多数の小さなモジュールを組み合わせ、いくつかの大きなファイルにまとめて構成されます。複数のバンドルが個別にビルドされる場合(たとえば、独自のコードと埋め込みウィジェットなど)、それぞれに同じモジュールのコピーが含まれることがあり、訪問者は同一の機能を二重にダウンロードすることになります。

これが重要な理由

重複したモジュールはそれぞれ、ダウンロード時間、処理時間、モバイルデータを消費しますが、その見返りは何もありません。高速なオフィス接続では無駄が目立たないかもしれませんが、スマートフォンや低速なネットワークを利用する訪問者は、ページの表示や応答に時間がかかるという形で、その影響を直接受けます。

重複は気づかないうちに増える傾向もあります。サイトに新しいスクリプトやウィジェットを追加するたびに、共通ライブラリのコピーが独自に持ち込まれる可能性があるため、誰かが確認しない限り、時間の経過とともに無駄が積み重なります。

修正方法

これは、サイトのコンテンツではなく、サイトのビルドプロセスで開発者が対応する修正です。

  1. サイトのJavaScriptがどのようにバンドルされているかを分析します。多くのバンドルツールには、各出力ファイルの内容を視覚化する分析モードがあり、重複したモジュールを簡単に見つけられます。
  2. 共有依存関係を重複排除するようにビルドを設定します。複数の場所で使用されるライブラリを各バンドルにコピーするのではなく、一度だけ含めて共有できるようにします。
  3. バージョンをそろえます。同じライブラリでもバージョンが異なると統合できないため、すべてを1つのバージョンにアップグレードすることが、本当の解決策になる場合がよくあります。
  4. 重複が再ビルドできないサードパーティ製スクリプトによるものの場合は、提供元に軽量なビルドを依頼するか、別のものに置き換えます。

Silktideによるテスト方法

  1. 速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
  2. ページがダウンロードするJavaScriptファイルを調べ、複数のファイルに登場するモジュールを特定します。コピーは内容ではなく機能によって照合されるため、ファイルのフォーマットやの方法が異なっていても見つけられます。
  3. 重複している各モジュール、そのモジュールが含まれるファイル、余分なコピーを削除することで節約できるダウンロードサイズを報告します。
  4. ページを、無駄になっているダウンロードサイズの合計で評価します。重複が約10 KBあるだけでも評価が下がり、50 KB以上ある場合は不十分と評価されます。

トラブルシューティング

2つのファイルに同一のコードが含まれていない

このチェックでは、正確なテキストではなく、モジュールの内容に基づいて照合します。同じモジュールは、圧縮後に2つのバンドル内で大きく異なって見える場合でも、重複した同一のコードとして認識されます。

重複がサードパーティ製スクリプト内にある

他者が作成したバンドルを再ビルドすることはできません。提供元に相談するか、依存関係を共有できる別の方法でそのスクリプトを読み込むか、スクリプトの価値がコストを上回る場合はそのまま使用します。

詳細情報

最終更新

このページは役に立ちましたか?