Flying Analyticsを使用してGA4コードを遅延せずにすばやくロードする WordPress 速度を最適化する

4

Google Analytics GA4トラッキングコードは、外部スクリプトを読み込む方法のため、サイトの速度に影響を与える可能性があります。特に 코어 웹 바이탈(コア ウェブ バイタル) スコアに敏感なサイトなら、この問題をただ渡すのが難しいと思います。 WordPressページの読み込み速度に影響を受けずにGA4コードを追加する方法の1つとして、Flying Analyticsプラグインを使用できます。

Flying Analyticsプラグインは WordPress これは、Google Analytics（Google Analytics）コードを独自のホスティング（Self-host）するか、Minimal Analytics.jsを使用して軽く読み込むことで、ページの読み込み速度を大幅に向上させる無料のツールです。このアプローチは、Googleの外部スクリプト依存性を減らし、Core Web Vitals（Core Web Vitals）指標であるLCP（Largest Contentful Paint）とCLS（Cumulative Layout Shift）を最適化し、SEOのパフォーマンスを低下させることなく正確な訪問者追跡を可能にします。

Flying Analyticsを使用してGA4コードを遅延せずにすばやくロードする WordPress 速度を最適化する

ちなみに速いスピードのために GeneratePressなどの軽いテーマを使用し、プラグインの数を最小限に抑え、キャッシュプラグインをインストールして設定できます。重いテーマや複数のプラグインを使用して速度が遅い場合は有料 WordPress 最適化プラグイン Perfmattersなどのプラグインを使用することを検討できます。

サーバーの応答時間（TTFB）が長くて悩んでいる場合は、自動ロードオプションをクリーンアップして速度を向上させることができます。

Flying Analyticsを使用してGA4コードを遅延せずにすばやくロードする WordPress 速度を最適化する

GA4コードとサイト速度の問題

WordPressでは、Googleサイトキット（Site Kit by Google）やRank Math SEOプラグインなどを使用して、簡単にGoogle Analytics GA4プロパティを作成できます。

また、 WordPressでGA4コードをさまざまな方法で追加できます。 GeneratePress テーマを使用している場合は、次の記事を参照してGoogle Analyticsコードを挿入できます。

ただし、GA4コードはサイトの速度に影響を与える可能性があります。

サイトの速度に影響を与える Google Tag Manager ファイル

私は次のコードを チャイルドテーマ 関数ファイルに追加してGA4コードを挿入しました。

add_action( 'wp_head', function () {
	if ( is_user_logged_in() ) {
		return;
	}
	?>
	<link rel="preconnect" href="https://www.google-analytics.com">
	<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
	<?php
}, 1 );
add_action( 'wp_footer', function () {
	if ( is_user_logged_in() ) {
		return;
	}
	$ga_id = 'G-EX12345678';
	?>
	<script>
		(function () {
			let ga4Loaded = false;
			const loadGA4 = () => {
				if ( ga4Loaded ) return;
				ga4Loaded = true;
				window.dataLayer = window.dataLayer || [];
				window.gtag = function () { dataLayer.push(arguments); };
				gtag('js', new Date());
				const script = document.createElement('script');
				script.src = 'https://www.googletagmanager.com/gtag/js?id=<?php echo esc_js( $ga_id ); ?>';
				script.async = true;
				script.onload = function () {
					gtag('config', '<?php echo esc_js( $ga_id ); ?>', { 'anonymize_ip': true });
				};
				document.head.appendChild(script);
			};
			if ( 'requestIdleCallback' in window ) {
				requestIdleCallback(loadGA4, { timeout: 2000 });
			} else {
				setTimeout(loadGA4, 2000);
			}
			['scroll', 'mousemove', 'touchstart', 'click'].forEach(function (evt) {
				window.addEventListener(evt, loadGA4, { once: true, passive: true });
			});
		})();
	</script>
	<?php
}, 100 );

Google Analyticsのコードを独自にホストして速度を最適化するFlying Analyticsプラグイン

上記のコードを使用すると、サイトの速度に与える影響は少ないようですが、訪問者を見逃すことなく追跡するかどうかはわかりません。サイトの速度に影響を最小限に抑えながらGoogle Analyticsコードを追加する方法を探して Flying Analytics: Self-Host Google Analytics v4 with Speed Optimizationというプラグインを発見した。

Google Analyticsのコードを独自にホストして速度を最適化するFlying Analyticsプラグイン

このプラグインは、Googleの次のいずれかを使用してGoogle Analyticsをローカルでホストして速度を最適化します。

  • Gtag.js(90KB)
  • Minimal Analytics.js (1.4KB)

これら2つのファイルの違いについてまとめてみると...

Gtag.js(約90KB)

  • Google Analytics GA4+ Google Ads（Google Ads） など、複数のGoogle製品を統合追跡する公式の汎用タグです。
  • コンバージョントラッキング、カスタムイベント、サイトスピードレポート、Google Tag Manager（Google Tag Manager）連携など、高度な機能の完全サポート。
  • スクリプト解析/実行コストは高くなりますが、Flying Analytics self-hostは外部依存関係を解決します。

Minimal Analytics.js (1.4KB)

  • 基本的な Analytics.js 機能のみ残した軽量バージョンで、コアメトリック（ページビュー、ユーザー数、セッション持続時間、流入経路、デバイス・地域統計）のみ追跡します。
  • スクロールの深さ、ファイルのダウンロード、高度なイベントなどの一部の機能は制限されていますが、90％のブログ/コンテンツサイトで十分です。
  • 64倍の小容量でネットワーク伝送+ JS解析コストを極端に減らし、LCP/CLS最適化に圧倒的な利点。

純粋速度とコアウェブバイタル（LCP、CLS）最適化が最優先であれば、GAでページビュー、流入経路、デバイス・地域統計など基本訪問者追跡のみが必要なとき Minimal Analytics.js 選択は非常に有利です。スクリプト容量を90KB→1.4KBに64倍減らし、ネットワーク転送量とJS解析コストを最小化するので、一般コンテンツブログや WordPress サイトで90％以上の分析ニーズを満たしています。

一方、 Google Ads連動、コンバージョントラッキング、カスタムイベント、サイトスピードレポート など高度なGA4機能が必要な場合 Gtag.jsを選択する必要があります。 90KBの容量は多少負担になりますが、Flying Analyticsのセルフホスティング（self-host）でGoogleサーバーの依存関係を排除し、パフォーマンスの低下を大幅に軽減できます。

私はスピードに焦点を当てて Tracking scriptから Minimal Analytics.js (1.4KB)を選択しました。😄このプラグインをインストールした場合 WordPress 管理者ページ»設定»Flying AnalyticsでGoogle Analyticsの追跡IDを入力し、追跡スクリプトを選択できます。

また、ログインした管理者（アドミン）ユーザーに対して追跡しないようにする Disable for logged in admins オプションを提供します。統計の正確性を高めるために、管理者の訪問を集計しないようにこのオプションをチェックできます。

Google AnalyticsのトラッキングIDを確認する方法 この記事の 「GA4トラッキングコードを確認する」 部分を参照してください。最新のGA4インターフェイスでは、UIが少し異なる場合があります。

スピードへの影響を最小限に抑えながら、Google AdSense 広告コードを挿入する

WordPress ブログにGoogle AdSendコードを追加すると AdSense スクリプトの読み込みによりサイトが遅くなることがあります。

AdSense 広告コードによるサイトの速度を最小限に抑える場合は、同じ開発者が作成して配布している無料のFlying Scriptsプラグインを使用できます。

このプラグインを使用して AdSense コードを遅らせると広告が少し遅れて読み込まれ、収益に影響を与える可能性があります。 AdSense 広告収入に影響があるかどうかを確認してください。

参照

4のコメント

コメントを残す

  1. 私はFlying AnalyticsプラグインとしてMinimal Analytics.js（1.4KB）メソッドとDisable for logged in adminsオプションを選択した後、Google AnalyticsのトラッキングIDを入力しました。アナリティクスでは、3日目の視聴回数のみが表示され、アクティブユーザーあたりの平均参加時間、総収益、RPMなどの残りの部分が1つも表示されないのですが、何が間違っていますか？

    返信

    • Minimal Analytics.jsスクリプトを選択すると、おそらく最小限の統計情報しか収集されないようです。完全な情報を表示するには、Gtag.js（90KB）オプションを選択する必要があるのではないかと思います。

      返信

      • Gtag.js（90KB）オプションを選択したため、アクティブユーザーあたりの平均参加時間は表示されますが、収益関連の部分は表示されないため、関数ファイルに追加する方法に置き換えました。

  2. Flying AnalyticsプラグインでGoogle Analytics GA4コードを最適化する方法は本当に面白いです！サイトの速度とユーザーエクスペリエンスを考慮すると、このアプローチは非常に重要なようです。

    返信