Core Web Vitalsについて

Transcript

1. Core Web Vitalsについて Yuto Yoshino
2. Warming up
4. 第1問: Core Web Vitalsとはなんのことか 1. ウェブページのパフォーマンスを測定するための指標 2. ウェブページのセキュリティを評価するための指標 3. ウェブページのデザインとユーザーエクスペリエンスを評価す るための指標 4. ウェブページのコンテンツの品質を評価するための指標
5. 第1問: Core Web Vitalsとはなんのことか 1. ウェブページのパフォーマンスを測定するための指標 2. ウェブページのセキュリティを評価するための指標 3. ウェブページのデザインとユーザーエクスペリエンスを評価す るための指標 4. ウェブページのコンテンツの品質を評価するための指標
6. 第2問: Core Web Vitalsの内容として、正しいものを選びなさい 1. Largest Contentful Paint (LCP) 2. First Input Delay (FID) 3. Cumulative Layout Shift (CLS)
7. 第2問: Core Web Vitalsの内容として、正しいものを選びなさい 1. Largest Contentful Paint (LCP) 2. First Input Delay (FID) 3. Cumulative Layout Shift (CLS)
8. 「学びになった！」ってちょっとでもなれば嬉しいです！
9. Yuto Yoshino Web Developer CyberAgent 24卒 Webパフォーマンス / DX 好きなこと: football / k-pop @code-yy @codeyy_dev
10. Core Web Vitals: ウェブパフォーマンスの指標 2024年3月 変更予定
11. Core Web Vitals改善すると • SEOの向上 ◦ GoogleがUXを大事にしている • 遅いページなんて見たくない！ ◦ なるべく早くページが見たい ◦ クリックしたらなるべく早く動いて欲し い！ ◦ クリックしようとしていきなりずれたら困 る！
12. Core Web Vitals改善例 • CLS改善をした結果事業成果がグンと上がった話 • ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
13. LCP / CLS / FID / INP
14. 「画面上で最も大きいコンテンツ要素が 　表示されるまでの時間」 考慮される要素 • <img> 要素 • <svg> 要素内の <image> 要素 • <video> 要素 (ポスター画像が使用されます ) • url() 関数を介して読み込まれた背景画像が含まれて いる要素 • テキストノードやその他のインラインレベルのテキスト 要素の子要素を含む ブロックレベル要素 Largest Contentful Paint (LCP)とは
17. LCPの理想値 ページ訪問の少なくとも75%で2.5秒以下 GOOD: 0 ~ 2.5 sec NEEDS IMPROVEMENT: 2.5 sec ~ 4.0 sec POOR: 4.0 sec ~
18. 🙆 Viewport内でユーザーに対して 　 表示されるサイズ 󰢄 要素がビューポートからはみ出している 󰢄 要素の一部が切り取られている 󰢄 画面に表示されないoverflowが発生する LCPのサイズはどうやって決まるのか
19. • ウェブサーバーを最適化する • 画像やJavaScriptの圧縮 • 遅延読み込み（Lazy Loading）して、 不要なJavaScriptの読み込みを遅らせる • ブラウザのキャッシュを使用する …etc LCPを改善する
20. 「ユーザーがページを閲覧している最中に 意図しないコンテンツの移動や シフトが発生する度合い」 Cumulative Layout Shift (CLS)とは
23. CLSの理想値 モバイルとデスクトップに分けた上で、 総ページロード数の75%のスコアを0.1以下 GOOD: 0 ~ 0.1 sec NEEDS IMPROVEMENT: 0.1 sec ~ 0.25 sec POOR: 0.25 sec ~
24. 🙆 既存の要素がその開始位置を変更する 󰢄 新しい要素をDOMに追加 󰢄 既存の要素のサイズを変更 → 他の要素の開始位置を変えなければ CLSとしてカ ウントされない！ CLSの測定について
25. CLS低下の原因 • サイズ指定のない画像 • サイズ指定のない 広告 / 埋め込み要素 / iframe • 動的に挿入されたコンテンツ CLSを最適化する
26. CLSを最適化する CLS低下の原因 • サイズ指定のない画像 • サイズ指定のない 広告 / 埋め込み要素 / iframe • 動的に挿入されたコンテンツ 画像のデフォルトのアスペクト比を画像の width と height 属性に基づいて設定する
27. First Input Delay (FID)とは 「ユーザーがページ上で最初のインタラクショ ンを行った後、実際にブラウザがそのインタラ クションに反応するまでの時間」
29. FIDの理想値 GOOD: 0 ~ 0.1 sec NEEDS IMPROVEMENT: 0.1 sec ~ 0.25 sec POOR: 0.25 sec ~
30. First Input Delay (FID)を最適化する - 長く時間がかかっているタスクを分割 する - 操作に対する準備状況にページを最 適化する - Web Worker を使用する - JavaScript の実行にかかる時間を 短縮する
31. https://web.dev/i18n/ja/optimize-fid/ #%E9%87%8D%E3%81%84-javascript -%E3%81%AE%E5%AE%9F%E8%A1%8 C
32. 「ユーザーがページを訪問する間に発生する 全てのクリック、タップ、キーボード操作の待ち 時間を観察することで、ユーザーのインタラク ションに対するページの総合的な応答性を評 価」 FIDだとアプリケーション全体のインタラクティブ性を計測 できないので，INP が導入されることになりました Interaction to Next Paint (INP)
34. INPの理想値 参考: https://web.dev/i18n/ja/lcp/ GOOD: 0 ~0.2 sec NEEDS IMPROVEMENT: 0.2 sec ~0.5 sec POOR: 0.5 sec ~
35. FIDとINPの違いについて FID 測定範囲: 最初のインタラクションのみ 測定される時間: 入力遅延時間 INP 測定範囲: ページの読み込みを開始し てからユーザーがページを離れるまで の全範囲のインタラクション 測定される時間: 入力遅延時間＋処理 時間＋表示遅延時間
36. https://web.dev/inp/#what-is-inp
38. • Largest Contentful Paint (LCP) • Cumulative Layout Shift (CLS) • First Input Delay (FID) • Interaction to Next Paint (INP) まとめ
39. これを機にWebパフォーマンスについて 勉強してくださる方がいらっしゃれば嬉しいです!! 一緒に頑張りましょう!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!