測量關鍵轉譯路徑

Ilya Grigorik
Ilya Grigorik

每項可靠的效能策略都是奠定基礎,也是良好的評估和檢測方法。您無法針對無法評估的項目進行最佳化。本文件將說明不同的評估 CRP 成效的方法。

  • Lighthouse 方法會針對網頁執行一系列自動化測試,然後產生該頁面的 CRP 效能報告。這個方法能針對瀏覽器中載入的特定網頁,快速簡單地概略說明 CRP 成效,方便您快速測試、疊代及改善其效能。
  • Navigation Timing API 方法會擷取實際使用者監控 (RUM) 指標。顧名思義,這些指標取自實際使用者與您網站的互動情形,有助您準確瞭解使用者在不同裝置和網路條件中實際體驗到的 CRP 成效。

一般來說,建議您使用 Lighthouse 找出顯而易見的 CRP 最佳化機會,然後使用 Navigation Timing API 檢測程式碼,就能監控應用程式的實際運作情況。

使用 Lighthouse 稽核頁面

Lighthouse 是一款網頁應用程式稽核工具,可對特定網頁執行一系列測試,然後將網頁結果顯示在合併報表中。您可以將 Lighthouse 做為 Chrome 擴充功能或 NPM 模組執行,很適合用來整合 Lighthouse 和持續整合系統。

請參閱使用 Lighthouse 稽核網頁應用程式,瞭解如何開始使用。

將 Lighthouse 做為 Chrome 擴充功能執行時,網頁的 CRP 結果會如以下螢幕截圖所示。

Lighthouse CRP 稽核

如要進一步瞭解這項稽核結果,請參閱關鍵要求鏈結

只要結合了 Navigation Timing API 和網頁載入時產生的其他瀏覽器事件,就能擷取及記錄任何網頁的實際 CRP 成效。

Navigation Timing

上圖中的每個標籤都對應至瀏覽器針對每個載入頁面追蹤的高解析度時間戳記。事實上,在這個特定案例中,我們只會顯示一部分不同時間戳記的一小部分,目前我們暫時略過所有與網路相關的時間戳記,我們會在日後的課程中再講解這些時間戳記。

這些時間戳記代表什麼意思?

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

HTML 規格會規定每個事件的特定條件:何時應該觸發、應符合哪些條件等等。以我們的用途來說,我們會著重於與重要轉譯路徑相關的幾個重要里程碑:

  • DOM 就緒時標記 domInteractive
  • 一般而言,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 事件在 domInteractivedomContentLoadeddomComplete 之間觸發,並計算差異。

NavTiming 示範

我們現在有追蹤特定的里程碑 以及輸出這些測量結果的簡單函式請注意,與其將這些指標都列印在網頁上,您也可以修改程式碼,將這些指標傳送至分析伺服器 (Google Analytics (分析) 會自動執行此工作),這是密切監控網頁成效的絕佳方法,還能找出可能受益於某些最佳化工作的網頁。

開發人員工具呢?

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

意見回饋: