Googleタグマネージャは、非同期タグを配信する際もページ表示速度を改善できるか?

Googleタグマネージャは非同期タグを配信する際もページ表示速度を改善できるか?

こんにちは、連クミコです。

当サイトでは、GoogleアナリティクスのトラッキングコードやPTengineのトラッキングタグをGoogleタグマネージャを経由させて配信しています。

Googleタグマネージャを導入すると「htmlファイルを弄らなくてもタグを追加できる」「解析や広告などの数多のタグを管理しやすい」というメリットの他に、最近Webマスターさん達がとても気にされている「ページの表示速度を改善できる」というメリットもあると言われています。

これは、Googleタグマネージャ経由でタグ配信すると「強制的に非同期タグ」として扱われる仕様のためです。

タグマネージャ導入前に知っておくべき基礎知識(全20回の2) | 実践 Googleタグマネージャ入門
Googleタグマネージャは、どんなタグを管理できて、どんなタグは管理できないのでしょうか。また、導入にどんなコスト(費用や作業)が必要で、どんなタイミングで導入するのがいいのでしょうか。

非同期タグの説明については上記の記事がわかりやすいですが、引用させていただくと

同期タグではJavaScriptが読み込まれたら処理が開始され、その処理が完了するまでページの読み込みは止まります。そのため、同期タグでは「JavaScriptが読み込まれたタイミングで確実に処理を開始」することができますが、その半面、ページの表示が遅くなってしまうなどの影響が出ます。

逆に、非同期タグの場合はJavaScriptが読み込まれてもそのタイミングでは必ずしも処理を開始しない代わりに、同期タグのようにページの読み込みを止めてしまうことがありません。

ということなので、Googleタグマネージャで配信するタグを強制的に非同期タグにすることにより、ページの表示速度に影響を及ぼすことを回避できるという仕組みです。

しかし、非同期タグをGoogleタグマネージャ経由で配信する場合でも、その恩恵は受けられるのでしょうか?

そこで、2016年10月4日現在、GoogleアナリティクスとPTengineの2種類しか配信していない、当サイトでもページの表示速度が改善されるのか、確かめてみました。

スポンサーリンク

実験環境

(1)タグの種類・・・Googleアナリティクストラッキングコード/PTengineタグ/adwordsのCVタグ(出稿はしていないのでダミータグ)

※タグ数はGoogleタグマネージャ使用/未使用ともに3つ

(2)計測ツール・・・「Pingdom Website Speed Test」を利用

(3)計測環境・・・「New York City,USA」を選択/3回テストした平均の数値を記載

(4)ページ・・・当サイトTOPページ(https://shuhu-marketing.com/

(5)Googleタグマネージャの設置方法・・・2016年9月27日に新しくなった下記の方法で設置

Quick Start Guide  |  Google Tag Manager for Web Tracking  |  Google Developers
Covers the Google Tag Manager container snippet (JavaScript and non-JavaScript) to insert into your web pages.

結果

Googleタグマネージャを経由してタグを配信した場合

Load timeの平均は「6.81s」でした。

ファイル名 DNS(ms) SSL(ms) Connect(ms) Send(ms) Wait(ms) Receive(ms)
Googleタグマネージャ関連ファイル
gtm.js?id=GTM-5998FX 7.0 19.3 22.3 1.0 28.3 3.0
Googleアナリティクス関連ファイル
analytics.js 1.0 2.7 0 3.0 1.0
linkid.js 0 3.3
collect?… 0 3.0
合計 1.0 2.7 0 9.3 1.0
PTengine関連ファイル
pta.js 51.7 187.3 0 187.3 0.3
pts.js 51.0 187.7 0 188.0 0.3
(アカウントID).js 0 155.0 436.0
pn?id=(アカウントID)… 51.7 187.3 0 189.3 0.3
合計 154.4 562.3 719.6 436.9
Adwords関連タグ
conversion_async.js 0 0.7 0 19.3 0.7
https://www.googleadservices.com/pagead/…… 0.3 21.7 23.7 0.7 19.7 4.0
https://googleads.g.doubleclick.net/pagead/… 0.3 19.3 21.3 1.0 20 1.0
https://www.google.com/ads/… 0.3 93.3 143.7 1.0 82.7
collect?… 0 36.7 54 1.0 16.3 0.7
合計 0.9 171.0 243.4 3.7 158.0 6.4
総計 163.3 190.3 830.7 4.7 915.2 447.3

ページのhtmlファイルにタグ直書きして配信した場合

Load timeの平均は「9.54s」でした。

ファイル名 DNS(ms) SSL(ms) Connect(ms) Send(ms) Wait(ms) Receive(ms)
Googleアナリティクス関連ファイル
analytics.js 0.7 11.3 13.0 1.7 68.3 262.0
collect?… 0 20.7 1.0
合計 0.7 11.3 13.0 1.7 89.0 263.0
PTengine関連ファイル
pta.js 27.7 187.0 0 187.3
pts.js 27.3 187.0 0
(アカウントID).js 0 187.7 624.7
pn?id=(アカウントID)… 22.3 187.0 0 187.3
合計 77.3 561.0 0 562.3 624.7
Adwords関連タグ
conversion.js 0.3 2.7 0 20.3 1.0
https://www.googleadservices.com/pagead/…… 0 22.0 24.0 1.3 20.3 87.3
https://googleads.g.doubleclick.net/pagead/… 0.7 19.7 22.0 1.0 19.0 2.3
https://www.google.com/ads/… 0 92.7 166.7 1.0 82.3
collect?… 0 27.7 43.0 0.7 16.3
合計 1.0 162.1 258.4 4.0 158.2 90.6
総計 79.0 173.4 832.4 5.7 809.5 978.3

考察

サイトの全体のLoad timeは、Googleタグマネージャを経由した場合の方が約71%に短縮されています。

配信したタグに関連するファイルに絞って、それぞれの所用時間を見てみると、DNSやSSLの処理については、Googleタグマネージャ経由の方が101.2ミリ秒長くなっており、初期接続はほぼ変わらず、最初のレスポンスを受けるまでの待機時間も105.7ミリ秒長くなっていますが、一方、ファイルのダウンロード時間は531.0ミリ秒ほどGoogleタグマネージャ経由の方が短く(約46%に短縮)なっています。

タグ別にみると、Googleアナリティクストラッキングコードが「約4%に短縮」、adwordsがCVタグが「約7%に短縮」、PTengineタグが「約70%に短縮」で、Googleアナリティクスだけ利用しているサイトでも十分に表示速度改善の恩恵をうけられる結果となりました。

ここで疑問に思ったのが「非同期タグにすることが、ファイルの読み込み時間自体を短縮することにはならないのに、なぜファイルの読み込み時間が短縮されたんだろう?」ということですが、下記の記事にヒントが書かれていました。

Googleタグマネージャを用いたイベントトラッキングやeコマーストラッキングの設定方法 | SEO HACKS公式ブログ
Google タグマネージャは複数の煩雑なタグ管理を容易に行うためのツールです。使い慣れないとなかなか便利さを実感しにくいツールではありますが、慣れてしまえば色々な場面で利用できます。特に専任の技術担当がいない商用サイト &
タグマネージャに挿入したスクリプトは、自動的にMinifierで圧縮されるので、挿入タグの大きさ次第でWebページに直接タグを挿入するよりも転送速度の向上が期待できます。

なるほど、Minifierによって読み込まれるファイルが圧縮されたことによって、ファイルの読み込み時間自体も短縮された結果、ファイルのダウンロード時間が大幅に短縮される結果となったのでしょう。

情報サイトやオウンドメディアは、それほど多くの広告タグを設置することは稀だと思いますので、ページスピードが改善されるといっても「多くのタグを設置していないのにわざわざGoogleタグマネージャを導入するのは、ちょっと・・・」と悩まれている方もいらっしゃるかと思います。

ですが、今回「タグ3つ、しかも2つは非同期タグ」でもダウンロード時間が大幅に短縮されるという結果が出たため、上のような理由で導入を見送られていらっしゃる場合は再検討されてはいかがでしょう?

ちなみにGoogleタグマネージャは、ページ表示速度面のメリットだけではなく、Googleアナリティクスを使ったサイト解析の設定をする際もとても便利です。詳しくは、以前下の外部サイトで書かせていただいていますので、よかったら合わせてみてみてくださいね。

Googleアナリティクスを詳しく学びたい方にオススメ

Googleタグマネージャはこちらがオススメ