Show Menu
トピック×

非同期デプロイメント

製品で必要となる JavaScript ライブラリのパフォーマンスと、それらをノンブロッキングでデプロイすることは、Adobe Experience Cloud ユーザーにとってますます重要となっています。 Google PageSpeed などのツールは、自分たちのサイトでの Adobe ライブラリのデプロイ方法を変更するユーザーにお勧めです。この記事では、非同期的に Adobe JavaScript ライブラリを使用する方法について説明します。

同期と非同期

同期デプロイメント

多くの場合、ライブラリはページの <head> タグ内で同期的に読み込まれます。以下に例を示します。
<script src="example.js"></script>

デフォルトでは、ブラウザーはドキュメントを解析してこの行に到達し、サーバーから JavaScript ファイルの取得を開始します。ブラウザーは、ファイルが返されるまで待機し、JavaScript ファイルを解析して実行します。最後に、残りの HTML ドキュメントの解析を続行します。
表示コンテンツをレンダリングする前にパーサーが <script> タグに遭遇すると、コンテンツの表示が遅延します。読み込まれる JavaScript ファイルが、ユーザーにコンテンツを表示するために必ずしも必要ではない場合、訪問者はコンテンツを待機する必要がなくなります。ライブラリが大きいほど、遅延時間も長くなります。この理由により、Google PageSpeed や Lighthouse などの Web サイトパフォーマンスベンチマークツールは、同期的に読み込まれたスクリプトにフラグを付けることが頻繁に発生します。
管理するタグが多数ある場合、Tag Management は、すぐに大きく成長する可能性があります。

非同期デプロイメント

<script> タグに async 属性を追加すると、任意のライブラリを非同期で読み込むことができます。以下に例を示します。
<script src="example.js" async></script>

このコードは、スクリプトタグが解析されたら、ブラウザーは JavaScript ファイルの読み込みを開始しますが、ライブラリが読み込まれて実行されるのを待たずに、ドキュメントの残りの部分の解析とレンダリングを続行する必要があることをブラウザーに示します。

非同期デプロイメントに関する考慮事項

前述のように、同期デプロイメントでは、Launch ライブラリの読み込み中および実行中、ブラウザーはページの解析とレンダリングを一時停止します。一方、非同期デプロイメントでは、ライブラリの読み込み中、ブラウザーはページの解析とレンダリングを続行します。ページの解析とレンダリングに関して Launch ライブラリの読み込みが完了する可能性がある場合は、それを考慮する必要があります。
まず、Launch はページ下部が解析および実行される前または後に読み込みを終了する可能性があるので、ページコードから _satellite.pageBottom() を呼び出さなくなりました( _satellite はライブラリが読み込まれるまでは使用できません)。これについては、「 Launch 埋め込みコードの非同期読み込み 」で説明しています。
次に、Launch は、 DOMContentLoaded ブラウザーイベント(DOM Ready)の発生前または発生後に読み込みを終了する場合があります。
これら 2 つの点により、Launch ライブラリを非同期的に読み込む際、Core 拡張機能の Library Loaded Page Bottom DOM Ready 、および Window Loaded イベントタイプがどのように機能するかを示すとよいでしょう。
例えば、Launch プロパティに次の 4 つのルールが含まれているとします。
  • ルール A:イベントタイプ「Library Loaded」を使用
  • ルール B:イベントタイプ「Page Bottom」を使用
  • ルール C:イベントタイプ「DOM Ready」を使用
  • ルール D:イベントタイプ「Window Loaded」を使用
Launch ライブラリの読み込みの終了時期に関係なく、すべてのルールが必ず実行されます。実行順序は次のとおりです。
ルール A → ルール B → ルール C → ルール D
順序は常に適用されますが、一部のルールは Launch ライブラリの読み込みが終了するとすぐに実行され、それ以外のルールは後で実行される場合があります。Launch ライブラリ読み込みが終了すると、次のことが発生します。
  1. ルール A はすぐに実行されます。
  2. DOMContentLoaded ブラウザーイベント(DOM Ready)が既に発生している場合は、ルール B とルール C がすぐに実行されます。それ以外の場合は、ルール B とルール C は後で DOMContentLoaded ブラウザーイベントが発生したときに実行されます。
  3. load ブラウザーイベント(Window Loaded)が既に発生している場合は、ルール D が即座に実行されます。それ以外の場合は、ルール D は後で load ブラウザーイベントが発生したときに実行されます。手順に従って Launch ライブラリをインストールした場合、Launch ライブラリでは​ 常に load ブラウザーイベントが発生する前にライブラリの読み込みが完了することに注意してください。
これらの原則を独自の Web サイトに適用する際には、次の点に注意してください。
  • 「Library Loaded」イベントタイプを使用するルールは、データレイヤーが完全に読み込まれる前に実行される場合があります。 ​これにより、データがまだページ上で使用できないという理由で、ルールのアクションが実行されないことがあります。これらのタイプの問題は、ルール設定のトゥイーンによって軽減できます。例えば、「Library Loaded」イベントタイプによってルールをトリガーする代わりに、データレイヤーの読み込みが終了するとすぐに、ページコードによってトリガーされる「Custom Event」または「Direct Call」イベントタイプを使用することができます。
  • 「Page Bottom」イベントタイプでは、ライブラリが非同期で読み込まれる際、値の提供はおこないません。 代わりに、Library Loaded、DOM Ready、Window Loaded、またはその他のイベントタイプを検討してください。
順序に問題が発生した場合、タイミングの問題が発生している可能性が高くなります。正確なタイミングを必要とするデプロイメントでは、イベントリスナーと Custom Event または Direct Call イベントタイプを使用して、実装の堅牢性と一貫性を高める必要があります。

非同期での Launch 埋め込みコードの読み込み

Launch では、 環境 を設定するときに、埋め込みコードを作成する時の非同期での読み込みをオンにする切り替えを提供します。また、非同期読み込みを自分で設定することもできます。
  1. 非同期属性を <script> タグに追加して、非同期的にスクリプトを読み込みます。
    Launch 埋め込みコードの場合、次のコード:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    
    
    を次のように変更します。
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
    
  2. 以前タグの末尾に追加した可能性のあるコードをすべて削除します。
    <script type="text/javascript">_satellite.pageBottom();</script>
    
    
    このコードは、ブラウザーパーサーがページの末尾に到達したことを Launch に伝えます。この時間までに Launch が読み込みおよび実行されていない可能性があるので、 _satellite.pageBottom() を呼び出すと、「Page Bottom」イベントタイプが期待どおりに動作しない場合があります。