以使用者為中心的成效指標

我們都聽說成效的重要性。但說到提升網站效能,我們說的具體是什麼?

事實上,效能是相對的:

  • 假設某位使用者 (在裝置效能強大的快速網路中) 都能快速瀏覽網站,但其他使用者操作時的速度可能較為緩慢 (在低階裝置網路中速度較慢)。
  • 兩個網站的載入時間可能在相同的情況下完成,但其中一間網站可以逐步載入內容,因此能「加速」更快載入,而不必等到結束後再顯示任何內容。
  • 網站似乎可以快速載入,但又回應使用者互動緩慢,或是完全無法回應。

談論效能時,請務必精準指出成效,並以「指標」metrics為依據,也就是可量化評估的客觀條件。但您也必須確保評估的指標非常實用。

指標

系統已透過 load 事件評估網站效能。不過,雖然 load 是網頁生命週期中明確定義的時刻,但該時刻不一定是使用者關注的任何內容。

舉例來說,伺服器可以立即使用最少的網頁回應,使其立即「載入」,但接著在 load 事件觸發的數秒後,才會擷取內容或顯示網頁上的任何內容。技術上來說,這類網頁的載入時間很短,但該時間與使用者在網頁載入時並無關聯。

過去幾年來,Chrome 團隊成員與 W3C 網頁效能工作小組攜手合作,不斷努力將一組新的 API 和指標標準化,以更準確地評估使用者體驗的網頁效能。

為確保指標與使用者息息相關,我們會針對幾個重要問題制定指標:

這是怎麼回事? 導航是否順利開始?伺服器是否有回應?
這項功能實用嗎? 是否有足夠的轉譯內容可供使用者進行互動?
是否可用? 使用者可以與網頁互動,還是忙於瀏覽?
令人開心嗎? 互動情形是否順暢自然,沒有延遲和卡頓?

指標的評估方式

一般而言,成效指標的評估方式有兩種:

  • 在研究室中:使用工具在一致且受到控管的環境中模擬網頁載入
  • 現場:實際使用者載入網頁並與之互動

不論選用哪種方式,都不一定好或更差。事實上,您通常希望兩者並用,確保效能良好。

實驗室

開發新功能時,在研究室中測試效能至關重要。在功能在實際工作環境中發布前,無法評估實際使用者的效能特性,因此在功能發布前於研究室中進行測試,是避免效能迴歸的最佳方法。

在領域

另一方面,雖然在研究室中測試對效能相當合理,但不一定能反映所有使用者對您網站的體驗。

網站的效能可能會因使用者裝置功能和網路狀況而有大幅差異。但也可能根據使用者是否與網頁互動 (或如何) 而改變。

網頁載入也不一定是確定的原因,舉例來說,載入個人化內容或廣告的網站對使用者而言可能會有截然不同的效能特性。研究室測試無法得出這些差異

實際瞭解網站在使用者載入及互動期間的效能,的唯一方法就是評估網站的效能。這類測量方式通常稱為即時使用者監控 (RUM)

指標的類型

還有幾種其他類型的指標,都與使用者感受到的效能有關:

  • 感知載入速度:網頁載入速度及轉譯所有視覺元素的速度。
  • 載入回應:頁面載入及執行任何必要 JavaScript 程式碼後,元件能快速回應使用者互動的速度。
  • 執行階段回應:網頁載入後回應使用者互動的速度。
  • 視覺化內容的穩定性:頁面中的元素是否會改變使用者預期外的方式,進而乾擾使用者的互動?
  • 流暢度:轉換和動畫是否以一致的影格速率算繪,並從一種狀態流暢地算繪?

鑒於上述所有類型的成效指標,我們認為沒有單一指標足以用來擷取網頁的所有效能特性。

需評估的重要指標

首次顯示內容所需時間 (FCP)
從頁面開始載入,到頁面任何部分顯示在畫面上所需的時間。(labfield)
最大內容繪製 (LCP)
從頁面開始載入,到畫面顯示最大文字區塊或圖片元素所需的時間。(labfield)
與下一個顯示的內容 (INP) 互動
每次輕觸、點擊或鍵盤與網頁互動時發生的延遲時間。這項指標會根據互動次數,將網頁最差 (或接近最差) 的互動延遲時間設為單一代表性值,以描述網頁的整體回應速度。(labfield)
總封鎖時間 (TBT)
在 FCP 和互動時間 (TTI) 之間經過的總時間長度,其中主要執行緒封鎖時間過久,以免造成輸入回應。(研究室)
累計版面配置位移 (CLS)
從頁面開始載入到生命週期狀態變更為隱藏之間,所有非預期版面配置位移的累計分數。(labfield)
首次位元組時間 (TTFB)
網路使用資源的第一個位元組回應使用者要求所需的時間。(labfield)

這份清單中的指標會評估許多與使用者相關的各種效能層面,但不包括所有項目。舉例來說,這些說明不包含執行階段回應與流暢度。

在某些情況下,我們會導入新指標來涵蓋遺漏的區域,但在某些情況下,最適合的指標就是專為您的網站量身打造。

自訂指標

這裡列出的成效指標,有助於全面瞭解網路上大多數網站的效能特性。也很適合建立一組通用指標,以比較網站與競爭對手的成效。

不過,有時候某個網站因為某種方式具有獨特性,而需要更多指標才能掌握全盤成效。舉例來說,LCP 指標是用來測量網頁主要內容完成載入的時間,但在某些情況下,最大元素可能不屬於網頁的主要內容,導致 LCP 不相關。

為因應這類情況,網路效能工作小組也已標準化的較低層級 API,可協助您實作自己的自訂指標:

請參閱自訂指標指南,瞭解如何使用這些 API 評估您網站特有的效能特性。