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 まとめと次回予告

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

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

00:00 OP

00:22 雑談(体調と車)

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

04:28 収録の雰囲気

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

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 クロージング

本エピソードでは、ChatGPT, GPT-4モデルについて雑感を話しています。GPT-4は、GPT-3とは異なり性能の大幅な向上が期待されるモデルとして、特に日本語においての精度も高くなっています。また、ChatGPTとBingAIなどの違いについても話していて、聞き手は普段の開発や子供たちが今後学ぶべきことなどを考えさせられます。GPTの利用規約や著作権についての問題や、プロンプットエンジニアリングについても言及されています。エンジニア以外の方にも興味深い話題が含まれているため、おすすめのエピソードです。

00:00 OP

00:19 雑談

02:39 今回のテーマ

04:59 GPTによる機械学習とその特徴

06:00 機械学習の問題点とGPT-3・4の違い

11:00 GPT-3.5とGPT-4の精度の違い

13:07 GPT4による精度向上についての話題

15:02 GPT4によるマルチモーダル応答の検証や使用についての話題

17:02 コーディング補完とGitHub Copilot、GPT

19:38 利用規約,著作権,GPT

23:47 Bing AIとプロンプトエンジニアリング

27:56 前半の締めと後半のつなぎ

今回はDenoが出していた記事を軸にWebのレンダリング方式がSSRになっていくかもねぇという話をしました

00:00 OP

[参考] https://deno.com/blog/the-future-and-past-is-server-side-rendering

## 記事の概要

- Deno から Web の過去と未来は Server Side Rendering というタイトルの記事が公開