ページ遷移こそが重要だ。ニュースサイトで離脱が22%減少、ショッピングサイトで24%減少

Core Web Vitalsは、Googleによるビジネスオーナー、マーケッター、開発者を対象にした、ユーザーエクスペリエンス（UX)を向上させる機会を与える取り組みです。

これらの指標は、ヒューマンコンピュータ・インタラクション（HCI）およびユーザー・エクスペリエンス（UX）の分野で、多くの研究者と広範な研究によって導き出されています。しかし、適切な指標や、しきい値を見極めることは、研究論文を手に取って答えを探すほどの単純なことではありません。

ページではなく、遷移が重要

重要な約束を果たすために、見慣れない街を歩いていると想像してみてください。途中、様々な通りや街の中心部を歩きます。しかし、あちこちで緩んだ敷石で躓いたり、開くのを待たなければならないような遅い自動ドアがあったり、予期せぬ工事の迂回路で道に迷ったりします。これらのイベントはすべて、進行を妨げ、ストレスを増大させ、目的地に到達するのを妨げます。

Webを利用している人も、カスタマージャーニー（遷移）の途中で、それぞれの行動は連続したフローを構成します。そして、現実の世界と同じように、遅延によって中断されたり、タスクに気を取られたり、ミスをしたりすることがあります。これらのイベントは、満足度の低下や、サイトの離脱やカスタマージャーニーの放棄につながります。

いずれの場合も、中断や障害物を取り除くことが、スムーズな移動とユーザーの満足度を高める鍵となります。

では、Web上でユーザーを悩ませるものは何なのでしょうか？

読み込み待機による中断が発生

Webユーザーが経験する最も一般的な割り込みは、ページの読み込み待ちです。開発者にとって、ページの読み込みは個々のイベントであり、ある程度の遅延は避けられないと感じるかもしれません。

しかし、ユーザーがニュースで最近の出来事を知ったり、新製品を調べたり、カートに商品を追加して購入したりするため、ユーザーの移動の途中で、ページの読み込みは頻繁に発生します。ユーザーの観点からは、特定のページを読み込むことは自然な中断を表すものではありません。まだ目標に達成していないため、遅延に対する耐性が低くなっているのでしょう。(注1)　つまり、ユーザー遷移がスムーズに行えるように、ページを高速に読み込む必要があることを意味します。

(注1)¹ Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9-11, 1968, fall joint computer conference, part I (pp. 267–277).

どのくらいの速さがあれば十分なのか？　

それは間違った質問です。その理由は主に3つあります。

インスタンスの放棄、ユーザー満足度、タスクのパフォーマンスなど、答えは検討する結果によって異なります。さまざまな研究がさまざまな結果を生み出しています。

次に、遅延の影響は、ユーザーの性格、過去の経験、タスクの緊急性によって大きく異なります。(注2)

たとえば、サイトに滞在したユーザーの数を、ユーザーが経験した遅延の関数としてプロットすると、X秒後に100％から0％への明確な変化は表示されません。代わりに、次のようなスムーズな分布が表示されます。

(注2)² Shneiderman, B. (1984). Response Time and Display Rate in Human Performance with Computers. ACM Computing Surveys (CSUR), 16(3), 265–285.

このカーブのどの点を目指しますか？これはスピードにどれだけ投資し、どれだけのユーザーを失うのか？という問いです。

最後に、遅延の影響は文脈や状況によって異なります。ニュースサイト、ショッピングサイト、旅行サイトなどは、さまざまな種類のユーザー遷移の一部であり、上記のカーブ全体がそれぞれ異なって見える場合があります。コンテキスト内であっても、サイトデザインとユーザーの行動は時間の経過とともに変化する可能性があります。

これは期待していた以上に難しいことです。表示スピードの異なるレベルでの結果の分布には有用なヒントが含まれています。特に、この分布は、特定のパフォーマンスレベルでどれだけのユーザーを失う可能性があるか（または現在失っているか）を明らかにしてくれます。

さらに、異なるポイントでの曲線の急峻さから、特定量だけスピードを最適化した場合に、どれだけのリターンが得られるか？を知ることができます。これらはトレードオフの決定における重要な要素です。

したがって、１つの魔法の数字を探すのではなく、私たちの目標は、研究で有用な値の範囲と合理的なガイドラインを見つけることです。

例えば

• 表示スピードの遅延は、満足度と再訪意欲を低下させることが明らかになりました。馴染みないサイトでは、2秒の遅延で大部分が下がり、馴染みあるサイトではそれ以上の遅延ですべて底をつきました。馴染みないサイトでは、タスクのパフォーマンスも低下し、4秒の遅延でほとんどの下がりきりました。(注3)
• ・別の研究では、Webページ上のネストされたメニューをナビゲートしました。各パネルの読み込みには、3 秒間隔で様々な遅延を設定しました。遅延時間を0秒から3秒に増やすと、満足度が低下し、9秒から12秒にすると再び満足度が低下しました。戻る意思も12秒の遅延で低下しました。参加者の中には、6秒の遅延でサイトが遅いと発言する人もいました。(注4)
• ・ある調査によると、モバイルWebユーザーは、一度に4?8秒以上画面に注意を向け続ける傾向がありませんでした。(注5)つまり、ページが読み込まれる前に注意を逸らしてしまうと、最終的にどのくらいの時間でページが表示されるのか、さらに遅延して見送ってしまうことになります。したがって、5秒のロード時間は10秒の実効遅延に変わる可能性があります。
• ・システムの応答速度は、人間がインタラクティブに作用するときに経験する遅延に合致するものでなければなりません。これにより、応答には約1,4秒かかるというガイドラインガイダンスが導き出されました。(注4)

(注3)Galletta, D. F., Henry, R., McCoy, S. & Polak, P. (2004). Web Site Delays: How Tolerant are Users? Journal of the Association for Information Systems, 5(1), 1.
(注4)Hoxmeier, J. A. & DiCesare, C. (2000). System Response Time and User Satisfaction: An Experimental Study of Browser-based Applications. AMCIS 2000 Proceedings, 347.
(注5)Oulasvirta, A., Tamminen, S., Roto, V. & Kuorelahti, J. (2005). Interaction in 4-Second Bursts: The Fragmented Nature of Attentional Resources in Mobile HCI. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 919–928).
(注6)Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human factors in computing systems (pp. 181-186).
Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9-11, 1968, fall joint computer conference, part I (pp. 267–277).
Nielsen, J. (1993). Response Times: The 3 Important Limits. Nielsen Norman Group.

実証的研究は、ハードしきい値ではなく、ばらつきが大きく、徐々に低下するデータから導き出されたものであり、その他は理論からの予測に基づいています。しかし、これらの研究をまとめると、ロード時間を数秒以内に抑えることを目標にする価値があることが示唆されています。

LCP (Largest Contentful Paint) メトリックは、ページ間のナビゲーションがユーザーに完全に表示されているかどうかを測定します。ページ読み込みの 75% で、 LCP を 2.5 秒未満に保つことを目指すようお勧めします。この推奨事項は、現在のウェブに関する Chrome の分析に基づいており、実際には十分なサイトで実現可能であることを目的としています。この分析の詳細については、「Core Web Vitalsのしきい値の定義」を参照してください。

不安定性による中断とエラー

ほとんどのWebページはいくつかの要素をロードする必要があり、多くの場合、これらは段階的にロードされます。これは良いことで、一部のコンテンツができるだけ早く表示されると、ユーザーはすべてが読み込まれるのを待たずに、目標に向かって前進し始めることができます。

しかし、他の要素の読み込みに伴って、既に表示されている要素の位置が移動してしまうと、ユーザーの体験に悪影響を及ぼす可能性があります。

1つは、見ている要素が突然移動した場合、新しい位置を見つけるのに少なくとも数百ミリ秒かかるということです。(注7)スクロールして見えなくなった場合は、さらに時間がかかります。このタイプの割り込みは、ユーザー遷移を遅くし、非常にイライラさせます。

(注7)Purves D., Augustine G. J., Fitzpatrick D., et al. (2001). Types of Eye Movements and Their Functions. Neuroscience (2nd edition).

さらに深刻なのは、予期せぬレイアウトの変化がエラーを引き起こす可能性があるということです。ユーザーが移動した要素をタップしようとした場合、元の位置に移動した別の要素をタップしてしまうことになりかねません。これは、移動を認識し、行動を放棄することにつながり、実行遅延によって、人間が適切に対応することを不可能にする可能性があるためです。これは、意図せずにリンクや広告、「今すぐ購入」ボタンをクリックしてしまい、ユーザーの意図した遷移を大幅に中断させてしまうことを意味します。

Cumulative Layout Shift（CLS）は、ページ上での予期しないレイアウトシフトの頻度と重大度を測定します。シフトが少ないということは、中断やエラーの可能性が少ないことを意味します。ページ読み込みの75％で、CLSを0.1未満にすることをお勧めします。

応答性の低さによる注意散漫とエラー

ページの読み込みは、建物に入るなど、ユーザー遷移の中での大きな変化を表していますが、小さなステップも重要です。

歩いているときは、歩くことを意識することはあまりありません。理想的なのは、歩いていることを忘れて、他のことに集中できることです。しかし、靴の中に石が入っているようなものは、その集中力を妨げることになります。

同様に、サイトとの瞬間的なやりとりの中で、ユーザー体験が軋轢を生むことは避けたいものです。これを達成するために関連する調査結果をいくつかご紹介します。

• ・ある研究によると、タッチスクリーンのボタンからの視覚的なフィードバックの遅延が、70msから100msに増加したときに知覚可能になることがわかりました。また、100ms から 150ms へと増加させると、ボタンの質が著しく低下したとの評価も得られています。(注8)
• ・ある実験では、アニメーションでは100ms程度の遅延があると、あるイベントが別のイベントを引き起こしたように見える錯視が壊れ始めたという結果が出ています。(注9) 同様に、ユーザーインターフェースでの直接操作の錯視も、これ以上の遅延があると壊れてしまうことが示唆されています(注10)(このガイダンスは、アクションが100-200ms以内に目に見える効果を持つようにすることが望ましいという、以前のベスト・ガイディングの勧告にも由来しているようです(注11))。

(注8)Kaaresoja, T., Brewster, S., & Lantz, V. (2014). Towards the Temporally Perfect Virtual Button: Touch-Feedback Simultaneity and Perceived Quality in Mobile Touchscreen Press Interactions. ACM Transactions on Applied Perception (TAP), 11(2), 1–25.
(注9)Card, S. K. (Ed.). (2018). The psychology of human-computer interaction. Crc Press.
(注10)Nielsen, J. (1993). Response Times: The 3 Important Limits. Nielsen Norman Group.
(注11)Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9-11, 1968, fall joint computer conference, part I (pp. 267–277).

LCPの場合と同様に、「魔法の数」は存在せず、分布を表すマーカーのみが存在します。一部の人は他の人よりもはるかに敏感で(注12)、触覚や聴覚のフィードバックが関与している場合には、より短い遅延に気づくかもしれません。(注13)(注12)Jota, R., Ng, A., Dietz, P., & Wigdor, D. (2013, April). How fast is fast enough? a study of the effects of latency in direct-touch pointing tasks. In Proceedings of the sigchi conference on human factors in computing systems (pp. 2291-2300).
(注13)Kaaresoja, T., Brewster, S., & Lantz, V. (2014). Towards the Temporally Perfect Virtual Button: Touch-Feedback Simultaneity and Perceived Quality in Mobile Touchscreen Press Interactions. ACM Transactions on Applied Perception (TAP), 11(2), 1–25.

UIの感じ方を変えるだけでなく、人々がほぼ瞬時に期待するものを遅らせると、エラーが発生する可能性があります。うまくいかなかったと思ってアクションを繰り返すかもしれず、2回目のアクションは望ましくない効果をもたらす可能性があります。たとえば、「カートに追加」ボタンを2回クリックして、2つの商品を購入していることに気付かないことがあります。

これらの体験に関連する応答性は、First Input Delay (FID) で測定され、サイトはページロードの 75% で FID を 100 ミリ秒以下に抑えることを目標にすることをお勧めします。

影響

何百万ものページインプレッションを分析して、これらの指標としきい値がユーザーにどのように影響するかを理解しました。サイトが上記のしきい値を満たしている場合、ユーザーがページの読み込みを放棄する（コンテンツがペイントされる前にページを離れる）可能性が24％低くなることがわかりました。

また、トラフィックとタスク完了に依存するビジネスサイトであるニュースサイトとショッピングサイトについても具体的に調べてみたところ、同様の数字が出てきました。ニュースサイトでは放棄が22%減少し、ショッピングサイトでは放棄が24%減少しました。オンラインビジネスにこのレベルの改善を示す対処はほとんどなく、このような結果は、私たちとエコシステムパートナーが Web Vitals の測定基準を優先する理由の一部となっています。

ユーザーにスムーズな遷移を提供することは、オンライントラフィックとWebベースのビジネスを成長させるための最も効果的な方法の1つです。 Web Vitalsの指標としきい値が、パブリッシャー、開発者、およびビジネスオーナーにとって、サイトをより多くのユーザーに高速で中断のない遷移を提供するための明確で実用的な方法の１つとなることを願っています。

Amar Sagoo、スタッフインタラクションデザイナー
Annie Sullivan、ソフトウェアエンジニア
Vivek Sekhar、プロダクトマネージャー

---

※この記事は”https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html#f12”の英文情報を元に、内容を分かりやすく編集、翻訳したものであり、Creative Commons Attribution 4.0 Licenseの元で提供されています。