サードパーティスクリプトパフォーマンスバジェット
サードパーティスクリプトのパフォーマンス影響を追跡・管理。アナリティクス、広告、ソーシャルウィジェット、A/Bテスト、チャットツールのバジェットを設定し、遅延読み込みとファサードパターンの戦略。
Asset Budgets
詳細な説明
サードパーティスクリプトバジェット
サードパーティスクリプトは、パフォーマンスバジェットに対する最大の脅威です。調査によると、中央値のWebページでサードパーティコードがJavaScriptの55-70%を占めています。
一般的なサードパーティスクリプトサイズ
| カテゴリ | 一般的なサイズ（gzip済み） |
|---|---|
| Google Analytics | 20 KB |
| Google Tag Manager | 30-80 KB |
| Facebook Pixel | 60 KB |
| Intercom Chat | 200-400 KB |
| Hotjar | 40-80 KB |
サードパーティバジェットの設定
実用的なアプローチは、合計JSバジェットのパーセンテージを割り当てること：
| 厳格さ | サードパーティバジェット |
|---|---|
| 厳格 | JSバジェットの20% |
| 中程度 | JSバジェットの30% |
| 緩い | JSバジェットの40% |
軽減策
- 遅延読み込み — ユーザーインタラクション後にアナリティクスとチャットウィジェットを読み込み
- ファサードパターン — ユーザーがクリックするまで静的プレースホルダーを表示
- セルフホスティング — サードパーティスクリプトを自社CDNでホスト
- タグマネージャーガバナンス — 新しいタグ追加前にパフォーマンスレビューを要求
- requestIdleCallback — アイドル時間中に非クリティカルスクリプトを初期化
ユースケース
サードパーティバジェット追跡は、複数のチームが独立してスクリプトを追加するマーケティング重視のサイトに不可欠です。一般的なEコマースサイトでは、マーケティング、プロダクト、エンジニアリングチームによって15-20のサードパーティスクリプトが追加されることがあります。追跡なしでは、これらのスクリプトが合計で2-3 MBのJavaScriptに達します。