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

Kazunari Hara

June 26, 2021
Tweet

More Decks by Kazunari Hara

Other Decks in Technology

Transcript

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

    View Slide

  2. 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

  3. 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

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  18. Place Device Time
    Network
    Speed
    Service
    Worker
    Data
    Saver

    View Slide

  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

    View Slide

  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スコアの使い方

    View Slide

  21. View Slide

  22. Overview Details

    View Slide

  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/

    View Slide

  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/

    View Slide

  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

    View Slide

  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/

    View Slide

  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/

    View Slide

  28. • 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

  29. 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

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

    View Slide

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

    View Slide

  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

    View Slide

  33. খྛ͞Μ

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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/

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  50. 画像を適切に配信する




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

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

    View Slide

  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

    View Slide

  52. 画像を適切に配信する
    1x 2x 3x 4x
    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

    View Slide

  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

    View Slide

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

    View Slide

  55. 画像を適切に配信する
    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

    View Slide

  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

    View Slide

  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 (セッションウインドウ)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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;
    }

    View Slide

  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;

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. English Title
    *****

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. @herablog
    Enjoy PWA Night CONFERENCE 2021!

    View Slide