測量關鍵轉譯路徑

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 開發人員工具的「Network」面板來說明 CRP 概念，但開發人員工具不太適合用於 CRP 評估，因為它沒有用於隔離重要資源的內建機制。執行 Lighthouse 稽核，協助找出這類資源。

意見回饋