Core Web Vitals のしきい値の背後にある調査と手法
公開日: 2020 年 5 月 21 日
ウェブに関する主な指標は、ウェブでの実際のユーザー エクスペリエンスの重要な側面を測定する一連のフィールド指標です。Core Web Vitals には、指標と、各指標の目標しきい値が含まれています。デベロッパーはこれを使用して、サイトのエクスペリエンスが「良好」か「改善が必要」か「要改善」かを定性的に把握できます。この投稿では、Core Web Vitals の指標の一般的なしきい値を選択するためのアプローチと、Core Web Vitals の各指標のしきい値がどのように選択されたかについて説明します。
復習: Core Web Vitals の指標としきい値
Core Web Vitals は、Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）の 3 つの指標です。各指標は、ユーザー エクスペリエンスの異なる側面を測定します。LCP は知覚される読み込み速度を測定し、ページのメイン コンテンツが読み込まれた可能性が高いページ読み込みタイムラインの時点をマークします。INP は応答性を測定し、ページを操作しようとしたときにユーザーが感じるエクスペリエンスを定量化します。CLS は視覚的な安定性を測定し、表示されているページ コンテンツの予期しないレイアウト シフトの量を定量化します。
Core Web Vitals の各指標にはしきい値が関連付けられており、パフォーマンスが「良好」、「改善が必要」、「不良」のいずれかに分類されています。
| 良い | 悪い | パーセンタイル | |
|---|---|---|---|
| Largest Contentful Paint | 2,500 ミリ秒以下 | 4,000 ミリ秒を超える | 75 |
| Interaction to Next Paint | 200 ミリ秒以下 | 500 ミリ秒超 | 75 |
| Cumulative Layout Shift | 0.1 以下 | 0.25 を超える | 75 |
また、ページまたはサイトの全体的なパフォーマンスを分類するために、そのページまたはサイトへのすべてのページビューの 75 パーセンタイル値を使用します。つまり、ページビューの 75% 以上が「良好」のしきい値を満たす場合、そのサイトのパフォーマンスは「良好」と見なされます。逆に、ページビューの 25% 以上が「低い」しきい値を満たす場合、そのサイトのパフォーマンスは「低い」と分類されます。たとえば、75 パーセンタイルの LCP が 2 秒の場合は「良好」、75 パーセンタイルの LCP が 5 秒の場合は「低速」と分類されます。
Core Web Vitals 指標のしきい値の基準
このセクションでは、Core Web Vitals 指標のしきい値を評価する基準について説明します。以降のセクションでは、これらの基準が適用されて各指標のしきい値が選択された方法について詳しく説明します。今後、ウェブでの優れたユーザー エクスペリエンスを測定する能力をさらに高めるために、基準としきい値を改善、追加していく予定です。
質の高いユーザー エクスペリエンス
Google の主要な目標は、ユーザーとそのエクスペリエンスの質を最適化することであり、そのため、Google は、Core Web Vitals の「良好」のしきい値を満たすページが、高品質のユーザー エクスペリエンスを提供することを目標としています。
Google では、質の高いユーザー エクスペリエンスに関連するしきい値を特定するため、人間の認識と HCI の調査を検討します。この研究は、1 つの固定しきい値を使用して要約されることがあります。しかし、その基盤となる研究は通常、値の範囲として表現されています。たとえば、ユーザーがフォーカスを失うまでに通常待機する時間に関する調査では、1 秒と表現されることがあります。しかし、その調査の基盤となる研究では、実際には数百ミリ秒から数秒の範囲で表現されています。ユーザーやコンテキストに応じて認識しきい値が異なるという事実は、集計された匿名の Chrome 指標データによってさらに裏付けられています。このデータは、ユーザーがウェブページのコンテンツが表示されるのを待ってからページ読み込みを中止するまでの時間が一定ではないことを示しています。このデータは、スムーズで連続的な分布を示しています。人間の知覚のしきい値と関連する HCI 研究の詳細については、ウェブバイタルの科学をご覧ください。
特定の指標について関連するユーザー エクスペリエンスの調査が利用可能で、文献の値の範囲について合理的なコンセンサスがある場合は、この範囲を入力として使用して、しきい値の選択プロセスをガイドします。Cumulative Layout Shift のような新しい指標など、関連するユーザー エクスペリエンスに関する調査が利用できない場合は、代わりに、指標に対するさまざまな候補しきい値を満たす実際のページを評価し、優れたユーザー エクスペリエンスにつながるしきい値を特定します。
既存のウェブ コンテンツで達成可能
また、サイト所有者が「良好」の基準を満たすようにサイトを最適化できるように、ウェブ上の既存のコンテンツでこれらの基準を達成できるようにしています。たとえば、0 ミリ秒は LCP の「良好」なしきい値として理想的であり、即時読み込みのエクスペリエンスを実現できますが、ネットワークとデバイスの処理レイテンシにより、ほとんどの場合、0 ミリ秒のしきい値は実質的に達成できません。したがって、0 ミリ秒は、Core Web Vitals の LCP の「良好」のしきい値として妥当ではありません。
ウェブに関する主な指標の「良好」のしきい値の候補を評価する際、Chrome ユーザー エクスペリエンス レポート（CrUX）のデータに基づいて、そのしきい値が達成可能であることを確認します。しきい値を達成できることを確認するには、オリジンの少なくとも 10% が「良好」のしきい値を満たしている必要があります。また、フィールド データのばらつきによって、適切に最適化されたサイトが誤って分類されないように、適切に最適化されたコンテンツが常に「良好」のしきい値を満たしていることも確認しています。
逆に、少数のオリジンのみが満たしていないパフォーマンス レベルを特定することで、「低」のしきい値を設定します。「低品質」のしきい値の定義に関連する調査が利用可能な場合を除き、デフォルトでは、パフォーマンスが最も低いオリジンの 10～30% が「低品質」に分類されます。
デバイスごとに同じ条件を使用するか、異なる条件を使用するか
通常、モバイルとパソコンの使用状況は、デバイスの機能やネットワークの信頼性に関して非常に異なる特性を持っています。これは「達成可能性」の基準に大きく影響するため、それぞれに個別のしきい値を検討することをおすすめします。
ただし、達成基準がデバイスによって異なる場合でも、ユーザーが優れたエクスペリエンスと劣悪なエクスペリエンスと見なす基準はデバイスに依存しません。このため、Core Web Vitals の推奨しきい値はデバイスごとに分けられず、どちらにも同じしきい値が使用されます。また、しきい値をよりわかりやすくするというメリットもあります。
また、デバイスが 1 つのカテゴリに適切に分類されないこともあります。これは、デバイスのフォーム ファクタ、処理能力、ネットワークの状態に基づくべきでしょうか？しきい値を同じにすると、複雑さを回避できるという副次的なメリットもあります。
モバイル デバイスの制約が厳しいため、ほとんどのしきい値はモバイルでの達成可能性に基づいて設定されています。これらのしきい値は、すべてのデバイスタイプに共通する実際のしきい値というよりは、モバイル向けのしきい値を表していると考えられます。ただし、ほとんどのサイトではトラフィックの大部分がモバイルから発生しているため、これはそれほど問題ではありません。
基準に関する最終的な考え
候補のしきい値を評価したときに、基準同士が矛盾する場合があることがわかりました。たとえば、しきい値を常に達成することと、常に優れたユーザー エクスペリエンスを提供することの間には、トレードオフが生じる可能性があります。また、人間の知覚に関する研究では通常、値の範囲が提示され、ユーザー行動指標では行動が段階的に変化するため、指標に単一の「正しい」しきい値がないことがよくあります。そのため、ウェブに関する主な指標では、完璧なしきい値は存在せず、複数の妥当な候補の中から選択しなければならない場合もあることを認識しながら、基準に最も適したしきい値を選択しています。「最適なしきい値は何ですか？」ではなく、「どの候補しきい値が基準を最もよく満たしていますか？」という質問に焦点を当てました。
パーセンタイルの選択
前述のように、ページまたはサイトの全体的なパフォーマンスを分類するには、そのページまたはサイトへのすべての訪問の 75 パーセンタイル値が使用されます。75 パーセンタイル値は、次の 2 つの基準に基づいて選択されました。まず、パーセンタイルでは、ページまたはサイトへのアクセスの大部分で目標レベルのパフォーマンスが達成されていることを確認する必要があります。次に、選択したパーセンタイルの値は、外れ値によって過度に影響を受けないようにする必要があります。
これらの目標は、ある程度矛盾しています。最初の目標を達成するには、通常は高いパーセンタイルを選択することをおすすめします。ただし、パーセンタイルが高いほど、外れ値によって結果の値が影響を受ける可能性も高くなります。サイトへのアクセスの一部が不安定なネットワーク接続で行われ、LCP サンプルが過度に大きくなる場合は、こうした外れ値のサンプルによってサイトの分類が決まってしまうことを避けたいと考えています。たとえば、95 番目などの高いパーセンタイルを使用して、100 回のアクセスがあるサイトのパフォーマンスを評価する場合、95 番目のパーセンタイル値が外れ値の影響を受けるには、わずか 5 個の外れ値サンプルで十分です。
これらの目標は多少矛盾しているため、分析の結果、75 パーセンタイル値が妥当なバランスであると判断しました。75 パーセンタイルを基準にすると、サイトへのアクセスのほとんど（4 件中 3 件）で目標レベル以上のパフォーマンスが達成されています。また、75 パーセンタイルの値は外れ値の影響を受けにくい傾向があります。前述の例に戻ると、100 件のアクセスがあるサイトでは、75 番目のパーセンタイルの値が外れ値の影響を受けるには、25 件のアクセスで大きな外れ値のサンプルが報告される必要があります。100 個のサンプルのうち 25 個が外れ値である可能性はありますが、95 パーセンタイルのケースよりもはるかに低くなります。
Largest Contentful Paint
LCP のしきい値は、次のようなエクスペリエンスの質と達成可能性を考慮して設定されました。
エクスペリエンスの質
ユーザーがタスクへの集中を失い始めるまでに待機する時間として、1 秒がよく引用されます。関連する研究を詳しく調べたところ、1 秒は、数百ミリ秒から数秒までの値の範囲を近似的に表すものであることがわかりました。
1 秒の基準としてよく引用される 2 つのソースは、Card らと Miller です。このカードは、ニューウェルの統合認知理論を引用して、1 秒の「即時応答」のしきい値を定義します。Newell は、即時応答を「約 1 秒以内（約 0.3 秒から 3 秒程度）に何らかの刺激に対して行う必要がある応答」と説明しています。これは、「認知に関するリアルタイムの制約」に関する Newell の議論に続き、「認知的考慮事項を誘発する環境とのインタラクションは数秒で行われる」と述べられています。その範囲は約 0.5 ～ 2 ～ 3 秒です。1 秒のしきい値としてよく引用されるミラー氏は、「人間が機械通信で実行できるタスクは、応答遅延が 2 秒を超えると、性質が大きく変わり、さらに 1 秒ほど延長される可能性がある」と述べています。
Miller と Card の調査では、ユーザーがフォーカスを失うまでに待機する時間の範囲が約 0.3～3 秒と説明されています。これは、LCP の「良好」な基準がこの範囲内にあることを示唆しています。また、既存の First Contentful Paint の「良好」しきい値が 1 秒であり、Largest Contentful Paint は通常 First Contentful Paint の後に発生することを踏まえ、LCP の候補となるしきい値の範囲を 1 秒から 3 秒にさらに絞り込んでいます。この範囲から条件に最も適合するしきい値を選択するために、次にこれらの候補のしきい値の達成可能性を確認します。
達成可能性
CrUX からのデータを使用して、LCP 候補の「良好」しきい値を満たすウェブ上のオリジンの割合を判断できます。
| 1 秒 | 1.5 秒 | 2 秒 | 2.5 秒 | 3 秒 | |
|---|---|---|---|---|---|
| phone | 3.5% | 13% | 27% | 42% | 55% |
| パソコン | 6.9% | 19% | 36% | 51% | 64% |
1 秒のしきい値を満たすオリジンは 10% 未満ですが、1.5～3 秒の他のしきい値は、少なくとも 10% のオリジンが「良好」なしきい値を満たすという要件を満たしているため、引き続き有効な候補となります。
また、選択したしきい値が、適切に最適化されたサイトで常に達成できるように、ウェブ全体でパフォーマンスが優れたサイトの LCP パフォーマンスを分析し、これらのサイトで常に達成可能なしきい値を決定しています。具体的には、パフォーマンスの高いサイトの 75 パーセンタイルで一貫して達成可能なしきい値を特定することを目指しています。1.5 秒と 2 秒のしきい値は常に達成できるわけではありませんが、2.5 秒は常に達成できます。
LCP の「低い」しきい値を特定するには、CrUX データを使用して、ほとんどのオリジンで満たされているしきい値を特定します。
| 3 秒 | 3.5 秒 | 4秒 | 4.5 秒 | 5 秒 | |
|---|---|---|---|---|---|
| phone | 45% | 35% | 26% | 20% | 15% |
| パソコン | 36% | 26% | 19% | 14% | 10% |
4 秒のしきい値の場合、スマートフォンからの約 26%、パソコンからの約 21% が低品質と分類されます。これは 10～30% のターゲット範囲内であるため、4 秒は許容される「低い」しきい値であると結論付けられます。
したがって、Largest Contentful Paint は 2.5 秒が妥当な「良好」しきい値であり、4 秒が妥当な「不良」しきい値であると結論付けます。
Interaction to Next Paint
INP のしきい値は、次のようなエクスペリエンスの質と達成可能性を考慮して設定されました。
エクスペリエンスの質
研究では、約 100 ms までの視覚フィードバックの遅延は、ユーザー入力などの関連するソースによって発生していると認識されるという結論が、かなり一貫して得られています。これは、理想的な Interaction to Next Paint の「良好」なしきい値がこれに近いことを示唆しています。
Jakob Nielsen のよく引用されるレスポンス時間: 3 つの重要な制限では、システムが即座に反応しているとユーザーが感じる上限として 0.1 秒が定義されています。Nielsen の引用では、Miller と Card による Michotte の 1962 年の因果関係の認識を引用しています。Michotte の研究では、被験者に「画面上の 2 つの物体」が表示されます。オブジェクト A が動き出し、B に向かって移動します。B に接触した瞬間に停止し、B が動き出して A から離れます。」Michotte は、オブジェクト A が停止してからオブジェクト B が動き始めるまでの時間間隔を変化させます。約 100 ミリ秒の遅延の場合、参加者はオブジェクト A がオブジェクト B の動きを引き起こしていると印象付けます。およそ 100 ミリ秒から 200 ミリ秒の遅延では、因果関係の認識が混在し、200 ミリ秒を超える遅延では、オブジェクト B の動きがオブジェクト A に起因するものとして認識されなくなります。
同様に、Miller は「コントロールの有効化に対するレスポンス」のレスポンスしきい値を「通常、キー、スイッチ、その他のコントロール メンバーの移動によって、物理的に有効化されたことを示すアクションの指示」と定義しています。このレスポンスは、オペレーターによって誘発された機械的な動作の一部として認識される必要があります。時間遅延: 0.1 秒以下」と「キーを押してから視覚的なフィードバックが表示されるまでの遅延は 0.1～0.2 秒以下である必要があります」
近年、Kaaresoja らは Towards the Temporally Perfect Virtual Button で、タッチスクリーン上の仮想ボタンをタップしたときと、その後に表示されるボタンがタップされたことを示す視覚的なフィードバックとの同時性に関する知覚を、さまざまな遅延について調査しました。ボタンの押下と視覚的なフィードバックの間に 85 ミリ秒以下の遅延がある場合、参加者は 75% の確率で視覚的なフィードバックがボタンの押下と同時に表示されると報告しています。さらに、遅延が 100 ミリ秒以下の場合、参加者は、ボタンの押下について一貫して高い知覚品質を報告しました。100 ～ 150 ミリ秒の遅延では知覚品質が低下し、300 ミリ秒の遅延では非常に低いレベルに達しました。
以上を踏まえて、調査では 100 ミリ秒が、Web Vitals の Next Paint に対するインタラクションのしきい値として「良好」であると結論付けています。さらに、300 ms 以上の遅延で品質レベルが低いとユーザーから報告されていたため、これが「低い」しきい値であることが理想的です。
達成可能性
CrUX のデータを使用して、ウェブ上のオリジンの大部分が 75 パーセンタイル（75% の値）で 200 ms の INP「良好」しきい値を満たしていることが判明しました。
| 100 ミリ秒 | 200 ミリ秒 | 300 ミリ秒 | 400 ミリ秒 | 500 ミリ秒 | |
|---|---|---|---|---|---|
| phone | 12% | 56% | 76% | 88% | 92% |
| パソコン | 83% | 96% | 98% | 99% | 99% |
また、サイトへのアクセスの割合が高い、ローエンドのモバイル デバイスで INP に合格する可能性にも特に注目しました。これにより、200 ミリ秒のしきい値が適切であることがさらに確認されました。
エクスペリエンスの質と達成可能性の基準に関する調査で裏付けられた 100 ミリ秒のしきい値を考慮し、優れたエクスペリエンスには 200 ミリ秒が妥当なしきい値であると結論付けます
LCP の「低い」しきい値を特定するため、CrUX データを使用して、ほとんどのオリジンで満たされるしきい値を特定します。
| 100 ミリ秒 | 200 ミリ秒 | 300 ミリ秒 | 400 ミリ秒 | 500 ミリ秒 | |
|---|---|---|---|---|---|
| phone | 88% | 44% | 24% | 12% | 8% |
| パソコン | 17% | 4% | 2% | 1% | 1% |
つまり、「低い」しきい値を 300 ミリ秒に設定できます。
ただし、LCP や CLS とは異なり、INP は人気度と逆相関になります。人気があるサイトほど複雑になることが多く、INP が高くなる可能性が高くなります。インターネット ブラウジングの大部分を占める上位 10,000 サイトを見ると、より複雑な状況が見えてきます。
| 100 ミリ秒 | 200 ミリ秒 | 300 ミリ秒 | 400 ミリ秒 | 500 ミリ秒 | |
|---|---|---|---|---|---|
| phone | 97% | 77% | 55% | 37% | 24% |
| パソコン | 48% | 17% | 8% | 4% | 2% |
モバイルでは、300 ミリ秒の「低い」しきい値は、人気のあるサイトの大部分が達成可能性の基準から外れた「低い」と分類されるのに対し、500 ミリ秒はサイトの 10 ～ 30% の範囲でより適合します。また、これらのサイトでは 200 ミリ秒の「良好」というしきい値も厳しくなっていますが、モバイルでは 23% のサイトがまだ合格しているため、10% の最小合格基準をクリアしています。
このため、ほとんどのサイトでは 200 ms が妥当な「良好」のしきい値であり、500 ms を超えると「不良」のしきい値であると結論付けています。
Cumulative Layout Shift
CLS のしきい値は、次のようなエクスペリエンスの質と達成可能性を考慮して設定されています。
エクスペリエンスの質
Cumulative Layout Shift（CLS）は、ページの表示コンテンツがどの程度シフトするかを測定する新しい指標です。CLS は新しい指標であるため、この指標のしきい値を直接示す調査は確認されていません。そのため、ユーザーの期待に沿ったしきい値を特定するために、さまざまなレイアウト シフト量を持つ実際のページを評価し、ページ コンテンツの使用時に大きな中断を引き起こす前に許容されると見なされるシフトの最大量を決定しました。社内テストでは、0.15 以上のシフトレベルは常に中断と見なされる一方で、0.1 以下のシフトは目立つものの、過度に中断的ではないことがわかりました。したがって、レイアウト シフトがゼロであることが理想的ですが、0.1 までの値が「良好な」CLS しきい値の候補であると結論付けました。
達成可能性
CrUX のデータに基づくと、オリジンの 50% 近くで CLS が 0.05 以下であることがわかります。
| 0.05 | 0.1 | 0.15 | |
|---|---|---|---|
| phone | 49% | 60% | 69% |
| パソコン | 42% | 59% | 69% |
CrUX のデータでは 0.05 が CLS の「良好」な基準となる可能性があると示唆されていますが、レイアウトの乱れを回避するのが難しいユースケースもあることを認識しています。たとえば、ソーシャル メディアの埋め込みなど、サードパーティの埋め込みコンテンツの場合、埋め込みコンテンツの高さが読み込みが完了するまで不明なことがあります。このため、レイアウト シフトが 0.05 を超えることがあります。したがって、多くのオリジンが 0.05 のしきい値を満たしている一方で、CLS のしきい値を 0.1 に緩和することで、エクスペリエンスの質と達成可能性のバランスが取れると結論付けています。今後、サードパーティの埋め込みによって生じるレイアウトの変化に対処するソリューションがウェブ エコシステムで特定され、Core Web Vitals の今後の反復処理で、より厳格な CLS「良好」しきい値（0.05 または 0）を使用できるようになることを願っています。
また、CLS の「低い」しきい値を決定するために、CrUX データを使用して、ほとんどのオリジンで満たされるしきい値を特定しました。
| 0.15 | 0.2 | 0.25 | 0.3 | |
|---|---|---|---|---|
| phone | 31% | 25% | 20% | 18% |
| パソコン | 31% | 23% | 18% | 16% |
しきい値を 0.25 に設定すると、スマートフォンからのアクセスの約 20%、パソコンからのアクセスの約 18% が「低」に分類されます。これは 10～30% の目標範囲内であるため、0.25 が許容される「低品質」のしきい値であると結論付けました。