Zenn
Open7

Web Vitalsについて調べる

webvitals
softoikasoftoika

https://web.dev/learn-web-vitals/ を読んでWeb Vitalsとは何かざっくり掴む

softoikasoftoika

Googleが提唱するWebパフォーマンスの統一的な品質指標みたいなものか

softoikasoftoika

背景としては、GoogleのWebパフォーマンスの改善について今まで様々なノウハウやツールが作られてきたが、最先端を追う一部の開発者しか恩恵を得られていなかった。Webをより良くするためにはこれらをより簡素化する必要がある。そこで最も重要な測定基準に絞ったものがCore Web Vitals

softoikasoftoika

Webパフォーマンスにおける重要な指標は常に変化している。2020年現在で重要とされている要素は、読み込み時間、インタラクティブ性、視覚的安定性の３つ。
それに基づき３つの測定基準がある。Largest Contentful Paint(LCP)とFirst Input Delay(FID)、Comulative Layout Shift(CLS)。

LCPは読み込み時間を計測する。2.5秒までが良いとされる。
FIDはインタラクティブ性を計測する。100msまでが良いとされる。
CLSは視覚的安定性を計測する。0.1以下が良いとされる。

実際は様々なデバイスでの利用が考えられるのでデスクトップ/モバイル含め下から数えて75パーセンタイルに位置する測定結果を参考にすると良い。

softoikasoftoika

測定基準(メトリクス)は以下の２つの方法で計測される。測定基準によってはどちらかにしか対応していないものもある。

in the lab

シミュレーション上の完全に制御された環境下での測定。リリース前の新機能のパフォーマンスを事前に計測する上では便利だが、デバイス特性やネットワークの速さなどは考慮されないため、ユーザー体験と直結するとは限らない。

in the field

実際にリアルユーザーがページを見たり触ったりする状況下で計測できる測定。デバイス特性やネットワークの速さ、デバイス上で動いている他プロセスの状況込みで計測するので、より正確にユーザー体験を測ることができる。

https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured

softoikasoftoika

Core Web Vitalsをサポートするツール

field tools

Chrome User Experience Reportで匿名化されたデータをレポートできる。集計されたデータはPageSpeed InsightsやSearch ConsoleにあるCore Web Vitals reportで見ることができる。ただし、Chrome User Experience Reportで集計されたデータは簡易的なものなので、正確な計測や監視をするためには以下のツールを用いてサイト独自の計測環境を設定することが推奨される。

  • web-vitals: Web Vitalsの測定基準で計測できるJavaScriptライブラリ
  • Web Vitals Chrome Extension: Core Web Vitalsの測定基準で計測できるChrome拡張機能。内部的には上記のライブラリを用いている。

lab tools

これらのツールはリリース前の機能のパフォーマンスを事前に計測しユーザー体験を予測することは可能だが、最終的にはfield toolsでリアルなデータで計測したいところ。また、FID(First Input Delay)はin the fieldでしか計測できない。上記のツールでは、TBT(Total Blocking Time)がin the labで計測可能なFIDの代わりとなる測定基準になる。