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.