「第三者コードの影響を抑えてください」の解決方法は？表示速度改善のプロが教える実践的改善策

あなたのWebサイトをPageSpeed Insightsで測定した際、「第三者コードの影響を抑えてください」という警告が表示されて困っていませんか？この警告は、多くのWebサイト運営者が直面する共通の課題です。

こんにちは、LandingHub（https://www.landinghub.net/）の担当者として、日々数百のWebサイトの表示速度改善に携わっている私が、この問題を根本から解決する方法をお伝えします。

この記事では、第三者コードの影響を抑える具体的な方法から、実際に効果のあった改善事例まで、初心者の方でもわかりやすく実践できるよう詳しく解説していきます。

第三者コードとは何か？その影響を理解する

第三者コードの定義と種類

第三者コードとは、あなたのWebサイトとは異なるドメインから読み込まれるスクリプトやファイルのことです。具体的には以下のようなものが含まれます：

主な第三者コード例：

Google Analytics（アクセス解析）
Google AdSense（広告）
Facebook Pixel（広告トラッキング）
YouTube埋め込み動画
Google Maps
Twitter埋め込みツイート
Instagram埋め込み投稿
チャットボットシステム
CDN（Content Delivery Network）経由のライブラリ

これらは現代のWebサイトにとって欠かせない機能を提供してくれますが、同時に表示速度に大きな影響を与える可能性があります。

なぜ第三者コードが問題になるのか

PageSpeed Insightsで「第三者コードの影響を抑えてください」と表示される理由は、これらの外部リソースがメインスレッドを長時間ブロックしているからです。

具体的な問題点：

DNSルックアップの遅延 外部ドメインにアクセスするためのDNS解決に時間がかかる
サーバーレスポンスの遅延 外部サーバーの応答速度に依存してしまう
JavaScript実行の遅延 外部スクリプトの読み込みと実行でページのレンダリングが遅れる
ネットワーク帯域の消費 複数の外部リソースが同時にネットワークを使用

実際の事例を見てみましょう。とあるECサイトでは、Google Analyticsとソーシャルメディアの埋め込みによってメインスレッドが1,670ミリ秒間もブロックされていました。これは、ユーザーがページを開いてから約1.7秒間、サイトが応答しない状態が続いていたことを意味します。

PageSpeed Insightsで確認すべきポイント

詳細な診断方法

PageSpeed Insightsの結果を正しく読み解くことが、効果的な改善の第一歩です。

確認手順

「第三者コードの影響を抑えてください」の詳細を開く
- 矢印をクリックして詳細を表示
- 影響の大きい順に第三者コードが一覧表示される
各第三者コードの影響度を確認
- メインスレッドのブロック時間（ミリ秒）
- 転送サイズ
- リソースの種類
最も影響の大きい項目を特定
- 100ms以上のブロック時間があるものを優先的に対策

実際の診断例

あるWebサイトでの診断結果

Google Analytics: 450ms
Facebook SDK: 320ms
YouTube埋め込み: 280ms
Google AdSense: 180ms

この場合、Google Analyticsから順番に対策を実施することで、最も効率的に改善できます。

実践的な改善方法

1. 非同期読み込み（async/defer）の活用

最も基本的でありながら効果的な方法が、スクリプトの非同期読み込みです。

従来の読み込み方法：

Copy<script src="https://www.google-analytics.com/analytics.js"></script>

改善後の読み込み方法：

Copy<script async src="https://www.google-analytics.com/analytics.js"></script>

asyncとdeferの使い分け：

async: スクリプトの読み込みと実行を非同期で行う
defer: スクリプトの読み込みは非同期、実行はDOM構築後

多くの場合、asyncを使用することで即座に改善が見られます。実際、この方法だけで200-300msの改善を実現したケースも珍しくありません。

2. 事前接続（preconnect）とDNSプリフェッチ

外部リソースへの接続を事前に準備することで、実際のリクエスト時の遅延を削減できます。

HTMLのhead部分に追加

Copy<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.youtube.com">

この方法により、DNS解決やTCPハンドシェイクが事前に実行され、実際のリソース読み込み時間が大幅に短縮されます。

3. 遅延読み込み（Lazy Loading）の実装

ページの初期表示に必要でない第三者コードは、ユーザーが実際に必要とするタイミングで読み込むようにしましょう。

Google AdSense の遅延読み込み例：

Copy<script>
let adsenselazyed = false;
window.addEventListener('scroll', function() {
  if ((document.documentElement.scrollTop != 0 && adsenselazyed === false) || (document.body.scrollTop != 0 && adsenselazyed === false)) {
    const script = document.createElement('script');
    script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    script.async = true;
    document.head.appendChild(script);
    adsenselazyed = true;
  }
});
</script>

このように、ユーザーがスクロールした際に初めて広告スクリプトを読み込むことで、初期表示速度を大幅に改善できます。

4. 自己ホスティング（Self-Hosting）の検討

一部のライブラリやフォントについては、自分のサーバーにホスティングすることで、外部への依存を減らすことができます。

Google Fonts の自己ホスティング例

必要なフォントファイルをダウンロード
自サーバーにアップロード
CSSで相対パスを指定

ただし、この方法は定期的な更新が必要になるため、リソースと効果のバランスを考慮して実施しましょう。

WordPress サイトでの具体的な対策

Autoptimizeプラグインを使用した改善

WordPressサイトでは、Autoptimizeプラグインを使用することで、簡単に第三者コードの影響を軽減できます。

設定手順：

Autoptimizeプラグインをインストール・有効化
「追加」タブを開く
- 「サードパーティのドメインに事前接続」欄を確認
PageSpeed Insightsで確認した第三者コードのURLを入力
- 例：https://www.google-analytics.com, https://connect.facebook.net, https://www.googletagmanager.com
「変更を保存」をクリック

この設定により、指定したドメインへの事前接続が自動的に行われ、実際のリクエスト時の遅延が大幅に削減されます。

Google Tag Manager での最適化

Google Tag Managerを使用している場合は、トリガーの設定を変更することで効果的に改善できます。

推奨設定：

Google Analytics のトリガーを「ページビュー」から「ウィンドウの読み込み」に変更
重要でないタグは「DOM Ready」に設定
広告関連のタグは「ユーザーエンゲージメント」をトリガーに設定

これらの変更により、ページの初期表示に必要でない処理をページ読み込み完了後に実行することで、体感速度を大幅に改善できます。

業界別の対策事例

ECサイトの場合

ECサイトでは、コンバージョン率の向上が最重要課題です。実際にLandingHubを導入したECサイトの事例をご紹介します。

改善前の状況：

PageSpeed Insightsスコア: 28
Google Analytics: 380ms
Facebook Pixel: 290ms
レビューウィジェット: 240ms

実施した対策：

商品画像とレビューウィジェットの遅延読み込み
Facebook Pixelの条件付き読み込み
Google Analyticsの非同期化

改善結果：

PageSpeed Insightsスコア: 72（+44ポイント）
直帰率: 45% → 32%（-13ポイント）
CVR: 2.8% → 3.9%（+1.1ポイント）

メディアサイトの場合

メディアサイトでは、広告収益とユーザー体験のバランスが重要です。

効果的だった施策

段階的な広告読み込み
- ファーストビューの広告のみ即座に読み込み
- その他の広告は遅延読み込み
ソーシャルメディア埋め込みの最適化
- 実際のクリック時にウィジェットを読み込み
- プレースホルダー画像を使用
コメントシステムの遅延読み込み
- ページ下部にスクロールした際に読み込み開始

コーポレートサイトの場合

コーポレートサイトでは、ブランドイメージとSEOの観点から表示速度の改善が重要です。

主な改善ポイント：

Google Mapsの最適化
- 静的な地図画像を初期表示
- クリック時に動的な地図を読み込み
お問い合わせフォームの最適化
- チャットボットの遅延読み込み
- reCAPTCHAの条件付き読み込み

高度な最適化テクニック

Service Worker を使った高度な制御

より高度な最適化を行いたい場合は、Service Workerを使用してキャッシュ戦略を実装できます。

基本的な実装例：

Copyself.addEventListener('fetch', event => {
  if (event.request.url.includes('google-analytics.com')) {
    event.respondWith(
      caches.match(event.request).then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request).then(response => {
          const responseClone = response.clone();
          caches.open('analytics-cache').then(cache => {
            cache.put(event.request, responseClone);
          });
          return response;
        });
      })
    );
  }
});

Critical Resource Hints の活用

より効果的なリソースヒントを使用することで、さらなる改善が期待できます。

Copy<link rel="preload" href="https://www.google-analytics.com/analytics.js" as="script">
<link rel="prefetch" href="https://connect.facebook.net/en_US/sdk.js">

測定と継続的な改善

効果測定のポイント

改善施策の効果を正確に測定することが重要です。

測定すべき指標：

PageSpeed Insightsスコア
- モバイル・デスクトップ両方で測定
- 週次で定期的にチェック
Core Web Vitals
- LCP（Largest Contentful Paint）
- CLS（Cumulative Layout Shift）
- FID（First Input Delay）
ビジネス指標
- 直帰率
- 平均セッション時間
- コンバージョン率

継続的な改善のための仕組み

推奨する改善サイクル：

月次の定期診断
- 新しい第三者コードの追加チェック
- 既存コードの影響度変化の確認
四半期の詳細分析
- A/Bテストによる効果検証
- 競合サイトとの比較分析
年次の全体見直し
- 使用している第三者コードの必要性再評価
- 新しい最適化技術の導入検討

LandingHubによる包括的な解決

これまで様々な改善方法をご紹介してきましたが、これらの対策を個別に実施するのは時間と専門知識が必要です。

LandingHubは、タグを1つ設置するだけで、これらの最適化を自動的に実行するサービスです。

LandingHubの主な機能：

画像・動画の自動最適化
第三者コードの自動遅延読み込み
CDN経由での高速配信
リアルタイムでの効果測定

実際にLandingHubを導入した企業様では、平均してPageSpeed Insightsスコアが40-60ポイント改善し、CVRが20-30%向上している実績があります。

よくある質問（FAQ）

Q1: 第三者コードを完全に削除すべきですか？

A: 完全な削除は推奨しません。多くの第三者コードは重要な機能を提供しているため、最適化による影響軽減を優先してください。

Q2: 改善効果はどのくらいで現れますか？

A: 基本的な設定変更（async/defer）は即座に効果が現れます。より複雑な最適化は1-2週間で効果が安定します。

Q3: モバイルとデスクトップで対策は異なりますか？

A: 基本的な対策は同じですが、モバイルではより厳格な最適化が必要です。特にCPU性能とネットワーク速度の制約を考慮してください。

Q4: 改善によってトラッキングに影響はありますか？

A: 適切に実装すれば影響はありません。ただし、遅延読み込みを使用する場合は、トラッキングの開始タイミングに注意が必要です。

Q5: 複数の最適化を同時に実施しても大丈夫ですか？

A: 段階的な実施を推奨します。一つずつ実施して効果を確認することで、問題が発生した際の原因特定が容易になります。

まとめ

「第三者コードの影響を抑えてください」という警告は、現代のWebサイトにとって避けて通れない課題です。しかし、適切な対策を実施することで、ユーザー体験を損なうことなく大幅な改善が可能です。

今すぐ実践できる対策：

非同期読み込み（async/defer）の実装
事前接続（preconnect）の設定
重要でないコードの遅延読み込み
WordPress サイトでのAutoptimizeプラグイン活用

これらの対策を組み合わせることで、PageSpeed Insightsスコアの大幅な改善と、それに伴うビジネス成果の向上を実現できます。

もし、これらの対策を個別に実施することが困難な場合は、LandingHubのような包括的なソリューションの活用も検討してみてください。タグを1つ設置するだけで、専門的な最適化を自動的に実行し、継続的な改善を実現できます。

Webサイトの表示速度改善は、一度の対策で完了するものではありません。継続的な測定と改善を通じて、ユーザーに最高の体験を提供し続けることが重要です。

この記事が、あなたのWebサイトの表示速度改善と、それに伴うビジネス成果の向上に役立つことを願っています。