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
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
270
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
890
Next.js App Router
quramy
14
2.3k
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
100
一文字エイリアスのすすめ
fujimura
0
200
mb_trim関数を作りました
youkidearitai
PRO
1
230
Sheets API使ってみた
toshi0383
2
180
Productivity is Messing Around and Having Fun
hollycummins
1
180
TypeScriptから始める VR生活
tamagokakeg
2
120
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Being A Developer After 40
akosma
67
580k
A designer walks into a library…
pauljervisheath
201
23k
A Tale of Four Properties
chriscoyier
153
22k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Gamification - CAS2011
davidbonilla
77
4.6k
Fireside Chat
paigeccino
22
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Navigating Team Friction
lara
179
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Docker and Python
trallard
35
2.7k
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