サポート

LUXの新しいJavaScriptダッシュボードの紹介

Steve Souders

2019年4月3日水曜日

低速なネットワークやデバイスを使用している世界中のユーザーのパフォーマンスを向上させようとする組織の努力に伴い、JavaScriptへの注目は集まり続けています。LUXの新しいJavaScriptダッシュボードは、高速で楽しいユーザーエクスペリエンスを実現するための問題と解決策を特定するのに役立ちます。

LUXはSpeedCurveのリアルユーザーモニタリング製品です。私たちは2年前にLive,Users,Performance,Designという4つのダッシュボードを立ち上げました。今日、さらに2つのLUXダッシュボード、JavaScriptとJS Errorsが追加されました。これらの新しいダッシュボードでは、First CPU IdleやFirst Input Delayなどの新しい指標や,CPU時間とバウンスレートの相関関係を示す相関グラフなどの新機能によって、JavaScriptがサイトやユーザに与える影響を確認することができる。

 

LUX JavaScriptダッシュボード

10年前、Webページの速度を低下させる主なボトルネックはネットワークでした。昨今の、特にモバイルデバイスではブラウザのCPUであり、JavaScriptは他のすべてのブラウザの動作を合わせたときよりも多くのCPUを消費する。そのためLUXは、JavaScriptがCPUとユーザーに与える影響に重点を置いています。

LUXは、Long Tasks APIを使用してCPUを測定します。「long task」は、実行に50㎳以上かかるブラウザイベントとして定義されます。LUXには、すべての長いタスクの合計、最長ロングタスク、およびページ内のロングタスクの数が表示されます。この例では、3月22日に行われた改善により、CPU時間が1/2以上削減されました。

タスクが長いと、ページがぎこちなくなります。jankinessを取得する2つのメトリックを次のLUXチャートに示します。

  • First Input Delay(FID)は、ユーザーがページを操作するタイミング(e.g、クリック、スクロール)と、ブラウザーがその操作に対応できるタイミングとのギャップを測定します。
  • First CPU Idleは、ページがジャッキーでなくなるまでにかかる時間を測定します。

LUX JavaScriptダッシュボードでは,チームが次に何をすべきかを判断する上で、ヒートマップを使用している。以下のヒートマップは、さまざまなページ・タイプがJavaScriptメトリックのセットに対してどれだけうまく機能しているかを示しています。緑がgood、黄色がok、赤がpoor。最初の3つのページタイプでは結果がまちまちですが、4番目のページは全体的にうまくいっていません。大量のトラフィック(5%)を占めるため、このページに焦点を当てることは、多くのユーザーに影与える影響を改善する最大のチャンスです。

LUX JavaScriptダッシュボードには、ページ・タイプのヒートマップが表示されるだけでなく、デバイス・タイプとブラウザーのヒートマップも表示されます。以下のデバイスタイプのヒートマップは、タブレットに最も注意が必要であることを示しています。

 

JSエラーダッシュボード

JavaScriptの改善に重点を置き、JavaScriptの改善に向けた活動を強化するには、エラーを追跡してJavaScriptの機能が損なわれないようにすることが重要です。LUX JSエラー・ダッシュボードは、エラーの監視と分離に役立ちます。

エラーの合計数のほかに、次の表にエラー率を示します。これは、トラフィックのピークと谷間(例:週末)が規則的で、エラーの数は変動してもエラー率はほとんど変わらない場合に便利です。この例では、3月27日のJavaScriptエラーによって両方のメトリックが急上昇しました。

「≪上位エラー|Top Errors|emdw≫」リストを使用すると、顧客に最も影響を与えるエラーを識別できます。LUXエラー・ダッシュボードには、主要なブラウザ、リージョンおよびページにわたるエラーの分布も表示されます。エラー・メッセージをクリックすると、ドリルダウンできます。

「スクリプトエラー」は通常、エラーの詳細が不明なクロス・オリジン・スクリプトから取得されます。これは、サードパーティ製のスクリプトだけでなく、CDNなど、別のドメインから提供される独自のスクリプトでも発生する可能性があります。エラーの詳細を表示するには、crossorigin SCRIPT属性Access-Control-Allow-Originresponse headerを含める必要があります。

個々のエラーの詳細により、問題の検出と修正が容易になります。問題のスクリプトの名前を指定します。インライン・スクリプトでエラーが発生した場合は、「HTMLドキュメント」を指定します。行番号と列番号は、エラーが発生した場所を正確に追跡するのに役立ちます。

 

はじめに

すでにLUXユーザーであれば、これらのJSダッシュボードはLUXメニューで利用できます。LUXを使っていない人は、無料で試してみてください。

 

関連記事 https://speedcurve.com/blog/javascript-growth/

関連記事

コメント

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

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

CAPTCHA