完全理解.FM 菊池翔

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 によって詳細にキャッチできそう

今回はnus3とReactのフレームワークであるRemixについて色々話してみました



00:00 OP

00:21 イントロ・Remixの概要

03:50 Remixに触れてみての所感

10:53 vs Next.js

23:20 Remixの気になりポイント

28:00 まとめと次回予告

半年ぶりの収録だったので去年の振り返りと雑な会話を収録しつつ、筋肉は大事だという話をしました




00:00 OP
00:22 イントロ
01:40 nus3の振り返り
09:33 kkの振り返り
24:26 年に抗うために
28:38 まとめと次回予告

今回はnus3とFLEXY主催の「フロントエンドテストはじめの一歩」に登壇した内容を含めて後日談や当日の話題について深掘りして話しています



00:00 OP

00:22 雑談(体調と車)

02:34 今日のテーマについて

04:28 収録の雰囲気

06:53 当日のトークテーマについて


フロントエンドテストのハードル
はじめ方
ボトムアップ: ex: 社内ジョブボード
トップダウン: ミニマムPJからはじめる
E2Eからはじめる

32:04 ED

今回は2023年5月にVercelから発表されたVercel Security, Collaborate, Ecosysteについて喋っていきます



00:00 OP

00:21 雑談

01:07 今回のテーマ

01:48 Vercel Security

- https://vercel.com/docs/security

07:28 Collaborate

- https://vercel.com/docs/workflow-collaboration

- Vercel Spaces

- Visual Editing

23:55 Ecosyste

- https://vercel.com/blog/authentication-for-the-frontend-cloud

- https://vercel.com/blog/nuxt-on-vercel

32:04 クロージングと次回のテーマ

今回は2023年5月にVercelから発表されたVercel Storageという新しいストレージサービスについて喋っていきます

後半でエッジ環境における勘所やVercelのサービスのあり方についても話しています



00:00 OP

00:21 今回のテーマ

01:00 Vercel Storageの概要

- https://vercel.com/docs/storage

07:54 Vercel KV

10:21 Vercel Postgres

18:08 Vercel Blob

20:09 Vercel Edge Config

20:39 Vercel Storageのメリットデメリット

24:19 VercelとCloudflareの連携・Vercelのサービスのあり方

31:28 クロージングと次回のテーマ