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 クロージングと次回のテーマ

今回は僕自身が転職したことを踏まえてnusさんと一緒にエンジニアの転職について話をしていきました

00:00 OP

00:21 雑談

01:30 今回のテーマと近況

06:45 中途だと身構えちゃうよね

09:19 企業文化の話

14:50 今回の応募経路について

18:08 今回の転職活動について

26:16 「40代よわよわエンジニアの転職」から考えるキャリアについて

- https://anond.hatelabo.jp/20230415000359

32:15 クロージング・次回について

このエピソードではChatGPTを使ったコーディングに対しての問題点、リスク要因、技術スキルについて話し合われています。ChatGPTは事前に学習されたデータに基づいて応答を生成するため、バイアスや再学習によるコストについても議論されています。しかしその一方で、個人がGPTを活用する方法や、プログラム開発者が必要とするスキルについての話もしています。また、ChatGPTを使ってコードを生成できるようになるとエンジニアの職務にどのような影響が出るか、これからの時代に備えて求められるスキルに注目し、自分のやりたいことを追求しながら学ぶことについての議論もしています。ChatGPTによってエンジニアの仕事がどのように変わっていくか興味深い話題です。

00:00 OP

00:20 今回のテーマ

05:20 ChatGPTを用いて生成したコードに関する懸念点

09:06 エンジニアリングで長生きする領域についての話題

13:31 ChatGPTを利用する上でのリスク、セキュリティについて、攻撃手法やバイアス

27:50 OpenAIの動向についての話題

30:13 クロージング