Google Tag Manager (Analytic)を遅延読み込みしてサイトを爆速にしてみた
サイトを運営している人々の悩みの種、高速化。
私自身も、ブログ開設当時からかれこれ4年以上、サイトの高速化とバトルを繰り広げています。
さて、今回はGoogle Tag Managerを遅延読み込みさせてサイトを爆速にできることがわかったので、高速化を目指す同士のために紹介しようと思います。
ちなみに、Google Tag Managerにもいろいろと種類があったりするみたいですが、この記事ではGoogle Analyticsのことを指します。
Google Analytics以外のTag Managerでも、たぶん同様の方法が効くと思います。
そもそもGoogle Tag Managerがサイトの表示速度にどれほど影響しているのかですが、これはPage Speed Insightsで測ることができます。
Page Speed InsightsでGoogle Tag Managerの影響を見てみる
最近まで60点台くらいしか無かった当サイトですが、ここ数日で高速化を行い、現時点でも ある程度のスコアを獲得できています。
しかし、Total Blocking Time (TBT)だけオレンジ色。これでは見た目が悪いですよね。
TBTが何なのかは良く分かりませんが、対策できる部分は徹底的につぶしておきたいものです。
詳しく見てみると、「第三者の使用の最小化 第三者コードによってメインスレッドが 130 ミリ秒間ブロックされました」という項目の影響がデカいことがわかりました。
この130msを消すことができれば、TBTは現状の半分近くまで減らせます。
そして、第三者コードどーのこーのの中でも特に読み込み時間がデカい要素である「Google Tag Manager」。
こいつだけで103msも使っているため、これを消すだけでもTBTは約190msに改善。さっそく、消すためのスクリプトを作ってみます。
Google Tag Managerを遅延読み込みする方法
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX');
</script>まず、Google Tag Managerを読み込むために、上記のコードを<head></head>内に記載します。
※G-XXXXXXXXXの部分は、ご自身のGoogle Analytics 4のトラッキングコードに変えてください
プラグインでGoogle Tag Managerを設置 / 管理しているような場合は、今回の遅延読み込みは残念ながら効きません。
私はもともとSWELLのSEO SIMPLE PACKというプラグインでAnalyticsを設置していましたが、遅延読み込みのために上記コードの設置に変えました。
通常、このコードには「<script async src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX”></script>」というjavascriptが付いていますが、こいつが重たい原因なんですね。
なので、上記コードではこの記載を消しています。これで、ページを開いただけではAnalyticsのjavascriptが読み込まれません。
<script>
// 一度だけ実行されるようにフラグを設定
var scriptAdded = false;
window.addEventListener('scroll', function() {
// スクロールが検知されたら実行
if (!scriptAdded) {
// 新しい script 要素を作成
var newScript = document.createElement('script');
newScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
newScript.async = true;
// head 要素に追加
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(newScript);
// スクリプトが追加されたことを記録
scriptAdded = true;
}
});
</script>先ほどのコードを<head></head>に設置できたら、あとは上記コードをfooter.phpの一番下に置きます。
一番下と言っても、</body>の直前なのでそこだけ注意してください。
設置すると、下のような感じになります。
私はWordPressのテーマエディターから書き加えた形です。footer.phpの</body>直前に書けさえすれば、やり方はなんでもいいです。
このコードでは、ユーザーがスクロールしたことを検知してAnalyticsを読み込みます。つまり、ユーザーがサイトを開き、何もアクションを起こさなければAnalyticsは読み込まれず、当然ながらトラフィックには何も記録されません。
これにより、トラフィックはこれまでより少し減る可能性があります。が、問題ありません。
そもそもページをスクロールすらせずに離脱するということは、ページの読み込みがメチャクチャ遅かったとか、間違えてページを開いたとかでしょう。
そんなトラフィックを記録してもしょうがないので、スクロール発火にしたことでトラフィックが減ったとしても気にしないでください。
実際にコードが機能しているのか確認
まず、上の画像はページを開いただけの状態で、まだ何もアクションをしていません。
少しスクロールしてみると。。。
このように、Google Tag Managerのjavascriptコードが出てきましたね。これで、さっき設置したコードがちゃんと動いていることが確認できました。
コードが追加される位置は、たぶん</head>のすぐ上あたりです。サイトによって違うかもなので参考までに。
動作確認は絶対するようにしましょう。もし失敗して、Google Tag Managerコードが設置できてなかったりしたら、それに気づくまでトラフィックを得ることができません。
検証方法は、1. 適当なページ開く→2. どこでもいいので右クリック→3. 出てきたウィンドウで一番下あたりにある「検証」をクリック→4. HTMLの上のほうに<head></head>があるので、その中にある要素を凝視してGoogle Tag Managerコードが出てくるかどうか試す
遅延読み込みの効果は絶大!
遅延読み込みをする前が93点 / TBT 290msだったのに対し、対策後は99点 / TBT 50msに！！
まあ、スピードテストするページによっては89点だったり90点台前半だったり結果はまちまちなんですが、とにかくGoogle Tag Managerの影響を完全にゼロにすることには成功しました。
“指標” の5つの項目がすべて緑色なのは本当に気持ちがいいですね。対策してよかったと思う瞬間です。
あと、TBTの中にTwitterのwidgets.jsとかいうjavascriptがまだ邪魔をしてるんですが、これを消す方法はどうやっても見つからず…
そもそも私、Twitterの埋め込みは全部消したんですけどね。なぜか読み込まれてます。謎です。
そのうち対策できたらします。
ちなみに今回紹介したコードはChatGPTが書いてくれました。私はjavascriptぜんぜんわかんない人間なので、ChatGPTのような存在は本当にありがたい限り。
追加の高速化方法
Google Tag Managerの高速化だけで満足できない方は、Google AdSense広告の遅延読み込みを実装してみましょう。
AdSenseはGoogle Tag Managerを上回る激重要素であり、これを遅延読み込みできれば、Page Speed Insightsで100点を取れる可能性が高まります。
遅延読み込み方法については以下の記事で解説しています。
