00:00
-00:00

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 によって詳細にキャッチできそう
4月7日
stand.fmの無料アプリでもっと便利に
Google Play Store
App Store
about stand.fm
放送が更新されたらプッシュでお知らせされるので最新の放送を聞き逃さない。
about stand.fm
バックグラウンド再生で他のアプリを使用しながら、放送やライブが聴ける。
about stand.fm
放送やライブ、コミュニティでコメントが送れて配信者とコミュニケーションができる。
about stand.fm
アプリだけでかんたんに音声を収録して投稿できて音声の編集もできる。
jasrac
JASRAC許諾番号
9024598002Y31016
9024598004Y31016
nextone
NexTone許諾番号
000006134
© 2024 stand.fm, Inc.