サポート

LUXを使用したA/Bテスト

LUXを使用したA/Bテスト 【中級】

ケーススタディでは、LUX(RUM=リアルタイムユーザーモニタリング)をA / BテストJSONPとプリローダーにどのように使用したかを実証しています。

Written by Steve Souders

 

SpeedCurveはSPA(Single Page App)であるため、JSONPを使用してチャートを動的に作成します。それは素晴らしいですが、私たちは常にダッシュボードをより速くする方法を模索しています。
リクエストを動的に行うことの1つの欠点は、ブラウザのプリローダーが使用されていないことです。これはSPAリクエストの後半の要因とはなりませんが、最初のページビューで、プリローダーはいくつかのメリットをもたらす可能性があります、しかし、そうでないかもしれません。
確信が持てませんでしたので、A / Bテストを実施しました。 手短に説明すると:マークアップを使って、最初のJSONPリクエストを実行すると、チャートが300ミリ秒(0.3秒)ほど速くレンダリングされました。

どのようにテストを実行したか

私たちのRUM製品であるLUXを使用してこのA / Bテストを実行するのは簡単です。

1.最初のステップは、JSONP応答が受信されたときにマークするUser Timingメトリックを追加することです。

このメトリックはOnDataReceivedと呼ばれます。一般的なブラウザの中にはUser Timingがサポートされていないものもありますので、mark()(マーク)とmeasure()(計測)をすべてのブラウザで使用できるLUXのshimを使用しています。

   function OnDataReceived(jsondata) {

       LUX.measure(“OnDataReceived”);

       …

上記のコードは、NavigationStartからJSONP応答が処理されるまでの時間を測定します。(すべてのユーザータイミングのマークと測定値はLUXによって自動的にキャプチャされ、顧客のダッシュボードに表示されます)。

2.次に、ユーザーを2つのバケットに分割します。

コントロールバケットでは、JSONPを動的にフェッチし続けます。テストバケットでは、マークアップを使用してJSONPリクエストを行います。
LUXのaddData APIを使用して、これらのバケットを介してRUMデータをセグメント化します。コントロールバケットはJsonpMarkup = no、テストバケットはJsonpMarkup = yesです。
バックエンドのPHPスニペットは次のとおりです。

   if ( rand(0,1) ) {

       echo “<script>onGo();</script>\n”; // request JSONP dynamically

       echo “<script>LUX.addData(‘JsonpMarkup’, ‘no’);</script>\n”;

   }

   else {

       echo “<script src=’/site-data?jsonp=OnDataReceived’></script>\n”;

       echo “<script>LUX.addData(‘JsonpMarkup’, ‘yes’);</script>\n”;

   }

3.結果を確認する(この場合、数分以内)

数分以内に、データは、JsonpMarkup = yesバケットでOnDataReceivedが〜300ミリ秒高速であることを示します。ブラウザプリローダーを使用し、最初のJSONPリクエストにマークアップを使用する方が高速であることを確認するために、A / Bテストを数日間実行しました。

 

重要事項

JavaScriptを使用して動的にリクエストを行う場合、プリローダーにその処理を任せることで、パフォーマンスの好機を逃している可能性があります。これは、JSONPリクエストだけでなく、画像にも適用されます。
この最適化について興味がある場合は、A / Bテストを実行してください。マークアップを使用して最初のリクエストを行うことが、サイトをより速く、ユーザーをより幸せにするかどうかを確認してください。是非、LUXの無料体験版でそれらを簡単に実行してください。

 

 

 

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。