Core Web Vitals in Practice

Kazunari Hara (@herablog) CyberAgent, Inc
Core Web Vitals in Practice
Jun 26, 2021 at PWA Night CONFERENCE 2021

View Slide

Quiz
この中でCore Web Vitals
(2020)に含まれないものは？
Which metric is not included in Core
Web Vitals (2020)?
1. FID
2. PWA
3. LCP
4. CLS

View Slide

メトリックスの歴史
History of web performance metrics
First Contentful Paint
First Input Delay
Largest Contentful Paint
Cumulative Layout Shift
Speed Index
Visually Complete
Start Render
DOM Content Loaded
Page Load
Time To Interactive
Time To First Byte
Total Blocking Time
×
First Meaningful Paint
Loading
Runtime

View Slide

First Input Delay
Speed Index
Visually Complete
Start Render
DOM Content Loaded
Page Load
Time To Interactive
Time To First Byte
Total Blocking Time
×
Loading
Runtime
Initial Loading

View Slide

First Input Delay
Speed Index
Visually Complete
Start Render
DOM Content Loaded
Page Load
Time To Interactive
Time To First Byte
Total Blocking Time
×
Loading
Runtime
Visually Loading

View Slide

First Input Delay
Speed Index
Visually Complete
Start Render
DOM Content Loaded
Page Load
Time To Interactive
Time To First Byte
Total Blocking Time
×
Loading
Runtime

View Slide

• かつては、読み込まれるファイル
数が少なかったので、表示速度の
一つとして有用だった
These metrics were more useful for measuring
loading speed as web pages had less resources
DOM Content Loaded & Page Load
HTMLとそれに依存するリソース
の読み込みが完了
Finish HTML and its dependencies loading
HTMLの読み込みとパースが完了
Finish HTML loading and parsing

View Slide

• 実際の画面上での表示状態を測る
上で今もなお有益な指標
Speed Index is still useful to get actual visual
performance on devices
• 少し複雑 A little complicated
• 他の指標と比較できない
Can’t compare to other timing metrics
• 端末での計測がやや困難
Tough to calculate it on devices
Speed Index
https://support.speedcurve.com/en/articles/2645927-how-is-speed-index-calculated
SI for Short

View Slide

Largest Contentful Paint…
؛͞Μ

View Slide

• 重要な指標に限定
Focus on only the most important metrics
• 実デバイス(Chrome)での計測データ
Data calculated on the actual devices (Chrome)
• 75pで閾値を下回ると「良好」
The values lower than the threshold of the 75th percentile are
labelled good
• Google検索結果のランキング要素
CWV is included as a Google Search ranking factor
• 指標や計測方法などは更新される
CWV updates frequently
Core Web Vitals
CWV for Short

View Slide

• CLSを10倍改善し、読書数が3倍
増加
• レイアウトの安定性が読書体験を
向上させた
The more stable layout improves UX reading
Amebaマンガの事例
Ameba Manga Case at Google I/O ‘21

View Slide

https://developers.cyberagent.co.jp/blog/archives/30577/

View Slide

• CLSとLCP改善による、ビジネス
指標への好影響
CLS and LCP improvements has a good impact on
their business metrics
• 大幅にパフォーマンスが改善すれ
ばビジネス影響が出るという例
These case studies show that the huge performance
improvements ensure good impact on business
パフォーマンス改善事例
Performance Improvement Cases at Google I/O ‘21
https://web.dev/vitals-business-impact/

View Slide

どのツールを使うといい？
Which tool is useful for measuring CWV?

View Slide

Core Web Vitalsを計測するツール
Tools to Measure Core Web Vitals
https://web.dev/vitals-tools/

View Slide

Lab Fields
調査やリグレッション検知
Investment, Detection
実態把握
Understand the actual conditions
Lighthouse
WebPageTest
Chrome DevTools
PageSpeed Insights
Chrome UX (CrUX) Report
Search Console
PageSpeed Insights
Google Analytics

View Slide

Place Device Time
Network
Speed
Service
Worker
Data
Saver

View Slide

• Lighthouseの得点がサイトの品質
を保証しないことがある
The Lighthouse score does not ensure the quality of
the website
• 値の変化(リグレッションや改善)
を見つけるのに有用
The score is useful to detect regressions
• 宣伝にも便利
The score is useful for PR as well
Lighthouseスコアの使い方
Lighthouse Score Usage

View Slide

• Lighthouseの得点がサイトの品質
を保証しないことがある
The Lighthouse score does not ensure the quality of
the website
• 値の変化(リグレッションや改善)
を見つけるのに有用
The score is useful to detect regressions
• 宣伝にも便利
The score is useful for PR as well
Lighthouse Score Usage
Lighthouseスコアの使い方

View Slide

View Slide

Overview Details

View Slide

• CrUXのデータをData Studioで見
られるようにしたもの
A template to show CrUX data in Data Studio
• 長期間の傾向を掴むのに便利
Useful to understand the long-term trend of the site
• 月やデバイスごとに絞り込める
The Data can be ﬁltered by month and device
• https://g.co/chromeuxdash
CrUX Dashboard
Chrome User Experience Report
https://web.dev/chrome-ux-report-data-studio-dashboard/

View Slide

• 様々なデータが集約されたページ
Various data is being displayed
• 特定ページの状態を調べるのに役
立つ
Useful to check the speciﬁc URL status
• 直近28日間のCrUXデータが表示
される
Display CrUX data of the previous 28 days
PageSpeed Insights
PSI for Short
https://developers.google.com/speed/pagespeed/insights/
Lab
Lab
Fields

View Slide

• 様々なデータが集約されたページ
Various data is being displayed
• 特定ページの状態を調べるのに役
立つ
Useful to check the speciﬁc URL status
• 直近28日間のCrUXデータが表示
される
Display CrUX data of the previous 28 days
PageSpeed Insights
PSI for Short
https://developers.google.com/speed/pagespeed/insights/

View Slide

• CrUXのデータをURLのグループ
単位で表示する
Display CrUX data with grouped URLs
• 実際にアクセスがあるURLの状態
を知るのに便利
Useful to check the status of the popular URLs in
the site
Search Console

View Slide

Search Console
• CrUXのデータをURLのグループ
単位で表示する
Display CrUX data with grouped URLs
• 実際にアクセスがあるURLの状態
を知るのに便利
Useful to check the status of the popular URLs in
the site

View Slide

• 固有のURLの現状把握、調査に利
用する
Useful to check the status of the speciﬁc URL
• 多くのWebパフォーマンス指標の
ほか、CWVも専用表示される
CWV values are displayed with the other metrics
WebPageTest
LCP

View Slide

• 固有のURLの現状把握、調査に利
用する
Useful to check the status of the speciﬁc URL
WebPageTest

View Slide

• 固有のURLの調査に利用する
Useful to investigate the speciﬁc URL
• ブラウザなので開発環境での調査
も容易
Developers can test the page in the local
environment
Chrome DevTools

View Slide

খྛ͞Μ

View Slide

• 常にCWVの値を見たいマニアック
な方におすすめ
Recommended for CWV geeks who are eager to see
the value while surﬁng on the net
• Chromeでページアクセス毎に
CWVを集計
Calculate CWV on every page access
• 問題があれば赤く表示され、値を
確認できる
Display in red if the site have any CWV issues
Web Vitals Extension
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

View Slide

十分な数のフィールドデータがない場合
When your site does not have sufficient field data
https://web.dev/debug-web-vitals-in-the-field/

View Slide

• Web Vitalsの指標をブラウザ上で
計測
Calculate CWV metrics on browsers
• npmやCDNで配布
Distributed via npm and CDN
• Web Vitalsの指標を計測する際に
はこのライブラリの利用を推奨
Recommended using this when you calculate CWV
web-vitals JS Library
https://github.com/GoogleChrome/web-vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToGoogleAnalytics({name, delta, id}) {
// Assumes the global `gtag()` function exists
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
non_interaction: true,
});
}
getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

View Slide

• web-vitals JSを使って、Google
AnalyticsにCVWを送信
Send CWV to Google Analytics with web-vitals JS
• ダッシュボードを生成してくれる
Web Vitals Report creates the dashboard
automatically
Web Vitals Report
https://github.com/GoogleChromeLabs/web-vitals-report

View Slide

• 様々なツールでCWVのフィールド
(一部ラボ)データ収集に対応して
いる
Various third party tools can collect CWV in ﬁeld or
lab
3rd Party Tools
https://web.dev/vitals-business-impact/

View Slide

どのように改善するか
How can we improve CWV?

View Slide

• Web Vitalsの指標、計測方法は随
時改善されている
CWV metrics often update to improve it
Web Vitals変更履歴
Web Vitals Changelogs
https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/README.md

View Slide

• 画面内に表示された最も大きな画
像かテキストブロックの表示時間
The time of displaying the largest content in the
viewport
LCP for short
https://github.com/WICG/largest-contentful-paint, https://web.dev/lcp/

in
(poster)
background-mage via url() (not , )
Text block

View Slide

• 改善余地のあるURLを見つける
(Search Console)
Find URLs to improve LCP with Search Console
• LCP対象要素、原因を特定する
(WebPageTest, DevTools)
Detect the target element and the LCP reason with
WebPageTest or DevTools
LCPのデバッグ
LCP Debugging

View Slide

• サーバレスポンス改善
Improve server response
• レンダリングをブロックする要素
の最小化
Minimize render-blocking resources
できるだけ早くレンダリングを開始
Start render as early as possible
TTFB FCP LCP

View Slide

の最小化
CDNキャッシュミス時、データ
取得に時間がかかっている
Delay for fetching data when CDN cache miss

View Slide

の最小化
　・サーバ処理の最適化 Optimize server tasks
　・ネットワークの最適化 Optimize networks
　・できるだけ長いキャッシュ設定
Cache setting as long as possible
　・CDNの利用 Using CDN
　・継続的なモニタリング Continuous monitoring
などなど etc
https://speakerdeck.com/herablog/using-cdn-to-improve-web-performance

View Slide

の最小化
　・
　・<br/>　・Web Fonts<br/>

View Slide

• 容量が必要以上に大きいと、LCP
は遅くなることがある
LCP may be delayed if the image size is too large
画像を適切に配信する
Provide images as appropriate as possible

View Slide

• 容量の減らし過ぎに注意
Be careful of reducing image sizes too much

View Slide

• フォーマット Format
• クオリティ Quality
• サイズ Size
• キャッシュ Cache
• 遅延読み込み Lazy-loading
• プリロード (必要に応じて)
Preloading if necessary
Animation GIF Big SVG
PNG 24+
JPEG PNG 8
WebP AVIF
etc…

View Slide


src="image.jpg" width="1024">

• サイズ Size

View Slide

Thumbnails
Normal Images
Image Gallaries
High Resolution Required (e.g. Quality: 95 ~)
Default Resolution (Quality: 85~)
Low Resolution (Quality: ~80)
• サイズ Size

View Slide

1x 2x 3x 4x
srcset=“img-800.png 1x, img-1600.png 2x”
• サイズ Size
https://www.youtube.com/watch?v=Hq8j5vsqCCo

View Slide

画像を適切に配信する HTTP Caches (CDN, Browser)
Service Worker Cache (Optional)
GET /image.4729rhoe.jpg
Cache-Control: max-age=31536000
ETag: v12.4
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 24 * 60 * 60,
}),
],
})
);
https://web.dev/service-worker-caching-and-http-caching/
ディスク容量に注意 Be careful of saving too much images
• サイズ Size

View Slide

• サイズ Size

View Slide

HTML
JavaScript
LCP Image

HTMLから呼び出し Load from HTML
プリロード Preloading
HTML
JavaScript
LCP Image
• サイズ Size

View Slide

• Viewport内における2フレーム間の
レイアウト変更を計測
Calculate the visual difference between 2 frames
• 計測した個別の値を累積
Cumulate the values
• 利用者の操作から500ms以内はカウ
ントされない
CLS ignores layout shifts in 500ms after user inputs
CLS for short
https://github.com/WICG/layout-instability, https://web.dev/cls/
layout shift score = impact fraction * distance fraction
0.75 * 0.25 = 0.1875

View Slide

• 最初のレイアウトシフト発生から
ウィンドウ開始
A window starts after the initial layout shift occurs
• 1秒レイアウトシフトがない、もし
くは最大5秒で区切られる
A window stops when no layout shifts for 1 second or
maximum 5 seconds
• ウィンドウごとで比較され最大値
のみレポートされる
The maximum window value is reported as CLS
CLS Update with the idea of Session Window
https://web.dev/debug-web-vitals-in-the-ﬁeld/
CLS (セッションウインドウ)

View Slide

CLS (セッションウインドウ)
CLS Update with the idea of Session Window
• 最初のレイアウトシフト発生から
ウィンドウ開始
A window starts after the initial layout shift occurs
• 1秒レイアウトシフトがない、もし
くは最大5秒で区切られる
A window stops when no layout shifts for 1 second or
maximum 5 seconds
• ウィンドウごとで比較され最大値
のみレポートされる
The maximum window value is reported as CLS

View Slide

• 要素名やレイアウトシフトの詳細
を調査 (WebPageTest, DevTools)
Detect the layout shift details with WebPageTest and
DevTools
• 最も大きなレイアウトシフトに集
中すると良い Find the largest layout shift
• 原因特定は難しいこともあるの
で、典型的なパターンを覚えてお
くと良い Useful to know typical reasons
CLSのデバッグ
CLS Debugging

View Slide

CLSのデバッグ
CLS Debugging
Y: -15px
H: + 30px
DevTools

View Slide

CLSのデバッグ
DevTools
CLS Debugging

View Slide

CLSのデバッグ
https://web.dev/debug-web-vitals-in-the-ﬁeld/#cls
function getCLSDebugTarget(entries) {
const largestEntry = entries.reduce((a, b) => {
return a && a.value > b.value ? a : b;
});
if (largestEntry && largestEntry.sources &&
layoutShift.sources.length) {
const largestSource = largestEntry.sources.reduce((a, b) => {
return a.node && a.previousRect.width *
a.previousRect.height >
b.previousRect.width * b.previousRect.height ? a : b;
});
if (largestSource) {
return largestSource.node;
}
}
}
DevTools
CLS Debugging

View Slide

• サイズ未指定の要素 Unsized Media
• 複数サイズの要素 Multi-size Element
• プレースホルダーとフォールバッ
ク Placeholder and Fallback
• Webフォント Web Font
レイアウトシフトのパターン
Typical Layout Shift Patterns

View Slide


img { height: auto; width: **% }
.element { aspect-ratio: 1 / 1; }

View Slide


View Slide

.element { min-height: 150px }

View Slide


View Slide

Placeholder Fallback
function Component ({ item }) {
If (!item) return null;
}

View Slide

https://web.dev/preload-optional-fonts/
font-display: optional;

View Slide

CWV改善で大事なことは？
What’s the important for improving CWV?

View Slide

CLS
情報設計
IA
画像投稿
Image Posting
画像圧縮
Image
Compression
LCP
状態考慮
State
Management
スケルトンコ
ンポーネント
Skelton
Component
運用ルール
Contents
Management
パフォーマンス改善 Performance Improvements

View Slide

• 計測 Monitoring
• 改善計画 Planning
• 実装 Implementing
• リリース (A/B) A/B Testing
• 効果検証 Evaluation
• 祝福 Celebration
パフォーマンス改善のサイクル
Performance Improvement Cycle
Goal

View Slide


View Slide

English Title
*****

View Slide


View Slide

• https://gist.github.com/
herablog/
35336742a91c0926a7767d0d9
b9654fc
参考資料
Resources

View Slide

@herablog
Enjoy PWA Night CONFERENCE 2021!

View Slide

Core Web Vitals in Practice

Core Web Vitals in Practice

Kazunari Hara

More Decks by Kazunari Hara

Other Decks in Technology

Featured

Transcript