Core Web Vitals in Practice

by Kazunari Hara

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

メトリックスの歴史 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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

• かつては、読み込まれるファイル数が少なかったので、表示速度の一つとして有用だった 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

Slide 9

Slide 9 text

• 実際の画面上での表示状態を測る上で今もなお有益な指標 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

Slide 10

Slide 10 text

First Contentful Paint First Meaningful Paint Largest Contentful Paint… ؛͞Μ

Slide 11

Slide 11 text

• 重要な指標に限定 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

• 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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Place Device Time Network Speed Service Worker Data Saver

Slide 19

Slide 19 text

• 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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Overview Details

Slide 23

Slide 23 text

• 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/

Slide 24

Slide 24 text

Slide 25

Slide 25 text

• 様々なデータが集約されたページ 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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

• 固有のURLの調査に利用する Useful to investigate the speciﬁc URL • 多くのWebパフォーマンス指標のほか、CWVも専用表示される CWV values are displayed with the other metrics • ブラウザなので開発環境での調査も容易 Developers can test the page in the local environment Chrome DevTools

Slide 33

Slide 33 text

খྛ͞Μ

Slide 34

Slide 34 text

• 常に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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

• 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);

Slide 37

Slide 37 text

• 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

• 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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

• 改善余地のある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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

• サーバレスポンス改善 Improve server response • レンダリングをブロックする要素の最小化 Minimize render-blocking resources できるだけ早くレンダリングを開始 Start render as early as possible CDNキャッシュミス時、データ取得に時間がかかっている Delay for fetching data when CDN cache miss

Slide 45

Slide 45 text

• サーバレスポンス改善 Improve server response • レンダリングをブロックする要素の最小化 Minimize render-blocking resources できるだけ早くレンダリングを開始 Start render as early as possible 　・サーバ処理の最適化 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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

• 容量の減らし過ぎに注意 Be careful of reducing image sizes too much 画像を適切に配信する Provide images as appropriate as possible

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

画像を適切に配信する

Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary

Slide 51

Slide 51 text

画像を適切に配信する Thumbnails Normal Images Image Gallaries High Resolution Required (e.g. Quality: 95 ~) Default Resolution (Quality: 85~) Low Resolution (Quality: ~80) Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary

Slide 52

Slide 52 text

画像を適切に配信する 1x 2x 3x 4x

Slide 53

Slide 53 text

画像を適切に配信する 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 Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary

Slide 54

Slide 54 text

画像を適切に配信する https://developers.cyberagent.co.jp/blog/archives/28237/ Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary

Slide 55

Slide 55 text

画像を適切に配信する https://developers.cyberagent.co.jp/blog/archives/28237/ HTML JavaScript LCP Image

HTMLから呼び出し Load from HTML プリロード Preloading HTML JavaScript LCP Image Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary

Slide 56

Slide 56 text

• Viewport内における2フレーム間のレイアウト変更を計測 Calculate the visual difference between 2 frames • 計測した個別の値を累積 Cumulate the values • 利用者の操作から500ms以内はカウントされない CLS ignores layout shifts in 500ms after user inputs Cumulative Layout Shift 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

Slide 57

Slide 57 text

• 最初のレイアウトシフト発生からウィンドウ開始 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 (セッションウインドウ)

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

• サイズ未指定の要素 Unsized Media • 複数サイズの要素 Multi-size Element • プレースホルダーとフォールバック Placeholder and Fallback • Webフォント Web Font レイアウトシフトのパターン Typical Layout Shift Patterns img { height: auto; width: **% } .element { aspect-ratio: 1 / 1; }

Slide 66

Slide 66 text

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Slide 69

Slide 69 text

• サイズ未指定の要素 Unsized Media • 複数サイズの要素 Multi-size Element • プレースホルダーとフォールバック Placeholder and Fallback • Webフォント Web Font レイアウトシフトのパターン Typical Layout Shift Patterns Placeholder Fallback function Component ({ item }) { If (!item) return null; }

Slide 70

Slide 70 text

• サイズ未指定の要素 Unsized Media • 複数サイズの要素 Multi-size Element • プレースホルダーとフォールバック Placeholder and Fallback • Webフォント Web Font レイアウトシフトのパターン Typical Layout Shift Patterns https://web.dev/preload-optional-fonts/ font-display: optional;

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

English Title *****

Slide 76

Slide 76 text

Slide 77

Slide 77 text

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

@herablog Enjoy PWA Night CONFERENCE 2021!