【SEO対策】Google Analyticsのスクリプトをページ読み込み直後にする

先日、Googleの検索アルゴリズムでPageSpeed Insights(Core Web Vitals)の結果を試験的に導入というニュースが流れた。

【SEO対策】Core Web Vitalsでも記載した通り、当サイトでもCore Web Vitalsの調査を行っていて、

core_web_vitals_score

core_web_vitals

先日までCore Web Vitalsで重要な三要素であるLCP、FIDとCLSはオールグリーンであったが、最近仕様変更があったのか？記事詳細ページで確認してみると、

page_speed_core_web_vitals

スコアの色がオレンジになっている。

何が問題なのか？を確認するためにラボデータを見てみると、

page_speed_core_web_vitals_labo_data

page_speed_core_web_vitals_labo_data_lcp

Largest Contentful Paintのスコアが極端に遅くてオレンジになっている。

改善の内容にはGoogle Analyticsの読み込みしか記載されていない。

firefox_developer_tool_network

firefox_developer_tool_network_l

ブラウザの開発者ツールのnetwork(ネットワーク)で確認してみると、Google Analyticsのタグの取得が上位にあるので、これが原因かと…

ただ、読み込みだけでLCPが遅くなるのは謎だ。

試しにGoogle Analyticsのタグを下記のように変更してみた。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-Y');
</script>

※UA-XXXXXXXX-Yはサイトによって異なる

このGoogle Analyticsのコンソールで配布されているコードを

<script>
window.onload = function(){
	var scriptTag = document.createElement("script");
	scriptTag.src = "//www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-Y";
	document.body.appendChild(scriptTag);
	
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

	gtag('config', 'UA-XXXXXXXX-Y');
};
</script>

onloadイベントでGoogle Analyticsのコードを取得と取得後のコードを実行するように修正してみた。

window.onload - Web API | MDN

この対応後に再びPageSpeed Insightsを確認してみたところ、

pagespeed_insights_core_web_vitals_after