Web Vitalsの概要
Webのパフォーマンスは古くからさまざまな観点で評価・分析の方法があります。ひとくちにパフォーマンスと言っても、何をもって速い／遅いを判断するかという基準が必要になります。具体的な基準があることで初めて、行った施策が有効であったかを計測可能です。
近年Webパフォーマンスの文脈でWeb Vitalsと呼ばれる概念が注目されています。Web Vitalsとは優れたユーザー体験を提供するために定義された指標です。
そのうち特に重要な3つの指標がCore Web Vitalsと呼ばれています（参考：Web Vitals の概要）。
-
LCP（Largest Contentful Paint）
- 重要な要素がどれだけ早く読み込まれたか
-
FID（First Input Delay）
- ユーザーが即座にシステムを利用を開始できるか
-
CLS（Cumulative Layout Shift）
- 利用中にレイアウトがガタつかないか
それぞれの指標について、具体的なシーンを交えながら紹介します。
LCP（Largest Contentful Paint）
例えば製品説明ページの画像のことを考えてみましょう。画像のサイズが大きく読み込みに時間がかかってしまえばユーザーはがっかりして離脱してしまうかもしれません。LCPはそのような状況になっていないかを確認する指標です。
FID（First Input Delay）
例えばJavaScriptを使ったリッチな表現で見た目のよいシステムを作ったとしましょう。しかしJavaScriptの実行が完了するまで検索が使えなくなってしまうと、とても使いにくいシステムと思われてしまうでしょう。FIDはいかにシステムの機能を最速でユーザーに届けるかという指標です。
CLS（Cumulative Layout Shift）
例えば実際にスマホなどでページを読み込んでいる最中に、突然広告が読み込まれて変なところをタップしてしまったという経験はないでしょうか。広告に限らずレイアウトが安定せず、ユーザーの想定した挙動が行えないことはユーザー体験を大きく損ないます。このレイアウトの安定性を数値化した指標がCLSです。
もちろんこれらのスコアが全てではないですが、これらの観点を気にすることでユーザーにとって快適な体験に近づくというのはイメージしやすいのではないでしょうか。
実際にヤフーではCore Web Vitalsの改善を全社的に進め、ビジネス指標にもよい影響を与えていることが確認されています。
また、これらの指標は現在Googleの検索順位にも影響すると案内されています。
パフォーマンスを気にした開発をすることは、現在のフロントエンドにおいて無視できない要素になっています。
フィールドデータとラボデータ
Core Web Vitalsの改善のためには、まずフィールドデータとラボデータの概念を知る必要があります。計測に利用するツールはいくつかありますが、どちらのデータを計測しているのかを知ることが大事です。
フィールドデータとラボデータの概要と特徴は以下のとおりです（参考：How to measure speed?）。
| 概要 | 特徴 | |
|---|---|---|
| フィールドデータ | ユーザーの実行環境（Chrome User Experience Report：CrUX）から収集したパフォーマンスデータ | 匿名化された実際のアクセスデータ。過去28日間の平均。十分なデータ量がないと取得できない |
| ラボデータ | 特定の環境から計測したパフォーマンスデータ | 環境を固定できるため、詳細な計測や分析がしやすい |
最終的な改善を目指すのは、ユーザーの実環境で計測されるフィールドデータです。検索結果のスコアにもフィールドデータが利用されます。一方でラボデータはフィールドデータからは読み取りにくい具体的な要素の分析が可能です。
ラボデータをもとに手元の修正に効果があることを確認し、リリースした結果フィールドデータが改善することを確認するというフローをたどります。
フィールドデータは実際のアクセスから匿名化する性質上、一定以上のデータが集まらないと取得できません。また、過去データの平均となるため、行った改善が即座にスコアに反映されるとは限りません。大きな改善であってもラボデータと異なり緩やかに変化していく点に注意が必要です。
