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の無料体験版でそれらを簡単に実行してください。
この記事へのコメントはありません。