PageSpeed InsightsでGTMのJavaScriptファイルを削減する方法

Google Tag Manager (GTM) のJavaScript（JS）ファイルは、ウェブサイト訪問者の行動をトラッキングおよび分析する上で有用です。しかし、JSファイルが過剰になると、ウェブサイトのパフォーマンスや機能に重大な影響を及ぼす可能性があります。

これらのJSコードはウェブサイトの読み込みを遅くし、ユーザー体験を悪化させます。さらに、Amazonの調査によると、ページの読み込み時間が100ミリ秒遅くなるごとに売上が1%減少することが明らかになっています。そのため、JSファイルの削減はウェブサイトにとって不可欠です。

この記事では、コンテナの監査からサーバーサイド計測への移行まで、GTMのJSファイル数を削減するためのソリューションをご紹介します。

GTM内のJSファイルを最適化する最大のメリットは、ウェブサイトの読み込み速度が大幅に向上することです。

各JSファイルの読み込みには個別のHTTPリクエストが必要であり、ファイルが増えるほどリクエストも多くなります。ユーザーにとっては、ウェブサイトのコンテンツ表示の遅延につながり、直帰率の上昇を招く可能性があります。ウェブサイト自体にとっても、SEO順位の低下やウェブサイトトラフィックの減少につながる恐れがあります。

JSファイルを減らすことでHTTPリクエスト数が削減され、ウェブサイトの読み込みが高速化されます。

GTMのファイルは通常、PageSpeed Insightsレポートの以下のセクションに表示されます。

• 第三者コードの影響を抑えてください
• Google Tag Managerの未使用のJavaScriptを削減

問題が発生しているセクションをクリックして、該当箇所へ直接移動してください。

サードパーティのJSコードにより、さまざまなユーザーアクション（クリック、スクロール、コンテンツの共有など）のトラッキングを設定できます。しかし、これはウェブサイトの速度に影響を与え、ウェブページの最大の負荷要因の1つになることがよくあります。

GTMファイルを改善するために、以下の解決策をお勧めします。

GTMコンテナ内のすべてのタグを見直してください。ウェブサイトのパフォーマンス分析に不要となったタグが含まれている可能性があります。このシンプルな手順により、サードパーティコードの数とウェブサイトへの負荷を軽減できます。

この作業を行うには、GTM.Toolsの利用をおすすめします。コンテナの検証、ワークスペースコンテンツの編集や一括更新が可能です。

カスタムHTMLタグは、個別のトラッキング設定に便利ですが、容量が大きくなりやすく、配信時にウェブサイトの読み込み時間に影響を与えることがよくあります。既存のカスタムタグを見直し、より最適化されているGTMのテンプレートへの切り替えを検討してください。

CDNはウェブサイトのデータをキャッシュし、訪問者に近いサーバーから特定のページを配信します。これにより、JSファイルの配信が高速化されます。

一部のタグは、ページの読み込み時にすぐに配信する必要はありません。遅延させることができるタグにはタグの順序付けを設定してください。タグの順序付けを使用すると、指定した「メイン」タグが配信される直前または直後に配信するタグを指定できます。このオプションを見つけるには、遅延させたいタグの「詳細設定」に移動します。

カスタムHTMLタグの削減や一部のタグの削除が難しい場合は、サーバーサイドトラッキングを試すことをお勧めします。 

どのような仕組みなのでしょうか？サーバーサイドに移行すると、すべてのGTMタグをウェブコンテナからサーバーコンテナに移動します。これらのタグはユーザーのブラウザ内ではなくサーバーコンテナに読み込まれます。これにより、ウェブサイトの読み込みが高速化されます。

未使用のJSコードとは、ページのレンダリング（ページのコンテンツを読み込んで表示すること）に不要なコードのことです。このコードによってJavaScriptバンドルのサイズが増加し、ウェブサイトの読み込みが遅くなります。

この問題に対処する最も効果的な方法は、GTMコンテナを監査し、不要なタグを削除することです。

ただし、多くの場合、PageSpeed Insightsのこの項目からそうしたJSファイルを完全に除外することはできないという点にご留意ください。 

一部の変数タイプはGTM自体の構成要素であり、一般にGTMを動作させるために必要とされます。これらには、Auto Event Variable、DOM Element、Element Visibilityなどの変数が含まれます。コンテナにこれらの変数を追加していなくても、PageSpeed Insightsでは「未使用のJSコード」として表示されることがあります。

これらはGTMライブラリの一部であり、削除するとコードが破損し、GTMが正常に動作しない、または機能しなくなる可能性があります。

GTMライブラリの一部であり、GTMの動作に不可欠であるにもかかわらず、なぜ「未使用のJSコード」に表示されるのでしょうか？PageSpeed Insightsが未使用コードとしてフラグを立てるのは、コンテナ内にそのタイプの変数が存在しないためです。それらはGTMライブラリ内にのみ配置されています。

ご覧のとおり、GTMのJSファイルで直面しがちな根本的な問題は、整理されておらず過負荷になったコンテナに関連しています。重要な解決策は、コンテナサイズを監視し、不要なタグを適時に削除することです。

GTMコンテナのサイズを監視するには、2つの方法があります。

ブラウザにGet Google Tag Manager Size拡張機能を追加し、確認したいウェブサイト上で使用するだけです。

この拡張機能はコンテナのサイズを表示し、変数、タグ、トリガーの数に関する詳細を提供します。

GTMコンテナのサイズを確認するには、以下のリンクを使用します。URLの「YOUR_ID」の部分を、お使いのコンテナのIDに置き換えてください（GTMで「Workspace」をクリックするとIDが表示されます）。

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

結果ページが表示されたら、内容をコピーしてTextEdit（Mac OSの場合）またはNotepad（Windows OSの場合）に貼り付けます。これでこのファイルのサイズを確認できます。それがGTMコンテナのサイズです。

GTMコンテナサイズを確認するタイミング

コンテナサイズの上限は200 KBですが、140 KBに達するとGTMから警告が表示されます。もちろん、ウェブサイトのパフォーマンスに影響を与えないよう、コンテナサイズはこれよりも大幅に小さく抑えることを強く推奨します。

ウェブサイトのパフォーマンスに対するGTMコードの影響を抑えられるよう、特に大規模な変更やトラッキング設定を行った後など、定期的にコンテナサイズを監視することをお勧めします。

GTMのJSファイルが多すぎると、PageSpeed Insightsにおけるウェブサイトのパフォーマンススコアが大幅に低下する可能性があります。これらのコードによって読み込みが遅くなり、直帰率の上昇やSEO順位の悪化につながります。

GTMのJSファイル数を削減する最も効果的な方法は、ファイルサイズを管理し、GTMコンテナを監査して不要なタグを削除することです。ただし、タグ数を減らしても効果が得られない場合は、クライアントサイドではなくサーバーサイドトラッキングの導入を検討することをお勧めします。サーバーサイドでは、すべてのGTMタグがブラウザではなくサーバーコンテナに読み込まれるため、ウェブサイトの読み込み速度が向上します。