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