遅いサードパーティの JavaScript を特定する

Lighthouse と Chrome DevTools でパフォーマンスに関する探偵のスキルを強化しましょう。

Milica Mihajlija

サイトで読み込むサードパーティのスクリプトをデベロッパーが制御できないことがよくあります。第三者のコンテンツを最適化する前に、サイトの動作が遅い原因を突き止める必要があります。🕵️

この投稿では、Lighthouse と Chrome DevTools を使用して、速度の遅いサードパーティ リソースを特定する方法をご紹介します。この投稿では、組み合わせて使用することをおすすめします。

5 分だけでも

Lighthouse のパフォーマンス監査では、ページの読み込み速度を上げる方法を確認できます。遅いサードパーティのスクリプトは、[JavaScript の実行時間を短縮する] の監査や [大量のネットワーク ペイロードを回避する] の監査の [診断] に表示される可能性があります。

監査を実行するには:

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  2. [Lighthouse] タブをクリックします。
  3. [モバイル] をクリックします。
  4. [パフォーマンス] チェックボックスをオンにします。（[監査] セクションの他のチェックボックスをオフにします）。
  5. [Simulated Fast 3G, 4x CPU Slowdown] をクリックします。
  6. [ストレージを消去] チェックボックスをオンにします。
  7. [Run audits] をクリックします。

Chrome DevTools の [監査] パネルのスクリーンショット。

サードパーティでの使用

Lighthouse のサードパーティの使用状況の監査では、ページで使用されているサードパーティ プロバイダの一覧が表示されます。この概要は、全体像をより深く理解し、冗長なサードパーティ コードを特定するのに役立ちます。監査は Lighthouse 拡張機能で利用でき、まもなく Chrome 77 で DevTools に追加される予定です。

51 のサードパーティが見つかったことを示すスクリーンショットと、架空のスタートアップのリスト。
スタートアップ ジェネレータで生成されたサードパーティ プロバイダ名。生きているかどうかにかかわらず、実際のスタートアップとの類似性は偶然です。

JavaScript の実行時間を短縮する

Lighthouse の「JavaScript の実行時間を短縮」の監査では、解析、コンパイル、評価に時間がかかるスクリプトがハイライト表示されます。CPU 負荷の高いサードパーティ スクリプトを検出するには、[サードパーティのリソースを表示する] チェックボックスをオンにします。

[サードパーティのリソースを表示する] チェックボックスがオンになっていることを示すスクリーンショット。

膨大なネットワーク ペイロードを回避する

Lighthouse の「大量のネットワーク ペイロードを回避する」監査では、ページの読み込み速度を低下させる可能性のあるネットワーク リクエスト（サードパーティからのものを含む）を特定します。ネットワーク ペイロードが 4,000 KB を超えると、監査は不合格になります。

Chrome DevTools の [大量のネットワーク ペイロードを回避する] 監査のスクリーンショット。

Chrome DevTools でネットワーク リクエストをブロックする

Chrome DevTools のネットワーク リクエストのブロックを使用すると、特定のスクリプト、スタイルシート、その他のリソースが利用できない場合のページの動作を確認できます。パフォーマンスに影響していると思われるサードパーティのスクリプトを特定したら、それらのスクリプトへのリクエストをブロックすることで、読み込み時間の変化を測定します。

リクエストのブロックを有効にする手順は次のとおりです。 1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。 1. [Network] タブをクリックします。1. [Network] パネルでリクエストを右クリックします。1. [リクエスト URL をブロック] を選択します。

Chrome DevTools の [パフォーマンス] パネルのコンテキスト メニューのスクリーンショット。[リクエスト URL をブロック] オプションがハイライト表示されている。

DevTools ドロワーに [リクエストのブロック] タブが表示されます。ブロックするリクエストを管理できます。

サードパーティ スクリプトの影響を測定するには:

  1. ページの読み込みにかかる時間は、[ネットワーク] パネルを使って測定します。実際の状態をエミュレートするには、ネットワーク スロットリングと CPU スロットリングをオンにします。（高速接続やデスクトップ ハードウェアでは、高価なスクリプトによる影響がスマートフォンほど反映されないことがあります）。
  2. 問題と思われるサードパーティのスクリプトの処理を行っている URL またはドメインをブロックします。
  3. ページを再読み込みして、ブロックされたサードパーティ スクリプトがない場合に、読み込みに要する時間を再測定します。

処理速度の向上は見込まれますが、サードパーティのスクリプトをブロックしても、期待した効果が得られない場合があります。その場合は、遅延の原因となっている URL を特定するまで、ブロックする URL のリストを減らします。

なお、測定を 3 回以上行い、中央値を確認すると、より安定した結果が得られる可能性が高くなります。サードパーティのコンテンツでは、ページの読み込みごとに異なるリソースを取得することがあるため、この方法を使用すると、より現実的な見積もりを行うことができます。[Performance] パネルで、DevTools で複数の録画がサポートされ、操作が簡単になりました。