サポート

SpeedCurveダッシュボードを高速化した話(LUXでJSONPをA/Bテストしてみた)

A / BテストJSONPと  RUMのプリローダー

2017年5月2日火曜日

 Steve Souders

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

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

最初のステップは、JSONP応答が受信されたときにマークするUser Timing metric を追加することです。 このメトリックはOnDataReceivedと呼ばれます。 一般的なブラウザの中にはUser Timingがサポートされていないものもありますので、LUXのshimはmark()とmeasure()をすべてのブラウザで使用できるため使用しています。

   function OnDataReceived(jsondata) {
        LUX.measure(“OnDataReceived”);
        …

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

次のステップは、ユーザーを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”;
    }

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

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

関連記事

コメント

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

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

CAPTCHA