測量關鍵轉譯路徑

Ilya Grigorik
Ilya Grigorik
X 首頁

發布日期：2014 年 3 月 31 日

每項完善的成效策略都必須奠基於良好的評估和檢測機制。您無法改善無法評估的項目。本指南將說明評估 CRP 成效的不同方法。

  • Lighthouse 方法會針對網頁執行一系列自動化測試，然後產生網頁的 CRP 效能報表。這種做法可讓您快速掌握瀏覽器載入特定網頁的 CRP 效能，讓您快速測試、重複執行並改善效能。
  • Navigation Timing API 方法可擷取真實使用者監控 (RUM) 指標。顧名思義，這些指標是從與您網站實際互動的使用者互動，讓您準確掌握整體 CRP 效能，也就是使用者在各種裝置和網路條件下體驗過的資料。

一般來說，建議您使用 Lighthouse 找出明顯的 CRP 最佳化機會，然後使用 Navigation Timing API 檢測應用程式在實際環境中的效能。

使用 Lighthouse 稽核網頁

Lighthouse 是一個網頁應用程式稽核工具，可針對指定網頁執行一系列測試，然後在整合式報表中顯示該網頁的結果。您可以將 Lighthouse 做為 Chrome 擴充功能或 NPM 模組執行，這有助於將 Lighthouse 與持續整合系統整合。

如要開始使用，請參閱「透過 Lighthouse 稽核網頁應用程式」。

當您以 Chrome 擴充功能的形式執行 Lighthouse 時，網頁的 CRP 結果會類似下圖所示。

Lighthouse 的 CRP 稽核

如要進一步瞭解這項稽核作業的結果，請參閱「重要要求鏈結」。

您可以結合 Navigation Timing API 和其他在網頁載入時發出的瀏覽器事件，擷取並記錄任何網頁的實際 CRP 效能。

Navigation Timing

上圖中的每個標籤都對應至瀏覽器為每個載入的網頁追蹤的高解析度時間戳記。實際上，在此特定案例中，我們只顯示了部分不同的時間戳記—目前，我們都跳過與網路相關的所有時間戳記，但我們會在後續的課程中複習。

那麼，這些時間戳記代表什麼意思呢？

  • domLoading：這是整個程序的起始時間戳記，瀏覽器即將開始剖析 HTML 文件的第一位元組。
  • domInteractive：標示瀏覽器已完成剖析所有 HTML 且 DOM 建構完成的時間點。
  • domContentLoaded：標示 DOM 已就緒，且沒有任何樣式表阻擋 JavaScript 執行的時間點，表示我們現在可以 (可能) 建構轉譯樹狀結構。
    • 許多 JavaScript 架構會等待這個事件，之後才開始執行自己的邏輯。因此瀏覽器會擷取 EventStart 和 EventEnd 時間戳記，以便我們追蹤這項執行作業所需的時間。
  • domComplete：顧名思義，所有處理程序都已完成，頁面中的所有資源 (圖片等) 也已下載完成，換句話說，載入旋轉圖示已停止旋轉。
  • loadEvent：在每次網頁載入的最後一個步驟中，瀏覽器會觸發 onload 事件，這可能會觸發其他應用程式邏輯。

HTML 規格則規定每個事件的具體條件，包括應觸發的時機、必須符合哪些條件，以及其他重要注意事項。為了達到我們的目的，我們將著重於幾個與關鍵算繪路徑相關的重要里程碑：

  • domInteractive 標示 DOM 就緒的時間。
  • domContentLoaded 通常會標示DOM 和 CSSOM 都已就緒。
    • 如果沒有剖析器會封鎖 JavaScript，則 DOMContentLoaded 會在 domInteractive 之後立即觸發。
  • domComplete 會標示頁面和所有子資源是否就緒。
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

試用

上述範例乍看之下可能有點複雜，但實際上相當簡單。Navigation Timing API 會擷取所有相關的時間戳記，程式碼會等待 onload 事件觸發 (請注意，onload 事件會在 domInteractive、domContentLoaded 和 domComplete 之後觸發)，並計算各種時間戳記之間的差異。

NavTiming 示範

總而言之，我們現在有幾個要追蹤的特定里程碑，以及用來輸出這些測量值的基本函式。請注意，除了在網頁上顯示這些指標，您也可以修改程式碼，將這些指標傳送至數據分析伺服器 (Google Analytics 會自動執行這項操作)。這麼做可讓您隨時掌握網頁成效，並找出可進行最佳化調整的候選網頁。

什麼是開發人員工具？

雖然這些文件有時會使用 Chrome 開發人員工具網路面板說明 CRP 概念，但 DevTools 沒有隔離重要資源的內建機制，因此不適合用於 CRP 評估。執行 Lighthouse 稽核，協助找出這類資源。

意見回饋