配信前のプレビューと本番配信では、配信前プレビューの方が本番配信よりもコンテンツ更新のタイミングが遅くなります。具体的なタイミングの違いは下記になります。

  • 配信前プレビュー:loadイベント後に書き換えが実行される
  • 本番配信:DOMContentLoadedイベント発生直後に書き換えが実行される
    • load:HTMLのレンダリングに必要なリソース(画像、jsファイルなど)がすべて読み込まれた時に発生するイベント
    • DOMContentLoaded:HTMLのすべてのDOM要素が読み込まれた時に発生するイベント

null

配信前プレビューの方が書き換えの実行が遅くなる理由

本番配信時は<head>内に設置されたBlocksタグから設定情報を同期的に読み込むことで書き換えを実行します。しかし、配信前プレビューの場合はサイトへ配信前のため、設定情報はBlocksタグには書き込まれず、専用のjsファイル(pre-builder.js)が新たに読み込まれることによって書き換えが行われます。そのため、処理順番に差分が発生します。

これによる影響

Blocksでの設定内容によっては本番配信時と挙動が異なる、配信前プレビューが動かない、といったことが発生する場合がございます。

発生するケース例

  • Blocksで書き換え後のブロックに対して、サイト側のJavaScriptを実行して何かを行いたい場合
    • 本番配信時ではBlocksでの書き換え→サイト側のJavaScript実行という順番で処理されますが、配信前プレビューの場合、サイト側のJavaScript実行タイミングにもよりますが、サイト側のJavaScript実行→Blocksでの書き換えという順番で処理がされます。そのため、処理順番がずれることによって配信前プレビューした際に表示崩れが起きます。

上記を回避するために、実際にサイトにブロックを配信する場合は、テスト配信を行っていただくことを推奨しています。