サードパーティの JavaScript がパフォーマンスに及ぼす影響と、それによるサイトの読み込み速度が低下するのを防ぐ方法について説明します。
サードパーティの JavaScript とは、通常、ウェブサイトに埋め込まれた次のようなスクリプトを指します。
- 作成者以外
- サードパーティのサーバーから配信
こうしたスクリプトは、次のようなさまざまな目的でサイトで使用されます。
- ソーシャル共有ボタン
- 動画プレーヤーの埋め込み
- チャット サービス
- 広告 iframe
- 分析と指標のスクリプト
- テスト用の A/B テスト スクリプト
- ヘルパー ライブラリ（日付形式、アニメーション、関数ライブラリなど）
サードパーティのスクリプトでも強力な機能を利用できますが、それだけではありません。また、プライバシー、セキュリティ、ページの動作にも影響し、特にパフォーマンスの面で問題が生じる可能性があります。
パフォーマンス
JavaScript を多用すると、パフォーマンスが低下する可能性があります。しかし、サードパーティの JavaScript は通常、制御できないことから、さらなる問題を引き起こす可能性があります。
ネットワーク
接続の設定には時間がかかり、複数のサーバーに送信するリクエストが多すぎると速度が低下します。この時間は安全な接続ではさらに長くなります。これには DNS ルックアップ、リダイレクト、ユーザーのリクエストを処理する最終サーバーへの数回のラウンド トリップが含まれる場合があります。
サードパーティのスクリプトは、多くの場合、次のような理由でネットワークのオーバーヘッドを増加させます。
- 追加のネットワーク リクエストを実行する
- 最適化されていない画像や動画を取り込む
- HTTP キャッシュが不十分です。ネットワーク リソースが頻繁に取得されます。
- リソースのサーバー圧縮が不十分である
- さまざまなサードパーティ埋め込みによって pull されるフレームワークとライブラリの複数のインスタンス
レンダリング
サードパーティの JavaScript を読み込む方法は非常に重要です。クリティカル レンダリング パスで同期的に行われると、ドキュメントの残りの解析が遅れます。
第三者がサーバーに問題が発生し、リソースの配信に失敗した場合、リクエストがタイムアウトするまでレンダリングはブロックされます。タイムアウトは 10 ～ 80 秒です。この問題は、WebPageTest の単一障害点テストを使用してテストおよびシミュレートできます。
対処方法
サードパーティの JavaScript を使用することが避けられない場合が多くありますが、悪影響を最小限に抑えるためにできることがいくつかあります。
- サードパーティのリソースを選択する際は、必要な機能を提供しつつ、送信するコードの量が最も少ないリソースを選択します。
- 第三者のコンテンツにはパフォーマンス バジェットを使用して費用を抑える。
- 2 つの異なるベンダーの同じ機能を使用しないでください。2 つのタグ マネージャーや 2 つの分析プラットフォームはおそらく必要ありません。
- 冗長なサードパーティ スクリプトを定期的に監査し、クリーンアップします。
サードパーティのコンテンツを監査し、効率的に読み込み、パフォーマンスとユーザー エクスペリエンスを向上させる方法については、サードパーティ リソースを最適化するにある他の投稿をご覧ください。