ページのパフォーマンス | トラブルシューティング

ここで明らかになっているように、ページの読み込みが遅いと、サイトから訪問を失う可能性がありますので、ページのパフォーマンスを最大化することは一般的に価値があります。

ページのパフォーマンスを評価し始めると、明らかになることがあります。読み込み速度に影響を与えるさまざまな要素が存在するということです。

ネットワークの遅延
ファイルの圧縮
ブラウザのキャッシュ
CSS
フォント
インラインのJavaScript

タグ（JavaScriptファイルの読み込み）は、この複雑なプロセスの要素の1つであり、この記事の焦点となります。具体的には、iQ Tag Managementコンソール内で使用できる制御方法と、パフォーマンスに寄与する要素について調査します。特に、タグとパフォーマンスに最も関連する2つの概念に焦点を当てます。

非同期JavaScript
DOM-Readyイベント

認識される読み込み時間と実際の読み込み時間

始める前に、認識される読み込み時間と実際の読み込み時間の違いについて言及する価値があります。実際の読み込み時間は、通常、ウェブページのすべてのアセットが処理されたことを示すブラウザからの測定値です。認識される読み込み時間は、その2つのうちより重要と言えるもので、ウェブページが視覚的にレンダリングされ、ユーザーに利用可能になった時点での測定値です。

この測定対象については、WebPagetest、GoogleのPageSpeed Tools、YahooのYSlowなどの業界の専門ホームによって研究されています。

iQ Tag ManagementのJavaScriptライブラリ（utag.js）は、ページの認識される読み込み時間にほとんどまたは全く影響を与えないように設計されています。

Tealiumのファイルとサードパーティのファイル

Tealiumソリューションの基盤となるのは、ファイル配信フレームワークです。このグローバルかつリアルタイムなソリューションにより、Tealiumのファイルが訪問のブラウザに最速で配信されます。JavaScriptローダー（またはラッパー）ファイルには、iQ Tag Managementアカウントのロジックと構成が含まれており、ブラウザのネットワークコンソールでutag.jsとutag.#.jsという名前で識別できます。これらは、Tealiumがtags.tiqcdn.comドメインから提供するファイルです。

Tealiumファイルのブラウザネットワークログの例：

ブラウザがこれらのTealiumファイルを読み込む際に、タグベンダーが必要とする追加のファイルのリクエストが発生する場合があります。これらのファイルは、tags.tiqcdn.comドメイン以外からのリクエストとして識別でき、utag以外の名前を持つことがあります。

Tealiumは、サードパーティのファイルのホストやパフォーマンスを管理または制御していません。

ブラウザのファイルキャッシュ

ブラウザには、ページのパフォーマンスを最適化するための独自の方法がありますが、最もよく知られているのはファイルキャッシュです。ブラウザはファイルのコピーを保存し、同じコンテンツをネットワークを介して繰り返し要求しないようにします。これにより、初期のアセットがブラウザのキャッシュに保存されると、サイトのページがより速く読み込まれるようになり、ネットワークトラフィックが減少します。

Universal Tagファイルがブラウザでキャッシュされる方法について詳しく学ぶ

非同期JavaScript

非同期JavaScriptは、非必須の要素の読み込みを遅延させ、ページのレンダリングをユーザーに優先させるための方法です。ページ内の非同期リクエストは、ブラウザの「To Do」リストのようなものです。ブラウザに他の優先度の高い要素がない場合、非同期の「To Do」リストのアイテムを処理します。対照的に、同期JavaScriptを使用すると、ブラウザはページのレンダリングをブロックする必要があります。同期の「Must Do」リストのアイテムを処理するためです。

すべてのモダンなタグベンダーは、非同期メソッドに切り替えています。これは、ページの読み込み速度を向上させる最も一般的な方法の1つです。

iQ Tag Managementでは、utag.jsローダーファイルとその後に読み込まれるすべてのタグファイルが非同期メソッドを使用しています。

詳細については、次を参照してください：

DOM-Readyイベント

DOM-Readyイベント（またはDOMContentLoaded）は、ブラウザがページのメインコンテンツの読み込みを完了したことを示す方法です。このイベントは、ページの非必須要素の読み込みのトリガーとして一般的に使用され、ページのレンダリングをできるだけ早く行うことで、認識される読み込み時間を改善します。

iQ Tag Managementでは、ベンダートラッキングはDOM-Readyイベントまで遅延させ、ページのレンダリングに与える影響を最小限に抑えています。

詳細については、次を参照してください：

iQ Tag Managementの構成とベストプラクティス

iQ Tag Managementには、JavaScriptの読み込み方法を制御するためのいくつかのオプションがあります。すべてのウェブサイトは異なるため、一つの最適な解決策はありません。iQのデフォルト構成は、認識される読み込み時間にほとんど影響を与えず、最大限の互換性を提供するようにバランスが取られています。

コードの配置

コードの配置は、HTMLドキュメント内でutag.jsコードスニペットが表示される場所を指します。HTML内でJavaScriptを読み込む場所は、主に<head>タグ内または<body>タグ内の2つの場所です。Tealiumのutag.jsファイルは<body>タグ内に読み込まれる必要があります。

基本的なHTMLの構造：

<html>
<head>
    <!-- ここにスクリプトファイルがあります -->
</head>
<body>
    <!-- ここにTealium utag.js非同期スクリプトがあります -->
    ....
</body>
</html>

ベストプラクティスは、utag.jsコードスニペットを<body>の先頭に配置することです。この位置では、ページがレンダリングを続けながらタグ管理の構成が非同期で読み込まれるため、タグはDOM-Readyイベントで発火する準備が整います。必要に応じて、utag.jsファイルを<body>の下部に配置することもできます。一般的には、これによりタグの読み込みが遅延し、またはわずかに速い認識される読み込み時間が得られます。

utag.jsのコード配置について詳しく読む。

Ready Waitフラグ

Ready Waitフラグは、公開構成エリアで見つけることができます。これは、utag.jsが実行を開始するタイミングを制御します。デフォルトでは、このフラグはオフに構成されており、utag.jsは読み込まれるとすぐに実行を開始します。このフラグをオンに構成すると、utag.jsはDOM-Readyイベントが発生するまで実行を待ちます。このフラグをオンにすることで、ページの読み込み時間の向上を優先し、タグの読み込みを優先度を下げることができます。

Ready Wait FlagをOnに構成すると、タグの読み込みが完了する前に訪問がページを離れる可能性があるため、新しい構成をライブサイトにリリースする前に十分なテストを行ってください。

ファイルの圧縮と最小化

Tealiumのサーバーから配信されるファイルは、GZip業界標準を使用して圧縮されています。これにより、JavaScriptファイル（テキストファイル）がブラウザに配信される際にできるだけ小さくなります。この動作は変更できません。これらのJavaScriptファイル内のコードもデフォルトで最小化されています。最小化は、コメント行や空白を削除することで、コードファイルを必要なテキストのみに圧縮する追加のステップを追加します。デバッグ目的で必要な場合は、この構成をオフにすることができます。

Minify Tag Templates構成について詳しく読む。

バンドル

バンドルにより、ベンダータグコードをメインのutag.jsファイルに含めることで、ページからの追加のHTTPリクエストを排除することができます。デフォルトでは、iQ Tag Managementで構成されたベンダータグは、別々のファイル（たとえば、utag.4.js）としてページに読み込まれます。これは、メインのutag.jsファイルにコードエラーを導入するリスクを最小限に抑えるためです（たとえば、1つのファイルのエラーが他のファイルに影響を与えないようにします）。ただし、別々のファイルを使用すると、ページがタグを読み込むために行うHTTPリクエストの数が増えます。これらのファイルの配信は、Tealiumのサーバーとブラウザのキャッシュを介して最適化されていますが、さらなる最適化が必要な場合は、バンドルを検討することができます。

以下は、バンドルされたタグによってTealiumからのファイルの読み込み時間が80%改善されたシンプルな例です。

バンドルされていない2つのベンダータグ

ファイルの数: 3 (utag.js、utag.1.js、utag.21.js)
合計サイズ: 18.2 KB (9.1 + 5.0 + 4.1)
合計時間: 100 ms (54 + 23 + 23)

バンドルされた2つのベンダータグ

ファイルの数: 1 (utag.js)
合計サイズ: 17 KB
合計時間: 19 ms

個々のタグをバンドルする方法について詳しく読む](/ja/iq-tag-management/tags/advanced-settings/#bundle-flag)またはすべてのページロードルールを使用して任意のタグをバンドルする方法について詳しく読む。

タグのタイミング

前述のように、utag.jsのデフォルトの動作は、DOM-Readyイベントが発生するまでベンダータグの発火を待機することです。タグのタイミング構成は、個々のタグに対してこのロジックを制御するタグレベルの構成です。デフォルトの構成はDOM Ready（デフォルト）で、DOM-Readyを待機することを意味します。このフラグを優先度付けに構成すると、個々のタグはできるだけ早く実行されます（通常はDOM-Readyよりも前）。

タグのタイミングについて詳しく読む。

タグの順序

構成したタグは、iQ Tag Managementコンソールに表示される順序でページに読み込まれます。タグの読み込み順序を希望の順序にドラッグアンドドロップできます。Tealiumのベストプラクティスは、分析タグや他の高優先度のタグをリストの先頭に配置し、最初に読み込まれるようにすることです。

タグの順序について詳しく読む