測量關鍵轉譯路徑

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 稽核，協助找出這類資源。

意見回饋