Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Core Web Vitals in Practice

Core Web Vitals in Practice

PWA Night CONFERENCE 2021での資料です。
https://conf2021.pwanight.jp/speaker/hara/

スライド内の参考リンク集はgistで公開しています。
https://gist.github.com/herablog/35336742a91c0926a7767d0d9b9654fc

2e0e89a34badf79dcff642cb7b5c126f?s=128

Kazunari Hara

June 26, 2021
Tweet

Transcript

  1. Kazunari Hara (@herablog) CyberAgent, Inc Core Web Vitals in Practice

    Jun 26, 2021 at PWA Night CONFERENCE 2021
  2. Quiz この中でCore Web Vitals (2020)に含まれないものは? Which metric is not included

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

    in Core Web Vitals (2020)? 1. FID 2. PWA 3. LCP 4. CLS
  4. メトリックスの歴史 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
  5. メトリックスの歴史 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 Initial Loading
  6. メトリックスの歴史 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 Visually Loading
  7. メトリックスの歴史 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
  8. • かつては、読み込まれるファイル 数が少なかったので、表示速度の 一つとして有用だった 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
  9. • 実際の画面上での表示状態を測る 上で今もなお有益な指標 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
  10. First Contentful Paint First Meaningful Paint Largest Contentful Paint… ؛͞Μ

  11. • 重要な指標に限定 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
  12. • CLSを10倍改善し、読書数が3倍 増加 • レイアウトの安定性が読書体験を 向上させた The more stable layout

    improves UX reading Amebaマンガの事例 Ameba Manga Case at Google I/O ‘21
  13. https://developers.cyberagent.co.jp/blog/archives/30577/

  14. • 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/
  15. どのツールを使うといい? Which tool is useful for measuring CWV?

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

  17. Lab Fields 調査やリグレッション検知 Investment, Detection 実態把握 Understand the actual conditions

    Lighthouse WebPageTest Chrome DevTools PageSpeed Insights Chrome UX (CrUX) Report Search Console PageSpeed Insights Google Analytics
  18. Place Device Time Network Speed Service Worker Data Saver

  19. • 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
  20. • 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スコアの使い方
  21. None
  22. Overview Details

  23. • 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 filtered by month and device • https://g.co/chromeuxdash CrUX Dashboard Chrome User Experience Report https://web.dev/chrome-ux-report-data-studio-dashboard/
  24. • 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 filtered by month and device • https://g.co/chromeuxdash CrUX Dashboard Chrome User Experience Report https://web.dev/chrome-ux-report-data-studio-dashboard/
  25. • 様々なデータが集約されたページ Various data is being displayed • 特定ページの状態を調べるのに役 立つ

    Useful to check the specific 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
  26. • 様々なデータが集約されたページ Various data is being displayed • 特定ページの状態を調べるのに役 立つ

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

    Useful to check the specific URL status • 直近28日間のCrUXデータが表示 される Display CrUX data of the previous 28 days PageSpeed Insights PSI for Short https://developers.google.com/speed/pagespeed/insights/
  28. • CrUXのデータをURLのグループ 単位で表示する Display CrUX data with grouped URLs •

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

    URLs • 実際にアクセスがあるURLの状態 を知るのに便利 Useful to check the status of the popular URLs in the site
  30. • 固有のURLの現状把握、調査に利 用する Useful to check the status of the

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

    specific URL • 多くのWebパフォーマンス指標の ほか、CWVも専用表示される CWV values are displayed with the other metrics WebPageTest
  32. • 固有のURLの調査に利用する Useful to investigate the specific URL • 多くのWebパフォーマンス指標の

    ほか、CWVも専用表示される CWV values are displayed with the other metrics • ブラウザなので開発環境での調査 も容易 Developers can test the page in the local environment Chrome DevTools
  33. খྛ͞Μ

  34. • 常にCWVの値を見たいマニアック な方におすすめ Recommended for CWV geeks who are eager

    to see the value while surfing 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
  35. 十分な数のフィールドデータがない場合 When your site does not have sufficient field data

    https://web.dev/debug-web-vitals-in-the-field/
  36. • 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);
  37. • 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
  38. • 様々なツールでCWVのフィールド (一部ラボ)データ収集に対応して いる Various third party tools can collect

    CWV in field or lab 3rd Party Tools https://web.dev/vitals-business-impact/
  39. どのように改善するか How can we improve CWV?

  40. • 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
  41. • 画面内に表示された最も大きな画 像かテキストブロックの表示時間 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/ <img> <image> in <svg> <video> (poster) background-mage via url() (not <html>, <body>) Text block
  42. • 改善余地のある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
  43. • サーバレスポンス改善 Improve server response • レンダリングをブロックする要素 の最小化 Minimize render-blocking

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

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

    resources できるだけ早くレンダリングを開始 Start render as early as possible  ・<link rel="stylesheet">  ・<script src=“script.js">  ・Web Fonts
  47. • 容量が必要以上に大きいと、LCP は遅くなることがある LCP may be delayed if the image

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

    画像を適切に配信する Provide images as appropriate as possible
  49. • フォーマット 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
  50. 画像を適切に配信する <picture> <source srcset="image.jxl" type="image/jxl"> <source media="..." srcset="image.avif" type="image/avif"> <source

    media="..." srcset="image.webp" type=“image/webp"> <img alt decoding="async" height="400" loading=“eager" src="image.jpg" width="1024"> </picture> Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary
  51. 画像を適切に配信する 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
  52. 画像を適切に配信する 1x 2x 3x 4x <img width=“800” height=“300” src=“img.png” srcset=“img-800.png

    1x, img-1600.png 2x” Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary https://www.youtube.com/watch?v=Hq8j5vsqCCo
  53. 画像を適切に配信する 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
  54. 画像を適切に配信する https://developers.cyberagent.co.jp/blog/archives/28237/ Provide images as appropriate as possible • フォーマット

    Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary
  55. 画像を適切に配信する https://developers.cyberagent.co.jp/blog/archives/28237/ HTML JavaScript LCP Image <img src=“img.png” …> <link

    rel="preload" as="image" href="img.png" /> HTMLから呼び出し Load from HTML プリロード Preloading HTML JavaScript LCP Image Provide images as appropriate as possible • フォーマット Format • クオリティ Quality • サイズ Size • キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary
  56. • 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
  57. • 最初のレイアウトシフト発生から ウィンドウ開始 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-field/ CLS (セッションウインドウ)
  58. 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
  59. • 要素名やレイアウトシフトの詳細 を調査 (WebPageTest, DevTools) Detect the layout shift details

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

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

    details with WebPageTest and DevTools • 最も大きなレイアウトシフトに集 中すると良い Find the largest layout shift • 原因特定は難しいこともあるの で、典型的なパターンを覚えてお くと良い Useful to know typical reasons CLS Debugging
  63. CLSのデバッグ https://web.dev/debug-web-vitals-in-the-field/#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
  64. • サイズ未指定の要素 Unsized Media • 複数サイズの要素 Multi-size Element • プレースホルダーとフォールバッ

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

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

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

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

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

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

    ク Placeholder and Fallback • Webフォント Web Font レイアウトシフトのパターン Typical Layout Shift Patterns https://web.dev/preload-optional-fonts/ font-display: optional; <link rel=“preload” …>
  71. CWV改善で大事なことは? What’s the important for improving CWV?

  72. CLS 情報設計 IA 画像投稿 Image Posting 画像圧縮 Image Compression LCP

    状態考慮 State Management スケルトン コ ンポーネント Skelton Component 運用ルール Contents Management パフォーマンス改善 Performance Improvements
  73. • 計測 Monitoring • 改善計画 Planning • 実装 Implementing •

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

    リリース (A/B) A/B Testing • 効果検証 Evaluation • 祝福 Celebration パフォーマンス改善のサイクル Performance Improvement Cycle
  75. English Title *****

  76. • 計測 Monitoring • 改善計画 Planning • 実装 Implementing •

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

    リリース (A/B) A/B Testing • 効果検証 Evaluation • 祝福 Celebration パフォーマンス改善のサイクル Performance Improvement Cycle
  78. • https://gist.github.com/ herablog/ 35336742a91c0926a7767d0d9 b9654fc 参考資料 Resources

  79. @herablog Enjoy PWA Night CONFERENCE 2021!