Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

本頁面由 Cloud Translation API 翻譯而成。

使用 Web Vitals Library 評估網頁的「網站體驗核心指標」

1. 事前準備

在這個程式碼研究室中，您將瞭解如何使用 web-vitals JavaScript 程式庫評估網頁的核心指標。

Google 建議您評估網站體驗核心指標，並判斷在行動裝置和電腦之間分段載入網頁的 75% 以內。

「網站體驗核心指標」包含以下三項指標，適用於所有網頁，且可讓您深入瞭解使用者體驗：

最大內容繪製 (LCP)。可測量載入效能，應該在網頁開始載入後的 2.5 秒內進行。
首次輸入延遲時間 (FID)。可測量互動性，應該可在 100 毫秒內完成。
累計版面配置位移 (CLS)。測量影像穩定性，且應在 0.1 內。

必要條件

要執行的步驟

將 web-vitals 程式庫新增至網頁。
使用 Google Chrome 開發人員工具評估網頁的核心網站使用體驗指標。
選用：向 Google Analytics (分析) 回報網頁的核心網站使用體驗核心指標。

軟硬體需求

您選擇的文字編輯器，例如 Sublime Text 或 Visual Studio Code
以 Chrome 為基礎的網路瀏覽器，例如 Google Chrome 或 Microsoft Edge。如要進一步瞭解為何需使用 Chromium 網路瀏覽器，請參閱瀏覽器支援)。

2. 在網頁中加入 Web-taltals 程式庫

使用文字編輯器建立 web-vitals-test.html 檔案，然後在檔案中輸入以下 HTML 程式碼：

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

這段程式碼會建立您用於此程式碼研究室的網頁。

在第二個 <p> 元素之後的 HTML 代碼 <body> 元素中，進入此模塊腳本，然後保存文件：

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

這個模組指令碼會從內容傳遞聯播網載入 web-vitals 程式庫。現在您的檔案看起來像這樣：

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

所有新式瀏覽器皆支援模組指令碼，適合僅使用新 API 的程式碼，例如評估網站使用體驗核心指標報告所需的程式碼。不支援模組或 Core Web Vitals API 的瀏覽器會嘗試載入這個指令碼。

3. 使用 Google Chrome 開發人員工具評估網頁的核心網站使用體驗指標

在網路瀏覽器中開啟已儲存的檔案。
在網頁上按一下滑鼠右鍵，然後按一下對話方塊中的 [檢查]。
在「Google Chrome 開發人員工具」窗格中，按一下 [Console] 分頁標籤，然後選取 [Console settings] > [Reserve log]。這項設定可確保您在重新整理網頁時，系統仍會繼續保留紀錄。

按一下 [網路] 分頁標籤，然後點選節流下拉式選單的展開箭頭，然後選取 [慢速 3G]。這項設定會模擬網路連線速度緩慢。

[網路] 分頁，已選取「節流」下拉式選單中的 [慢速 3G] 設定。

返回「控制台」分頁，然後按一下網頁上的任一處。LCP 和 FID 指標會列印在「主控台」分頁中。

控制台分頁顯示 LCP 和 FID 指標後。

重新整理網頁。CLS 指標會列印在「主控台」分頁中。

「CLS」指標列印完畢後，「主控台」分頁。

返回 [網路] 分頁，然後按一下節流下拉式選單的展開箭頭，然後選取 [快速 3G]。這項設定會模擬快速的網路連線。
返回「Console」(控制台) 分頁，然後按一下網頁上的任何位置。LCP 和 FID 指標會再次在「Console」(控制台) 分頁中進行列印，但這些指標與之前相比有改善。

控制台分頁之後會再次列印 LCP 和 FID 指標。

重新整理網頁。CLS 指標會再次印在「主控台」分頁中，但會更快完成改善。

「控制台」分頁再次顯示 CLS 指標後。

4. 選用：向 Google Analytics (分析) 回報網頁的核心網站使用體驗指標

在模組指令碼匯入陳述式後方的 web-vitals-test.html 檔案中，輸入這個 sendToGoogleAnalytics() 函式並儲存檔案：

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

此程式碼會將網站體驗核心指標傳送給 Google Analytics (分析)，供您在「熱門事件」報表中查看：

Google Analytics (分析) 中的「熱門事件」報表

現在您的檔案看起來像這樣：

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. 恭喜

恭喜！你已瞭解如何透過 web-vitals 程式庫評估及回報網頁體驗核心指標。

瞭解詳情

網站使用體驗指標