Core Web Vitals FIDからINPに変わったよ話

Core Web VitalsのFID から INP に変わったという内容で話してみました。CWVとの付き合い方として参考になれば…！

00:00 OP

02:11 CWVとは

13:09 計測するメリット

22:17 CWVとの付き合い方

26:46 クロージング

1. 3/12 から CWV の指標が FID から INP に変わったよ

2. Web パフォーマンスの話

3. CWV ってなに？

4. FID、INP ってなに

5. FID から INP に変わってどうなるの？

## 3/12 から Interaction to Next Paint(INP) が Core Web Vitals の主な指標に

https://web.dev/blog/inp-cwv-march-12?hl=ja

- First Input Delay(FID)から INP に置き換わる

実際にLighthouseでFIDがINPに変わってる

## レスポンスタイムについてのヤコブニールセンの研究 Jakob Nielsen, “Website Response Times,” (2010)

https://www.nngroup.com/articles/website-response-times/

- 0.1 秒 … 即時に感じられる。キー入力やドラッグアンドドロップなどの Direct Manipulation においては満たしたい時間

- 1 秒 … 遅延は認識しているがユーザーがフローをシームレスと感じられる時間。ナビゲーションで満たしたい基準

- 10 秒 … ユーザーが注意を持ち続けられる時間。これ以上経過すると他のことを考えるようになる。

他の事例からも、Web パフォーマンスはユーザーの生産性と大きく関係してる

## Core Web Vitals (CWV) とは

https://web.dev/articles/vitals?hl=ja

- ユーザー体験に関する指標

- 3/12 以前までは

- FID

- ユーザーがページを表示してから最初の操作(クリック)からブラウザが反応するまでの時間

- 操作性

- Largest Contentful Paint(LCP)

- 最初にページに移動したときに、ビューポートに表示される最も大きなコンテンツのレンダリング時間

- ローディング

- Cumulative Layout Shift(CLS)

- ページが表示されるまでに発生するレイアウトのずれ

- レイアウトの安定性

- 3/12 以降は

- INP

- LCP

- CLS

- それぞれの指標はいずれも Performance API で取得できる

- https://developer.mozilla.org/ja/docs/Learn/Performance/Measuring_performance#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9_api

- INP で使用する API やプロパティは Chrome のみが対応してる

- https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming

- それぞれの指標は 75%タイルで下記の値以下だと Good、つまり良いユーザー体験が提供できてるって言える

- INP: 200ms

- LCP: 2.5s

- CLS: 0.1

## INP とは

https://web.dev/articles/inp?hl=ja

- FID と大きく変わった点は、ユーザー操作に対してブラウザが反応するまでの時間をずっと計測すること

- FID では最初の操作のみだった

### INP 改善事例

- https://web.dev/economic-times-inp/

- INP が改善されたことで PV が 43%増加

- https://web.dev/redbus-inp/

- INP を改善し、売上を 7%増加させた

## FID から INP になって何が変わるのか

- 個人の感想だけども、より今の Web アプリケーションに即したユーザー体験を計測できるようになったのではと

- 最近の Web アプリは、画面に対してユーザーが操作する部分が増えてる

- 操作に対して実際にユーザーがどんな体験をしているのか、INP によって詳細にキャッチできそう