サードパーティスクリプトとWeb Vitals — 影響と対策
サードパーティスクリプト（アナリティクス、広告、チャットウィジェット）がCore Web Vitalsにどのように影響するかを理解します。サードパーティJavaScriptの監査、遅延、サンドボックス化の技術を学びます。
Optimization
詳細な説明
サードパーティスクリプトのWeb Vitalsへの影響
サードパーティスクリプト — アナリティクス、広告、チャットウィジェット、ソーシャルメディア埋め込み、A/Bテストツール — はCore Web Vitalsに対する最大の脅威の1つです。
各指標への影響
LCPへの影響：
<head>内のサードパーティスクリプトがレンダリングをブロック- 帯域幅の競合がLCPリソースのダウンロードを遅延
INPへの影響：
- サードパーティJavaScriptの長いタスクがインタラクションをブロック
- サードパーティが追加するイベントリスナーが処理時間を増加
CLSへの影響：
- 広告iframeがゼロの高さから展開し、コンテンツを押し下げる
- Cookie同意バナーがページに挿入される
対策
1. 非クリティカルスクリプトの遅延
<!-- ページがインタラクティブになった後にロード -->
<script>
window.addEventListener('load', () => {
const s = document.createElement('script');
s.src = 'https://analytics.example.com/script.js';
document.body.appendChild(s);
});
</script>
2. ParttytownでWeb Workerを使用
3. クリティカルなサードパーティコードをセルフホスト
4. 広告用スペースの確保
.ad-slot {
min-height: 250px;
contain: layout;
}
ユースケース
サードパーティスクリプトの管理は、ほぼすべての本番ウェブサイトに関連します。ディスプレイ広告を配信するパブリッシャーサイトが最も影響を受けます — 一部のサイトは20以上のサードパーティスクリプトを読み込み、合計で数秒のメインスレッドブロッキング時間を追加します。