ウェブサイトのフリッカーを管理する方法

フリッカーとは何ですか？

ウェブページは、ブラウザが変更を読み込んで処理するのに時間がかかるときにちらつくことがあります。そのような場合、ブラウザはテスト要件を満たして変更を適用する前に、数秒間ウェブページを元の状態または制御状態で表示します。これにより、変更が適用される間、ウェブページが目に見えてちらつくことになります。

たとえば、新しい MoEngage コンテンツをアプリケーションで表示する前に、 フリッカー によってユーザーインターフェイス要素に一時的な中断が発生するのを観察したことがあるかもしれません。

フリッカーの影響

フリッカーは、以下の方法でユーザーの信頼に悪影響を与える可能性があります：

ネガティブな印象 : コンテンツの読み込み中にちらついたり、点滅したりするウェブページは、不安定または設計が不十分に見えるかもしれません。ユーザーはサイトの信頼性やプロフェッショナリズムに疑問を抱き始めるかもしれません。
遅いパフォーマンスの認識 : フリッカーは、ウェブサイトが鈍い、またはコンテンツが遅れて読み込まれているという印象を与える可能性があります。ユーザーは、ウェブサイトのコンテンツや全体的なパフォーマンスに問題があると考えるかもしれません。ウェブサイトの遅い動作により、ユーザーは信頼を失い、さらにインタラクトすることをためらう可能性があります。
未完成または信頼性のない情報 : ユーザーがアプリケーションのコンテンツを読んだり対話したりしようとするとき、ちらつきは情報や機能が信頼できない、または不完全であるという印象を与える可能性があります。ユーザーはコンテンツの正確性や有効性に対する信頼を失うかもしれません。
ユーザーエクスペリエンスの中断 : フリッカーは迷惑で気を散らすことがあり、怒りやフラストレーションを引き起こす可能性があります。ユーザーがブラウジング体験で頻繁にフリッカーを認識すると、ウェブサイトがスムーズで楽しいユーザーエクスペリエンスを提供する能力に対する信頼を失うかもしれません。

一般的に、ちらつきはプロフェッショナリズム、サイトの信頼性、読み込み速度、コンテンツの正確性に対する認識を損なうことで信頼を損なう可能性があります。シームレスでフリッカーのない体験を提供することは、信頼を築き、ユーザーがウェブサイトとその提供物に自信を持てるようにするために不可欠です。

ちらつきの原因

フリッカーは、ウェブサイト上のスクリプトとタグ管理のインストール方法、A/Bテストツールの読み込み方法（同期対非同期）、SDKのサイズ、および実施されている実験の数などの要因によって引き起こされる可能性があります。

直接インストールとタグマネージャー

タグマネージャーはJavaScriptコードの実装と展開を簡素化しますが、通常、ウェブサイトにJavaScriptの実行層を追加し、パフォーマンスのオーバーヘッドを引き起こす可能性があります。これはページの読み込み時間やユーザー体験に影響を与える可能性があります。特に、複数のタグやスクリプトが関与している場合はなおさらです。この制限を克服するために、次のことを行うことができます:

実行を優先する

サードパーティのコードを <head> の先頭に配置することで、ページ上の他のスクリプトやコンテンツよりも前に読み込まれ、実行されるようになります。これにより、コードはできるだけ早く実行され、初期化の遅延を減らすことができます。

warning

警告

MoEngageは、 <head> 要素の最初にWebパーソナライゼーションSDKをインストールすることを推奨しています。
ウェブページのタグの最後にコードが追加されると、ブラウザはウェブページのコンテンツが読み込まれた後の最後にのみコードを実行するため、ちらつきが発生します。

実行を加速し、可視性を向上させる

ページロードプロセスの早い段階でパーソナライズSDKを読み込むことで、関連するすべての機能の追跡をすぐに開始できます。

A/Bテストツールを読み込んでいます

A/Bテストは、ウェブページまたはアプリの2つのバージョンを互いに比較し、どちらがより良いパフォーマンスを発揮するかを判断して表示します。アプリケーションに適用するバリエーションについては、A/B テストスクリプトを次のいずれかの方法で読み込み、実行する必要があります:

同期読み込み

同期JavaScript読み込みでは、スクリプトは1行ずつ読み込まれ、実行されます。次のスクリプトに移動するか、ページをさらにレンダリングするために、ブラウザはレンダリングを一時停止し、各スクリプトが読み込まれて実行されるのを待ちます。

synchronous loading.png

非同期読み込み

非同期JavaScript読み込みでは、スクリプトはページがまだ読み込まれている間に並行して読み込まれ、実行されます。ブラウザはモジュールの読み込みタイミングに依存せず、古いスクリプトがバックグラウンドで読み込まれている間も他のリソースのレンダリングと読み込みを続けます。

asynchronous loading.png

非同期スクリプトの読み込みはページの全体的な読み込みを速くするかもしれませんが、A/Bテストスクリプトが後で読み込まれるとちらつきが発生する可能性があります。ちらつきは、最初に元のページがレンダリングされ、その後A/Bテストスクリプトが読み込まれて実行されると変化が適用されるために発生します。これはユーザーにとって目立つ視覚的変化をもたらす可能性があり、通常はA/Bテストのシナリオでは望ましくありません。

warning

警告

MoEngageは、ちらつきを防ぐためにWebパーソナライズスクリプトの同期読み込みを推奨しています。

SDK仕様

SDKサイズ

ページの読み込み時間に大きな影響を与える別の要因は、SDKのサイズです。これは、ブラウザがそれをダウンロードするのにどれだけの時間がかかるかを決定します。大きなSDKサイズは、コードのダウンロードと実行にかかる時間を増加させ、その結果、ウェブページがコンテンツを読み込む時間が増加します。

info	Information MoEngage WebパーソナライゼーションSDKはわずか数kBで、ダウンロードと実行にかかる時間を大幅に短縮します。

実験の数

訪問者のためにパーソナライズされたコンテンツをレンダリングするのにかかる時間は、SDKによって取得される体験の数にも依存します。

MoEngageは、選択したターゲット基準に基づいて、アクティブで関連性のある訪問者体験のみを提供します。さらに、MoEngageは、訪問者がアクセスしたウェブページに特有の体験を優先し、ウェブサイトの残りの部分に設定された体験を並行して取得するため、ウェブページのパーソナライズプロセスを大幅に加速します。

これに加えて、訪問者に提供される体験には、元のコンテンツと比較して特定のウェブページ要素に更新または追加される変更のみが含まれています。これにより、ペイロードサイズが削減され、配信時間が短縮され、変更のレンダリングが迅速化されます。

フリッカーを最小限に抑える

アンチフリッカースニペット

どうやって機能しますか？

ウェブページのコンテンツは、コード内の特定の設定を使用して隠すことができます。これは、変更を加えた後にコンテンツをすぐに隠して再表示するために行われます。

覚えておくべきポイント :

コードの読み込みや実装に問題がある場合、ユーザーは数秒間、あるいはそれ以上の間、空白のページや画面を見ることがあります。コンテンツが数ミリ秒以内に表示されることを確認することが重要であり、変更が行われるのに十分な時間を確保します。
特定の時間枠内、通常は数秒以内に変更が表示されない場合は、隠されたコンテンツを表示し、後で変更を適用することが重要です。これにより、ユーザーはウェブサイトが遅いまたは正しく動作していないと考えることを防ぎます。

MoEngage アンチフリッカースニペットは、パーソナライズされた変更が訪問者に表示されるまで、デフォルトで1.5秒間ページのコンテンツを非表示にします。ほとんどすべてのケースで、変更が適用され、ページの内容がユーザーに0.5秒以内に表示されます。デフォルトの1.5秒の期間は、 MAX_RENDER_TIME 変数の値を更新することで変更できます。

サーバーサイドパーソナライズに切り替える

サーバーサイドのパーソナライズに切り替えることは、A/Bテストシナリオでのちらつきを最小限に抑えるための実行可能なアプローチとなる可能性があります。サーバーサイドのパーソナライズは、ユーザーに配信する前にサーバー上でウェブページの異なるバリエーションをレンダリングすることを含みます。この方法では、ユーザーは最初から望ましいバリエーションを見ることができ、クライアント側の変更によるちらつきを排除します。

サーバーサイドのパーソナライズによるフリッカーの最小化の利点は以下の通りです：

バリエーションの即時表示 : サーバーサイドのパーソナライズにより、サーバーは完全に修正されたページをユーザーに提供し、初回の読み込みから希望するバリエーションが表示されることを保証します。これにより、他のアプローチで発生する可能性のあるクライアントサイドの変更によるちらつきが排除されます。
クライアントサイドリソースへの依存なし : サーバーサイドパーソナライゼーションでは、バリエーションはサーバー上で生成され、追加のクライアントサイドリソースをロードまたはJavaScriptを実行する必要がありません。これにより、遅延を引き起こす可能性のある遅いスクリプトや依存関係によるリスクが軽減され、さらにフリッカーの可能性が最小限に抑えられます。
改善されたユーザーエクスペリエンス : フリッカーを避けることで、サーバーサイドのパーソナライズはより一貫性がありシームレスなユーザーエクスペリエンスを提供します。ユーザーは最初から望ましいバリエーションを見ており、その結果、エンゲージメントと満足度が向上します。