SpeedCurveが扱うテスト結果の指標について　【初級】

2019.8.1 更新

目的：SyntheticおよびLUX（ Real User Monitoring）で使う計測指標の用語集です。SpeedCurveでは、UXを中心に重要視している指標について。

Steve Souders avatar

Written by Steve Souders

SpeedCurveのシンセティック・モニタリングとReal User Monitoring（RUM）では、標準で用意されたパフォーマンス・メトリックを利用したり、独自に作るカスタムメトリックの作成を選ぶことができます。

ユーザーが気にかける最も一般的な指標(メトリック）定義を下記で説明しますが、主にユーザーエクスペリエンスに関連する指標です。

SpeedCurve のシンセティック・テストは、オープンソースのフレームワークであるWebPageTest上に構築されており、WebPageTestで使用するシンセティック・メトリックと同じです。またSpeedCurve のシンセティック・テストでは、独自のHero Rendering Timesのメトリックも追跡します。

SpeedCurve LUX（RUM）は、一般的なリアルユーザモニタリング（RUM）メトリックと、インタラクションタイム（次の入力が可能になるまでの時間）のようなユニークなメトリックを追跡します。

Backend ／バックエンド　（シンセティック・LUX）

「ファーストバイト」とも呼びます。Backendは、最初の操作開始から、HTMLページのファーストバイトがブラウザ（リダイレクトした後）で受信されるまでの時間です。通常、バックエンド処理のための大半が含まれ、DNSの解決、データベースの検索、リモートWebサービスのコール、HTMLのスイッチングなどが、該当します。
Backendは、サーバー上でHTMLを生成し、それをネットワーク経由でユーザーのブラウザーに配信するためにかかる時間と、ほぼ近似値です。ドーモでは、1秒以内の表示を目標値とします。

Start Render／スタートレンダー　（シンセティック・LUX）

StartRender(スタートレンダー）は、操作を始めて白いブランクから最初のコンテンツがブラウザに描画されるまでの測定値です。
ページ上にあるCSSやブロッキングJSは、レンダリングする前にブラウザーでダウンロードして解析する必要があります。
これはcritical rendering path（クリティカルなレンダリングパス）と呼ばれています。Start Renderは、スクリーン上に表示されるまでにユーザーがどれくらい長く待たなければならないかを理解する上で、非常に重要です。ドーモでは、2.0 秒までの表示を目標とします。

Fully Loaded／フリーロード（シンセティック）

Fully Loaded(フリーロード）は、最初の操作開始からDocument Complete後に、2秒間のネットワークアクティビティがない状態までの時間として測定されます。ここではメインページが読み込まれた後にJavaScriptによって引き起こされるアクティビティなどの動きが含まれます。

Page Load／ページロード　（シンセティック・LUX）

Page Load(ページロード以下　Page Load)は、操作の開始からwindow load event (onload)の開始までの時間を測定したものです。
Page Loadは便利なメトリックですが、ページの構築方法によっては、まったく違う結果となることもあります。Page Loadは、画面が表示され、ページ操作ができるまでを正しく表すとは限らないのです。
残念なことに、多くの組織やほかの監視ツールでは、依然として主要な指標として「ページロード」を使っています。
しかし、ユーザーのエクスペリエンスを表す良い指標ではありません。パフォーマンス業界は、この状態から抜け出るべきです。

（window.onload）から離れる

Visually Complete ／ビジュアリーコンプリート（シンセティック）

Visually Complete（ビジュアリーコンプリート）は、表示領域内のコンテンツレンダリングが完了し、ページのロードが続行されたあと、変更される内容がない状態のことです。これは、ユーザーがコンテンツの全画面を認識し、サイトのコンテンツに触れられる状態となるため、ユーザーエクスペリエンスの優れた指標となります。

Speed Index ／スピードインデックス　( シンセティック)

Speed Index (スピードインデックス　以下Speed Index）は、ページの可視部分が表示される平均時間です。表示領域に依存し、視認できるコンテンツをどれくらい速くレンダリングしたかを表します（小さい方が良い）。 Speed Indexは、空白状態から見た目で完全になるまでの表示数値で、ユーザーエクスペリエンスを最も正しく表すデフォルトの指標です。

WebPageTestでは、Speed Index をミリ秒で表わしますが、SpeedCurveでは、他の指標と一致させるために秒に変換しています。

WebPageTestがSpeed Index を計算する方法の詳細については、以下をご覧ください。

WebPageTestのSpeed Index –
Speed Index　どのように動作し意味するもの

Interaction（IX）／インタラクション（LUX）

Webページで、ユーザーがどれくらい素早く関われるかは、ユーザーエクスペリエンスの重要な指標です。 IXなどのメトリックが増加した場合、それは、ページ描画が遅くなったり、デザインの変更がユーザーに対して難解になっている可能性があります。UIでも重要な指標です。このカテゴリでは、ユーザーがそのページをどれくらい速く利用できるかに関する指標です。

First IX Type – ユーザーのページとの最初のインタラクションの内容：スクロール、クリック、キー押し。
First IX Time – 最初のインタラクションが発生したとき（操作開始を基準にして）。
クリックされた要素のID – クリック、またはキー入力されたDOM要素によるIDや、データ-sctrack属性。詳しくはLUX data-sctrack APIを参照してください。

First CPU Idle／ファーストCPUアイドル（シンセティック・LUX）

以前はFirst Interactiveとして知られていました。それがどのように機能するかをより明確に説明するために、Lighthouse 3.0ではFirst CPU Idleに変更されました。

First CPU Idleは、ページが最低限インタラクティブ（操作可能）である時点を測定します。

・画面上のほとんど（全てではない）のUI要素はインタラクティブです。
・このページは平均して、妥当な時間内にほとんどのユーザー入力に応答します。

具体的には、First Contentful Paint後、ブラウザのメインスレッドが50ミリ秒を超えてブロックされることがないのは、5秒の最初のスパンです。2019年1月現在、これはChrome、OperaおよびAndroidから入手できます。

PageSpeed／ページスピード（シンセティック）

PageSpeed(ページスピード、以下Page　Speed)のスコアは、Googleが開発し現在もアップデートしているpageSpeed Insightで使われているベストプラクティスのコーディングルールで、そのスコアは100点満点で表しています。85を超えるスコアは、よいパフォーマンスのページを示します。

Google Lighthouseのスコアと監査

SpeedCurveでは、Chromeで実行されるテストにおいては、Google Lighthouseの監査も行っています。パフォーマンス、PWA、ベストプラクティス、SEOのルールなどを評価し、評価指標として100点満点の各カテゴリーのスコアと、改善すべき推奨事項をダッシュボードにまとめます。

Lighthouseの監査では、常にスコアが一致するように高速3Gネットワークの速度を使用して実行しています。

Hero Rendering Times／ヒーローレンダリング・タイム ( シンセティック)

Hero Rendering Times(ヒーローレンダリング・タイム）は、SpeedCurveに固有の合成メトリックです。ページの最も重要なコンテンツを、ブラウザがレンダリングを終了した時点を測定になります。

Largest Image Render(ラストイメージ・レンダー）は、表示領域内内の最大のイメージがレンダリングを終了した時間を識別します。この指標は、ECサイトに特に重要で、家庭、商品、キャンペーンのイメージとの関係を表します。

Largest Background Image Render（ラージエスト・バックグランド画像レンダリング）は、背景画像に適用されます。場合により最大の画像よりも重要な画像です。このメトリックでは、ユーザーが行方不明にならないことを確認しました。

H1 Render は、最初のH1要素がレンダリングを終了したときに計測します。 H1 Renderは、特にメディアや情報サイトに役立ちます。

H1タグは通常ヘッダーコピーに囲まれているので、これらユーザーにすばやく見せたいという合理的な仮説に基づきます。

First Painted Hero（ファーストペイントヒーロー）とLast Painted Hero（ラストペイントヒーロー）は、コンテンツの最初と最後の重要な部分がブラウザ内で描画されるされるタイミングを示すメトリックです。これらはHero Rendering Timesのための複合メトリックです。

max(h1, (biggest_img || bg_img))

これらの複合メトリックでは、最大テキスト時間（ “h1″）と最大IMG時間（または最大IMGが存在しない場合は最大バックグラウンドイメージ）に対して、最小値と最大値を取って計算しています。

Hero Element Timing（ヒーローエレメントタイミング）は、 – Hero Element Timing API ）に基づいた指標です。これは、検索ボックス、イメージカルーセル、テキストブロックなど、ページ上の特定のヒーロー要素(主役となる要素）に対してですが、これを選択して、注釈を付けることができます。

SpeedCurveユーザーは、API仕様の指示に従い、ページに注釈を付けることできます。また、結果を確認することができます。

Hero Rendering Times：UXを測定するための新しい測定基準
ヒーローレンダリングタイムの測定方法

Customer data／カスタマーデータ（LUX）

LUX APIを使用すれば、必要データの収集すができます。例えば、カートのサイズ、A / Bテスト、コンバージョン情報などです。詳細については、LUX Customer Dataのサポート記事を参照してください。

Custom metrics ／カスタムメトリック　( シンセティック・ LUX)

Custom metrics (カスタムメトリック）を使用すると、特定ページのパフォーマンス結果を測定するできます。例えば、そのページのユーザーエキスペリエンスにとって不可欠と特定したページです。

W3C User Timingの仕様では、Webアプリケーションにカスタムメトリックを追加させるためのAPIも提供しています。これは2つの機能を通じて行われます。

・performance.markは、navigation開始からの時間（ミリ秒単位）を記録します。

・performance.measureは2つのマークの間にデルタ(差分）を記録します

主な機能は、markとmeasureです。ほかのUser Timing APIもありますが、 SpeedCurveはカスタムメトリックをサポートしているため、一度ページにマークとメジャーを追加すると、SpeedCurve LUX（RUM）とSynthetic(合成）の両方でデータを収集できます。

ユーザータイミングとカスタムメトリックについて

DOMコンテンツの表示（シンセティック・LUX）

DOMコンテンツ読み込み時間。最初の操作の開始からDOMコンテンツの追加イベントの終了までを時間として計測します。

First Meaningful Paint／ファーストミーニングフル・ペイント（シンセティック）

First Meaningful Paint（FMP，ファーストミーニングフルペイント）とは、「最大のレイアウト変更が行われ、Webフォントが読み込まれた後のペイント」のことです。 Chromeは “FirstMeaningfulPaint”を、 “blink.user_timing”のトレースイベントでの計測値として公開しています。

（これは、Sakamoto　KunihikoのFirst Meaningful Paintの定義によるものです）

Frontend ／フロントエンド（LUX)

バックエンド時間は、サーバーが最初のバイトを受け取り、クライアントに戻すのにかかる時間です。フロントエンドの時間はほかのすべてです。ここには、フロントエンドの明確な段階で、JavaScriptの実行やページレンダリング、またページ内で参照されているリソースをダウンロードするためのネットワーク時間が含まれます。

CPU （シンセティック）

様々なCPUメトリックは、ブラウザのメインスレッドがどれくらい長く、ページ計算とレンダリングに時間を費やしているかを示します。 CPU時間は「Loading、Scripting、Layout、Painting」の４つのカテゴリに分けられます。次に、SpeedCurveはCPU時間を「Start Render、Page Load、Fully Loaded」のような主要なブラウザイベントによって分割しています。

たとえば、 “CPU Scripting Start Render”は、CPUがStartrenderイベントが着火するポイントまで、Javascript のスクリプト作成に費やした時間を表します。ページが「Layout」などのCPUカテゴリに使ったページの全体の時間を知りたい場合は「Fully Road」メトリックを使用します。