ヒーローレンダリングタイム：UXを測るための新しい指標

（初級）

目的：UX指標の歴史、その理解とUXための新しい指標（Hero Rendering Time、Largest Image Render、H1 Render、Largest Background 、Image Render、Hero Element Timing）の理解について。

Tammy Everts　2017年8月22日

優れたユーザーエクスペリエンス実現の鍵は、訪問者が最も気にするコンテンツをすばやく配信することです。言うのは簡単ですが、とても難しいものです。すべてのサイトには、独自のコンテンツとユーザーエンゲージメントの目標があります。そのため、重要なコンテンツのレンダリング速度を測定することは、今まで難しい課題でした。

だから、Hero Rendering Times（ヒーローレンダリングタイム）の紹介は非常にうれしいのです。これは、ユーザーエクスペリエンスを測定するための新しい測定基準です。 Hero Timesは、ページの最も重要なコンテンツが、ブラウザ内でレンダリングを終了した時間です。これらのメトリックは、現在SpeedCurveユーザーに提供されています。

ここでは、Hero Rendering Timesがどのように機能するかについて説明していきます。その前に、この問題にどのように到達したかについて説明しましょう。

UX指標の歴史

最初は、LoadTime（ロードタイム）がありました。 しかし、ページにはあまりにも多くのものがあることに気付きました（例：サードパーティ、ビューポート外のコンテンツ）。それにより、読み込み時間が長くなり、実際にユーザーが感じた速さを反映していませんでした。

Start render（スタートレンダー）は、LoadTimeよりいい。というのは、コンテンツのレンダリングが開始されたときの計測で、ユーザがページとインタラクト始めることができるときだからです。

もう1つの利点は、シンセティック（合成）で使えるためで、サイトのUXを競合他社と十分比較することができます。しかし、Startrenderは理想的ではありません。なぜなら、コンテンツレンダリングの開始の計測にすぎず、ユーザが実際にページに関わることができないからです。

その後、SpeedIndex（スタートレンダー）に。このメトリックは、WebPageTestで使われ、ページのパーツがいつ表示されるかを示します。SpeedIndexは、ユーザーが実際に何を見ているかという計測問題を初めて示した点で、大きな飛躍的な進歩でした。 Speed Indexは、視覚コンテンツ（例えば、画像およびビデオ）がビューポート内でレンダリングされるときの測定に基づきます。

SpeedIndex（スピードインデックス：SpeedCurveに含まれている）はお気に入りです。しかし、これは、どのようにページが構築されているかに依存するため、すべてのメトリックにフィットするわけではありません。たとえば、私は最近、モバイルのSpeed Indexの結果に混乱しているという顧客と話しました。そのSpeed Indexが速かった理由は、ビューポートがほとんど空だったのに、その「折りたたまれた部分のコンテンツ」のほとんどが画像ではなかったためです。

最近では、TTI（Time to Interact）やTTFMP（Time to First Meaningful Paint）などのメトリクスが注目されています。 しかし、TTIはユーザーエキスペリエンス正確に測定しません。Paint Timing APIで利用できるTTFMPは、ブラウザでコンテンツが表示されたときの様子を示していますが、Start RenderとSpeed Indexのように、すべてのピクセルに等しい値を与えるという弱点があります。言い換えれば、有用なコンテンツと有用でないコンテンツを区別しません。（これは議論すべきトピックで、今後の記事でもこれらの指標について説明します）。

カスタムメトリックは、優れたソリューション(そして、リアルユーザーモニタリングは最高のソリューションです）ですが、追加の開発時間と専門知識を必要とするため、サイトの14％しか使用するのかもしれません。

ユーザーエクスペリエンスを計測するもっといい指標が必要

既存のメトリックの制約と限界を考えると、次のようなソリューションが必要であることがわかりました。

ユーザーが実際にブラウザーで見るものと関係する
ユーザー視点では、すべての画像とページ要素が同じではないことを理解
特定のページで計測した内容をカスタマイズできる。
箱から取り出してすぐに使用でき、使いやすい。

ヒーローレンダリングタイムとはなにか？

まだSpeedCurveユーザーでない場合は、下にあるそれぞれの画面ををクリックし、ライブDemoのダッシュボードでメトリックをチェックしてください。

Largest Image Render （ラージエストイメージレンダー）

その名前が示すように、Largest Image Renderは、ビューポートで最大の画像がレンダリングを終了した時刻を識別します。 この指標は、家庭、商品、キャンペーンのリンク先ページ、のイメージが重要な販売サイトに関係します。

H1 Render （H1レンダー）

H1　Render　最初のH1要素がレンダリングを終了したときの値です。このメトリックは、特にメディアや情報サイトに役立ちます。 H1タグは、通常ヘッダーに囲まれているので、これをコピーしてユーザーにすばやく見せるという合理的な前提があります。

> Case study:NerdWalletがH1 Render Timeを使用してフォントの読み込みを最大30％改善した方法

Largest Background Image Render（ラージエストバックグラウンドイメージレンダー）

いくつかのページでは、バックグラウンドイメージは、最大画像よりも重要です。それを見逃さないようにメトリックを作成しました。

これらのコアHeroメトリックは素晴らしいスタートでした。これらはSpeedCurveでデフォルトでの利用が可能です。また最後に、少し作業が必要なヒーローレンダリングを作成しました。それはモニタリングを微調整することができます

Hero Element Timing　（ヒーローエレメントタイミング）

デフォルト指標は重要です。少なくとも普遍的なページ要素に基づいているべきで、これを使用して競合他社と比較することができます。しかし、あなたのサイト、ページ、ユーザーにユニークなヒーロー要素をもっと微妙に見たいと思うかもしれません。これがHero Element Timingが登場する場所です。

Hero Element Timing – Hero Element Timing APIに基づいています – 検索ボックス、イメージカルーセル、テキストブロックなど、ページ上の特定のヒーロー要素を選択して注釈を付けることができます。

SpeedCurveユーザーの場合は、API仕様の指示に従ってページに注釈を付け、SpeedCurveの結果で結果を確認することができます。（ブラウザが必然的に追いつくとスペックを採用ボーナスとして、ゲームのように速くなります。）

始めましょう！

SpeedCurveアカウントにログインして、コアHero Rendering Timesをチェックし、Hero Element Timingの探索を開始してください。

Load time

Start render

SpeedIndex

TTI（Time to Interact）

TTFMP（Time to First Meaningful Paint）

Custom metrics

Largest Image Render

H1 Rener

Largest Background Image Render

Hero Element Timing