サポート

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の無料試用版を用意して、簡単にピーナッツ（レモンスクイージー）を作っていただければ幸いです。

ご質問やお問合せは、[email protected] までお願いします。

※この記事はSpeedCurve社の英文情報を元に、内容を分かりやすく編集、翻訳した記事です。

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

関連記事