こんにちは、連久実子です。
当サイトでは、GoogleアナリティクスのトラッキングコードやPTengineのトラッキングタグをGoogleタグマネージャを経由させて配信しています。
Googleタグマネージャを導入すると「htmlファイルを弄らなくてもタグを追加できる」「解析や広告などの数多のタグを管理しやすい」というメリットの他に、最近Webマスターさん達がとても気にされている「ページの表示速度を改善できる」というメリットもあると言われています。
これは、Googleタグマネージャ経由でタグ配信すると「強制的に非同期タグ」として扱われる仕様のためです。
非同期タグの説明については上記の記事がわかりやすいですが、引用させていただくと
逆に、非同期タグの場合はJavaScriptが読み込まれてもそのタイミングでは必ずしも処理を開始しない代わりに、同期タグのようにページの読み込みを止めてしまうことがありません。
ということなので、Googleタグマネージャで配信するタグを強制的に非同期タグにすることにより、ページの表示速度に影響を及ぼすことを回避できるという仕組みです。
しかし、非同期タグをGoogleタグマネージャ経由で配信する場合でも、その恩恵は受けられるのでしょうか？
そこで、2016年10月4日現在、GoogleアナリティクスとPTengineの2種類しか配信していない、当サイトでもページの表示速度が改善されるのか、確かめてみました。
実験環境
（１）タグの種類・・・Googleアナリティクストラッキングコード/PTengineタグ/adwordsのCVタグ（出稿はしていないのでダミータグ）
※タグ数はGoogleタグマネージャ使用/未使用ともに3つ
（２）計測ツール・・・「Pingdom Website Speed Test」を利用
（３）計測環境・・・「New York City,USA」を選択/3回テストした平均の数値を記載
（４）ページ・・・当サイトTOPページ（https://shuhu-marketing.com/）
（５）Googleタグマネージャの設置方法・・・2016年9月27日に新しくなった下記の方法で設置
結果
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ミリ秒長くなっていますが、一方、ファイルのダウンロード時間は５３１.0ミリ秒ほどGoogleタグマネージャ経由の方が短く（約46%に短縮）なっています。
タグ別にみると、Googleアナリティクストラッキングコードが「約4%に短縮」、adwordsがCVタグが「約7%に短縮」、PTengineタグが「約70%に短縮」で、Googleアナリティクスだけ利用しているサイトでも十分に表示速度改善の恩恵をうけられる結果となりました。
ここで疑問に思ったのが「非同期タグにすることが、ファイルの読み込み時間自体を短縮することにはならないのに、なぜファイルの読み込み時間が短縮されたんだろう？」ということですが、下記の記事にヒントが書かれていました。
なるほど、Minifierによって読み込まれるファイルが圧縮されたことによって、ファイルの読み込み時間自体も短縮された結果、ファイルのダウンロード時間が大幅に短縮される結果となったのでしょう。
情報サイトやオウンドメディアは、それほど多くの広告タグを設置することは稀だと思いますので、ページスピードが改善されるといっても「多くのタグを設置していないのにわざわざGoogleタグマネージャを導入するのは、ちょっと・・・」と悩まれている方もいらっしゃるかと思います。
ですが、今回「タグ３つ、しかも2つは非同期タグ」でもダウンロード時間が大幅に短縮されるという結果が出たため、上のような理由で導入を見送られていらっしゃる場合は再検討されてはいかがでしょう？
ちなみにGoogleタグマネージャは、ページ表示速度面のメリットだけではなく、Googleアナリティクスを使ったサイト解析の設定をする際もとても便利です。詳しくは、以前下の外部サイトで書かせていただいていますので、よかったら合わせてみてみてくださいね。
コメント