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

Googleタグマネージャは非同期タグを配信する際もページ表示速度を改善できるか?Web Marketing
スポンサーリンク

こんにちは、連久実子です。

 

当サイトでは、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日に新しくなった下記の方法で設置

Install Google Tag Manager for web pages  |  Google Tag Manager for Web  |  Google Developers
Google Tag Manager for websites.

 

結果

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

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

ファイル名DNS(ms)SSL(ms)Connect(ms)Send(ms)Wait(ms)Receive(ms)
Googleタグマネージャ関連ファイル
gtm.js?id=GTM-5998FX7.019.322.31.028.33.0
Googleアナリティクス関連ファイル
analytics.js1.02.703.01.0
linkid.js03.3
collect?…03.0
合計1.02.709.31.0
PTengine関連ファイル
pta.js51.7187.30187.30.3
pts.js51.0187.70188.00.3
(アカウントID).js0155.0436.0
pn?id=(アカウントID)…51.7187.30189.30.3
合計154.4562.3719.6436.9
Adwords関連タグ
conversion_async.js00.7019.30.7
https://www.googleadservices.com/pagead/……0.321.723.70.719.74.0
https://googleads.g.doubleclick.net/pagead/…0.319.321.31.0201.0
https://www.google.com/ads/…0.393.3143.71.082.7
collect?…036.7541.016.30.7
合計0.9171.0243.43.7158.06.4
総計163.3190.3830.74.7915.2447.3

 

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

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

ファイル名DNS(ms)SSL(ms)Connect(ms)Send(ms)Wait(ms)Receive(ms)
Googleアナリティクス関連ファイル
analytics.js0.711.313.01.768.3262.0
collect?…020.71.0
合計0.711.313.01.789.0263.0
PTengine関連ファイル
pta.js27.7187.00187.3
pts.js27.3187.00
(アカウントID).js0187.7624.7
pn?id=(アカウントID)…22.3187.00187.3
合計77.3561.00562.3624.7
Adwords関連タグ
conversion.js0.32.7020.31.0
https://www.googleadservices.com/pagead/……022.024.01.320.387.3
https://googleads.g.doubleclick.net/pagead/…0.719.722.01.019.02.3
https://www.google.com/ads/…092.7166.71.082.3
collect?…027.743.00.716.3
合計1.0162.1258.44.0158.290.6
総計79.0173.4832.45.7809.5978.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コマーストラッキングの設定方法 | ナイルのマーケティング相談室
Google タグマネージャの応用的な使い方をご紹介します。eコマーストラッキングの設定や、カスタムHTMLタグを使ったリファラ解析用のタグ発行、設置後の確認方法、データレイヤー変数などについて解説します。
タグマネージャに挿入したスクリプトは、自動的にMinifierで圧縮されるので、挿入タグの大きさ次第でWebページに直接タグを挿入するよりも転送速度の向上が期待できます。

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

 

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

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

 

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

Web制作者必見!Googleタグマネージャーでできる、サイト改善に使えるイベントトラッキング3選 | 株式会社プリンシプル
Googleタグマネージャー(GTM)は少しとっつきづらいですが、実はNONエンジニアこそ使えた方がよいツールです。元デザイナーが、Googleタグマネージャーでのイベントトラッキングを設定する中で「Webサイト制作をしていた時に知っていれば!」と思った設定を紹介します。

コメント