Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Core Web Vitalsについて
Search
ユウト
July 01, 2023
Programming
0
56
Core Web Vitalsについて
ユウト
July 01, 2023
Tweet
Share
More Decks by ユウト
See All by ユウト
Fast JSX: Don't clone props object #28768
yossydev
1
230
Other Decks in Programming
See All in Programming
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
270
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.7k
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
JS RPCを理解する
yusukebe
5
270
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
Embedding it into Ruby code
soutaro
2
310
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
Jetpack Composeとデザインシステム
rmakiyama
0
230
仕様と実装で学ぶOpenTelemetry
drumato
2
1k
WinActorの勉強を継続する方法
tamai_63
0
130
Productivity is Messing Around and Having Fun
hollycummins
1
180
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
A Tale of Four Properties
chriscoyier
153
22k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Being A Developer After 40
akosma
67
580k
It's Worth the Effort
3n
180
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Done Done
chrislema
178
15k
Transcript
Core Web Vitalsについて Yuto Yoshino
Warming up
None
第1問: Core Web Vitalsとはなんのことか 1. ウェブページのパフォーマンスを測定するための指標 2. ウェブページのセキュリティを評価するための指標 3. ウェブページのデザインとユーザーエクスペリエンスを評価す
るための指標 4. ウェブページのコンテンツの品質を評価するための指標
第1問: Core Web Vitalsとはなんのことか 1. ウェブページのパフォーマンスを測定するための指標 2. ウェブページのセキュリティを評価するための指標 3. ウェブページのデザインとユーザーエクスペリエンスを評価す
るための指標 4. ウェブページのコンテンツの品質を評価するための指標
第2問: Core Web Vitalsの内容として、正しいものを選びなさい 1. Largest Contentful Paint (LCP) 2.
First Input Delay (FID) 3. Cumulative Layout Shift (CLS)
第2問: Core Web Vitalsの内容として、正しいものを選びなさい 1. Largest Contentful Paint (LCP) 2.
First Input Delay (FID) 3. Cumulative Layout Shift (CLS)
「学びになった!」ってちょっとでもなれば嬉しいです!
Yuto Yoshino Web Developer CyberAgent 24卒 Webパフォーマンス / DX 好きなこと:
football / k-pop @code-yy @codeyy_dev
Core Web Vitals: ウェブパフォーマンスの指標 2024年3月 変更予定
Core Web Vitals改善すると • SEOの向上 ◦ GoogleがUXを大事にしている • 遅いページなんて見たくない! ◦
なるべく早くページが見たい ◦ クリックしたらなるべく早く動いて欲し い! ◦ クリックしようとしていきなりずれたら困 る!
Core Web Vitals改善例 • CLS改善をした結果事業成果がグンと上がった話 • ユーザー体験を向上!Yahoo!ニュースにおけるCore Web Vitals対応事例
LCP / CLS / FID / INP
「画面上で最も大きいコンテンツ要素が 表示されるまでの時間」 考慮される要素 • <img> 要素 • <svg> 要素内の <image>
要素 • <video> 要素 (ポスター画像が使用されます ) • url() 関数を介して読み込まれた背景画像が含まれて いる要素 • テキストノードやその他のインラインレベルのテキスト 要素の子要素を含む ブロックレベル要素 Largest Contentful Paint (LCP)とは
None
None
LCPの理想値 ページ訪問の少なくとも75%で2.5秒以下 GOOD: 0 ~ 2.5 sec NEEDS IMPROVEMENT: 2.5
sec ~ 4.0 sec POOR: 4.0 sec ~
🙆 Viewport内でユーザーに対して 表示されるサイズ 要素がビューポートからはみ出している 要素の一部が切り取られている 画面に表示されないoverflowが発生する
LCPのサイズはどうやって決まるのか
• ウェブサーバーを最適化する • 画像やJavaScriptの圧縮 • 遅延読み込み(Lazy Loading)して、 不要なJavaScriptの読み込みを遅らせる • ブラウザのキャッシュを使用する
…etc LCPを改善する
「ユーザーがページを閲覧している最中に 意図しないコンテンツの移動や シフトが発生する度合い」 Cumulative Layout Shift (CLS)とは
None
None
CLSの理想値 モバイルとデスクトップに分けた上で、 総ページロード数の75%のスコアを0.1以下 GOOD: 0 ~ 0.1 sec NEEDS IMPROVEMENT:
0.1 sec ~ 0.25 sec POOR: 0.25 sec ~
🙆 既存の要素がその開始位置を変更する 新しい要素をDOMに追加 既存の要素のサイズを変更 → 他の要素の開始位置を変えなければ CLSとしてカ ウントされない!
CLSの測定について
CLS低下の原因 • サイズ指定のない画像 • サイズ指定のない 広告 / 埋め込み要素 / iframe
• 動的に挿入されたコンテンツ CLSを最適化する
CLSを最適化する CLS低下の原因 • サイズ指定のない画像 • サイズ指定のない 広告 / 埋め込み要素 /
iframe • 動的に挿入されたコンテンツ 画像のデフォルトのアスペクト比を画像の width と height 属性に基づいて設定する
First Input Delay (FID)とは 「ユーザーがページ上で最初のインタラクショ ンを行った後、実際にブラウザがそのインタラ クションに反応するまでの時間」
None
FIDの理想値 GOOD: 0 ~ 0.1 sec NEEDS IMPROVEMENT: 0.1 sec
~ 0.25 sec POOR: 0.25 sec ~
First Input Delay (FID)を最適化する - 長く時間がかかっているタスクを分割 する - 操作に対する準備状況にページを最 適化する
- Web Worker を使用する - JavaScript の実行にかかる時間を 短縮する
https://web.dev/i18n/ja/optimize-fid/ #%E9%87%8D%E3%81%84-javascript -%E3%81%AE%E5%AE%9F%E8%A1%8 C
「ユーザーがページを訪問する間に発生する 全てのクリック、タップ、キーボード操作の待ち 時間を観察することで、ユーザーのインタラク ションに対するページの総合的な応答性を評 価」 FIDだとアプリケーション全体のインタラクティブ性を計測 できないので,INP が導入されることになりました Interaction to
Next Paint (INP)
None
INPの理想値 参考: https://web.dev/i18n/ja/lcp/ GOOD: 0 ~0.2 sec NEEDS IMPROVEMENT: 0.2
sec ~0.5 sec POOR: 0.5 sec ~
FIDとINPの違いについて FID 測定範囲: 最初のインタラクションのみ 測定される時間: 入力遅延時間 INP 測定範囲: ページの読み込みを開始し てからユーザーがページを離れるまで
の全範囲のインタラクション 測定される時間: 入力遅延時間+処理 時間+表示遅延時間
https://web.dev/inp/#what-is-inp
None
• Largest Contentful Paint (LCP) • Cumulative Layout Shift (CLS)
• First Input Delay (FID) • Interaction to Next Paint (INP) まとめ
これを機にWebパフォーマンスについて 勉強してくださる方がいらっしゃれば嬉しいです!! 一緒に頑張りましょう!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
None