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
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
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
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
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
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
実デバイス(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
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/
quality of the website • 値の変化(リグレッションや改善) を見つけるのに有用 The score is useful to detect regressions • 宣伝にも便利 The score is useful for PR as well Lighthouseスコアの使い方 Lighthouse Score Usage
quality of the website • 値の変化(リグレッションや改善) を見つけるのに有用 The score is useful to detect regressions • 宣伝にも便利 The score is useful for PR as well Lighthouse Score Usage Lighthouseスコアの使い方
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/
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/
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
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/
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/
ほか、CWVも専用表示される CWV values are displayed with the other metrics • ブラウザなので開発環境での調査 も容易 Developers can test the page in the local environment Chrome DevTools
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
web-vitals JS • ダッシュボードを生成してくれる Web Vitals Report creates the dashboard automatically Web Vitals Report https://github.com/GoogleChromeLabs/web-vitals-report
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
Search Console • LCP対象要素、原因を特定する (WebPageTest, DevTools) Detect the target element and the LCP reason with WebPageTest or DevTools LCPのデバッグ LCP Debugging
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
キャッシュ Cache • 遅延読み込み Lazy-loading • プリロード (必要に応じて) Preloading if necessary 画像を適切に配信する Animation GIF Big SVG PNG 24+ JPEG PNG 8 WebP AVIF etc… Provide images as appropriate as possible
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
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 (セッションウインドウ)
• 最初のレイアウトシフト発生から ウィンドウ開始 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
with WebPageTest and DevTools • 最も大きなレイアウトシフトに集 中すると良い Find the largest layout shift • 原因特定は難しいこともあるの で、典型的なパターンを覚えてお くと良い Useful to know typical reasons CLSのデバッグ CLS Debugging
を調査 (WebPageTest, DevTools) Detect the layout shift details with WebPageTest and DevTools • 最も大きなレイアウトシフトに集 中すると良い Find the largest layout shift • 原因特定は難しいこともあるの で、典型的なパターンを覚えてお くと良い Useful to know typical reasons
details with WebPageTest and DevTools • 最も大きなレイアウトシフトに集 中すると良い Find the largest layout shift • 原因特定は難しいこともあるの で、典型的なパターンを覚えてお くと良い Useful to know typical reasons CLS Debugging
details with WebPageTest and DevTools • 最も大きなレイアウトシフトに集 中すると良い Find the largest layout shift • 原因特定は難しいこともあるの で、典型的なパターンを覚えてお くと良い Useful to know typical reasons CLS Debugging