Webサイトの表示速度は、今やSEO対策において最も重要な要素の一つです。Googleが公式に発表している通り、ページの読み込み速度は検索ランキングに直接影響を与えます。そして、多くのサイト運営者を悩ませているのが、Google Tag Manager（GTM）やGoogle Analyticsといった必須ツールによる表示速度の低下です。
実際、Googleの調査によると、ページの表示速度が1秒から3秒に遅くなるだけで、そのページを離脱してしまうユーザーが32%も増加することが分かっています。これは決して無視できない数字ですよね。
本記事では、Google Tag Manager（GTM）の遅延読み込み（Lazy Loading）を実装して、サイトの表示速度を劇的に改善する方法を詳しく解説します。この対策により、PageSpeed Insightsのスコアを大幅に向上させることができます。
目次
Google Tag Manager（GTM）とは？基本概念の理解
Google Tag Manager（GTM）は、Googleが提供する無料のタグ管理ツールです。従来、Google AnalyticsやGoogle Adsenseなどのタグをサイトに埋め込む際は、各ページのHTMLコードに直接記述する必要がありました。
しかし、GTMを使用することで、これらのタグを一元管理できるようになります。具体的には、以下のようなメリットがあります。
- 複数のタグを一箇所で管理：異なるツールのタグを統一的に管理できます
- タグの設置・更新作業を短縮：管理画面から簡単にタグの変更が可能
- チームでの共同作業が促進：権限管理や履歴管理機能により、複数人での作業が効率化
- 非同期タグとしての処理：ページの読み込みを阻害しない仕組み
GTMは80種類以上のタグに対応しており、Google AnalyticsやGoogle Adsenseはもちろん、他社のマーケティングツールのタグも統合管理できます。
表示速度とSEOの関係：なぜ速度が重要なのか
「表示速度なんて、そんなに重要？」と思われるかもしれませんが、実はGoogleは2018年から正式に表示速度を検索ランキングの要素として組み込むと発表しています。これは「Speed Update」と呼ばれ、特にモバイル検索において大きな影響を与えています。
さらに、2021年からは「Core Web Vitals」という新しい指標が導入され、以下の3つの要素がランキング要因として重要視されるようになりました：
- LCP（Largest Contentful Paint）：最大コンテンツの描画時間
- FID（First Input Delay）：初回入力までの遅延時間
- CLS（Cumulative Layout Shift）：累積レイアウト変更
これらの指標において、Google Tag ManagerやGoogle Analyticsのスクリプトが大きな影響を与えることが分かっています。
特に、これらのスクリプトは「レンダリングを妨げるリソース」として認識され、PageSpeed Insightsでも警告が表示されるケースが多いです。
PageSpeed Insightsで見るGoogle Tag Manager（GTM）の影響
実際にPageSpeed Insightsでサイトを分析してみると、多くの場合「使用していない JavaScript の削除」という項目にGoogle Tag Managerが表示されます。
これは、ページの初期表示に必要ないJavaScriptが読み込まれていることを示しています。
具体的には、以下のような影響が確認されています：
- Total Blocking Time（TBT）の増加：130ms以上の遅延が発生
- First Contentful Paint（FCP）の遅延：初回コンテンツ表示までの時間が延長
- モバイルスコアの大幅な低下：特にスマートフォンでの表示速度が悪化
これらの問題を解決するためには、Google Tag Managerの遅延読み込み実装が効果的です。
遅延読み込みとは？基本的な仕組み
遅延読み込み（Lazy Loading）とは、ページの初期表示時には必要最小限のリソースのみを読み込み、必要になったタイミングで追加のリソースを読み込む手法です。
従来のスクリプト読み込み方式には、以下の3つがあります：
1. 同期読み込み（Synchronous Loading）
スクリプトの読み込みが完了するまで、HTMLの解析が停止します。最も表示速度に悪影響を与える方式です。
2. 非同期読み込み（Asynchronous Loading – async）
スクリプトの読み込みとHTMLの解析を並行して実行します。読み込み完了後、即座に実行されます。
3. 遅延実行（Deferred Loading – defer）
HTMLの解析が完了してから、スクリプトを実行します。ただし、ページの表示処理は完了していない状態で実行されます。
一方、遅延読み込みでは、ページの表示が完全に完了した後、または特定のユーザーアクション（スクロール、クリックなど）が発生した後にスクリプトを読み込みます。これにより、初期表示速度を最大限に向上させることができます。
Google Tag Manager遅延読み込みの実装方法
ここからは、具体的な実装方法を詳しく解説します。実装は大きく分けて3つのステップで行います。
ステップ1: Google Analyticsのコード変更
まず、現在サイトに設置されているGoogle Analyticsのコードを確認してください。通常は、以下のようなコードが<head>タグ内に設置されているはずです：
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX');
</script>このコードのうち、1行目の<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>を削除します。これがページの表示速度を遅くしている原因です。
削除後のコードは以下のようになります：
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX');
</script>ステップ2: Google Adsenseのコード変更
Google Adsenseを使用している場合は、広告コードの変更も必要です。現在の広告コードは以下のような形式になっているはずです：
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>同様に、1行目の<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX" crossorigin="anonymous"></script>を削除します。
削除後のコードは以下のようになります：
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>ステップ3: 遅延読み込みスクリプトの実装
削除したスクリプトを遅延読み込みするためのJavaScriptコードを実装します。以下のコードを</body>タグの直前に追加してください：
<script>
// 遅延読み込み用変数
var scriptLoaded = false;
// スクロールイベントによる遅延読み込み
window.addEventListener('scroll', function() {
if (!scriptLoaded) {
// Google Tag Manager（Analytics）の読み込み
var gtmScript = document.createElement('script');
gtmScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
gtmScript.async = true;
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(gtmScript);
// Google Adsenseの読み込み
var adsScript = document.createElement('script');
adsScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX';
adsScript.async = true;
adsScript.crossOrigin = "anonymous";
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(adsScript, firstScript);
// 読み込み完了フラグを設定
scriptLoaded = true;
}
});
// 代替トリガー（3秒後に自動読み込み）
setTimeout(function() {
if (!scriptLoaded) {
window.dispatchEvent(new Event('scroll'));
}
}, 3000);
</script>このスクリプトでは、以下の動作を実現しています：
- スクロールトリガー：ユーザーがスクロールした瞬間にスクリプトを読み込み
- タイムアウトトリガー：3秒経過後に自動的に読み込み（スクロールしないユーザー対策）
- 重複読み込み防止：
scriptLoadedフラグにより、一度だけ実行
高度な遅延読み込み設定
基本的な実装に加えて、より高度な設定も可能です。以下のような条件分岐を追加することで、より細かな制御ができます。
デバイス別の条件分岐
<script>
// デバイス判定による条件分岐
function initializeLazyLoading() {
var screenWidth = window.innerWidth;
var isDesktop = screenWidth > 1024;
var isTablet = screenWidth > 768 && screenWidth <= 1024;
var isMobile = screenWidth <= 768;
if (isDesktop) {
// デスクトップ：ページ読み込み完了後すぐに実行
window.addEventListener('load', loadScripts);
} else if (isTablet) {
// タブレット：1秒後に実行
setTimeout(loadScripts, 1000);
} else if (isMobile) {
// モバイル：スクロール時に実行
window.addEventListener('scroll', loadScripts, { once: true });
}
}
function loadScripts() {
// Google Tag Manager読み込み処理
// ...
}
initializeLazyLoading();
</script>インタラクション別のトリガー設定
<script>
// 複数のインタラクションに対応
var interactionEvents = ['scroll', 'click', 'mousemove', 'touchstart'];
var scriptLoaded = false;
function loadScripts() {
if (scriptLoaded) return;
// スクリプト読み込み処理
// ...
scriptLoaded = true;
// イベントリスナーの削除
interactionEvents.forEach(function(eventType) {
window.removeEventListener(eventType, loadScripts);
});
}
// 複数のイベントにリスナーを設定
interactionEvents.forEach(function(eventType) {
window.addEventListener(eventType, loadScripts, { once: true });
});
// フォールバック（5秒後に自動実行）
setTimeout(function() {
if (!scriptLoaded) {
loadScripts();
}
}, 5000);
</script>CLS（Cumulative Layout Shift）対策
遅延読み込みを実装する際に注意すべきなのが、CLS（Cumulative Layout Shift）の問題です。これは、コンテンツが後から読み込まれることで、既に表示されている要素の位置が変わってしまう現象です。
特にGoogle Adsenseの広告では、以下の対策が重要です：
広告スペースの事前確保
<style>
.ad-placeholder {
width: 100%;
height: 280px; /* 広告の高さを事前に設定 */
background-color: #f8f9fa;
border: 1px solid #e9ecef;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #6c757d;
margin: 20px 0;
}
.ad-placeholder::before {
content: "広告";
}
</style>
<div class="ad-placeholder">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>レスポンシブ対応の広告プレースホルダー
<style>
.responsive-ad {
width: 100%;
position: relative;
}
.responsive-ad::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9のアスペクト比 */
}
.responsive-ad .adsbygoogle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.responsive-ad::before {
padding-top: 75%; /* モバイルでは4:3のアスペクト比 */
}
}
</style>実装後の動作確認方法
遅延読み込みの実装が完了したら、必ず動作確認を行ってください。以下の方法で確認できます：
1. Google Tag Managerの動作確認
- サイトをブラウザで開く
- スクロールを行う
- F12キーを押して開発者ツールを開く
- Networkタブで「googletagmanager」を検索
- リクエストが確認できればOK
2. Google Analyticsの動作確認
- Google Analytics のリアルタイムレポートを開く
- サイトにアクセスしてスクロール
- リアルタイムレポートにアクセスが記録されることを確認
3. Google Adsenseの動作確認
- サイトにアクセスしてスクロール
- 広告が正常に表示されることを確認
- 広告のクリックやインプレッションが正常に記録されることを確認
パフォーマンス測定と結果の分析
実装後は、PageSpeed Insightsで改善効果を測定しましょう。多くの場合、以下のような改善が期待できます：
改善前と改善後の比較例
| 項目 | 改善前 | 改善後 | 改善幅 |
|---|---|---|---|
| モバイルスコア | 60点 | 99点 | +39点 |
| デスクトップスコア | 93点 | 100点 | +7点 |
| TBT（Total Blocking Time） | 290ms | 50ms | -240ms |
| FCP（First Contentful Paint） | 2.1s | 1.2s | -0.9s |
Core Web Vitalsの改善
遅延読み込みの実装により、Core Web Vitalsの各指標も大幅に改善されます：
- LCP（Largest Contentful Paint）：最大コンテンツの描画が高速化
- FID（First Input Delay）：初回入力までの遅延時間が短縮
- CLS（Cumulative Layout Shift）：適切な実装により、レイアウトシフトを最小化
トラブルシューティング
実装中に発生する可能性がある問題と、その解決方法を紹介します：
問題1: Google Analyticsでデータが記録されない
原因：スクリプトの読み込み条件が厳しすぎる
解決方法：フォールバック機能を追加
// 10秒後に強制的に読み込み
setTimeout(function() {
if (!scriptLoaded) {
loadScripts();
}
}, 10000);問題2: 広告が表示されない
原因：adsbygoogle.jsの読み込みタイミングが遅い
解決方法：広告の初期化を遅延実行
// 広告スクリプト読み込み後に初期化
adsScript.onload = function() {
(adsbygoogle = window.adsbygoogle || []).push({});
};問題3: モバイルでのパフォーマンス改善が不十分
原因：他のリソースによる影響
解決方法：画像の遅延読み込みも併用
// 画像の遅延読み込みも同時に実装
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="説明">SEO効果の最大化
遅延読み込みの実装により、SEO効果を最大化するための追加施策を紹介します：
1. 構造化データの最適化
ページの表示速度向上により、検索エンジンのクロール効率が向上します。この機会に構造化データも見直しましょう：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"author": {
"@type": "Person",
"name": "著者名"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>2. Critical CSS の実装
ファーストビューで必要なCSSを優先的に読み込みます：
<style>
/* Critical CSS - ファーストビューで必要なスタイル */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
h1 { font-size: 2em; color: #333; }
/* ... */
</style>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">3. リソースヒントの活用
重要なリソースの事前読み込みを指定します：
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">WordPress環境での実装
WordPressサイトでの実装方法も解説します：
functions.phpでの実装
function add_lazy_loading_script() {
if (is_admin()) return;
$script = "
<script>
var gtmLoaded = false;
function loadGTM() {
if (gtmLoaded) return;
var gtmScript = document.createElement('script');
gtmScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
gtmScript.async = true;
document.head.appendChild(gtmScript);
gtmLoaded = true;
}
window.addEventListener('scroll', loadGTM, { once: true });
setTimeout(loadGTM, 3000);
</script>
";
echo $script;
}
add_action('wp_footer', 'add_lazy_loading_script');プラグインとの競合回避
既存のAnalyticsプラグインがある場合は、以下の方法で無効化できます：
// 既存のAnalyticsプラグインを無効化
function disable_analytics_plugins() {
if (function_exists('wp_dequeue_script')) {
wp_dequeue_script('google-analytics');
wp_dequeue_script('gtag');
}
}
add_action('wp_enqueue_scripts', 'disable_analytics_plugins', 100);モニタリングとメンテナンス
実装後も継続的なモニタリングが重要です：
1. 定期的なパフォーマンス測定
- 週1回のPageSpeed Insightsチェック
- 月1回のCore Web Vitalsレポート確認
- 四半期ごとのSEOランキング分析
2. Google Analyticsでのデータ品質確認
- セッション数の変動チェック
- 直帰率の変化確認
- ページビュー数の精度検証
3. 広告収益への影響分析
- RPM（Revenue Per Mille）の変動
- クリック率の変化
- 広告表示回数の変動
さらなる高速化施策
遅延読み込みの実装に加えて、以下の施策も効果的です：
1. 画像最適化
<img src="image.webp"
srcset="image-400.webp 400w, image-800.webp 800w"
sizes="(max-width: 400px) 400px, 800px"
loading="lazy"
alt="説明">2. CDN（Content Delivery Network）の活用
静的リソースをCDNで配信することで、さらなる高速化が可能です。LandingHubのようなサービスでは、CDNが標準で提供されており、グローバルな配信網により世界中からの高速アクセスが可能になります。
3. サーバー側での最適化
- Gzip圧縮の有効化
- ブラウザキャッシュの設定
- HTTP/2の利用
- Keep-Aliveの設定
まとめ：継続的な改善のために
Google Tag Manager（GTM）の遅延読み込み実装により、サイトの表示速度は劇的に改善されます。実際の事例では、モバイルでのPageSpeed Insightsスコアが60点から99点に向上したケースもあります。
