web前端應用應該關注哪些效能指標？

csuwujing發表於2024-07-03
Web前端指標

作為一個有經驗的前端開發工程師來說，關注效能是必不可少的一項日常工作，那麼應該重點關注一些什麼樣的效能指標呢？其實主要還是從使用者體驗的角度來看，一般我們會從頁面載入相關、互動相關方面入手。

FCP：首次內容繪製
LCP：最大內容繪製
TTFB：首位元組時間
TBT：總阻塞時間
FMP：首次有效渲染
FP：首次繪製
SI：速度指數
CLS：累積佈局偏移
INP：互動到下一次繪製
FID：首次輸入延遲
TTI：可互動時間
Core Web Vitals

頁面載入相關的指標：

FCP：首次內容繪製 FCP 全稱為 First Contentful Paint，即首次內容繪製，表示頁面繪製其第一個非白色元素（如文字、影像、非空白 canvas 或 SVG）所需的時間。

image
在 Chrome DevTools 的 Lighthouse 皮膚中可以測量 FCP 得分：
image
理想的 FCP 時間應控制在 1.8 秒之內：
image

LCP：最大內容繪製 LCP 全稱為 Largest Contentful Paint，即最大內容繪製，用於記錄視窗內最大的元素繪製的時間，這個時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發生改變，該指標會在使用者第一次互動後停止記錄
image

根據規範，LCP 考慮的元素型別包括：

根據規範，LCP 考慮的元素型別包括：
<img> 元素。
<svg> 元素內嵌的 <image> 元素。
<video> 元素。
使用 url() 函式載入背景圖片的元素。
包含文字節點或其他內嵌文字元素子元素的塊級元素。

在 Chrome DevTools 的 Lighthouse 皮膚中可以測量 LCP 得分：
image
理想的 LCP 時間應控制在 2.5 秒之內：
image

TTFB：首位元組時間 TTFB，全稱為 Time to First Byte，即首位元組時間，表示從點選網頁到接收到第一個位元組的時間。TFB 測量的是 startTime 和 responseStart 之間的時間總和：
image

總時間包括：

  • 重定向時間
  • Service Worker 啟動時間
  • DNS 查詢
  • 連線和 TLS 協商
  • 請求，直到響應的第一個位元組到達
    理想的 TTFB 時間應控制在 800 毫秒之內：
    image

這個指標其實很多情況下可能會存在不客觀的情況，比如使用了gzip時候，TTFB時間邊長了，但是其實整個檔案下載的換時間是縮短的。

TBT：總阻塞時間 TBT 全稱為 Total Blocking Time，即總阻塞時間，用於衡量的是長任務對主執行緒的阻塞時間總和。即從首次內容繪製（FCP）到頁面達到可互動時間（TTI）期間，主執行緒因執行長任務而被阻塞的總時間，因此，TBT 會對首次輸入延遲有很大影響。長任務是指那些執行時間超過 50 毫秒的 JavaScript 任務，因為它們可能會阻塞頁面的渲染和響應，從而影響使用者體驗。
在 Chrome DevTools 的 Lighthouse 皮膚中可以測量 TBT 得分：
image

FMP：首次有效渲染 FMP 全稱為 First Meaningful Paint，即首次有效渲染。它衡量的是從使用者開始載入頁面到瀏覽器首次渲染出對使用者來說有意義的內容（如文字、圖片、按鈕等可互動元素）所花費的時間。

FMP 的計算比較複雜，因為它涉及到“有意義”內容的定義。在實際應用中，通常需要根據具體的應用場景和使用者需求來確定哪些內容被認為是“有意義”的。

FP：首次繪製 FP 全稱為 First Paint，即首次繪製，表示瀏覽器首次將畫素渲染到螢幕上的時間點。在效能統計指標中，從使用者開始訪問 Web 頁面的時間點到FP的時間點這段時間可以被視為白屏時間，即使用者看到的都是沒有任何內容的白色螢幕。FP 指標反映了頁面的白屏時間，白屏時間的長短直接影響了使用者的體驗和滿意度。

首次繪製與其他效能指標如 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 相關但有所不同：

  • FCP（首次內容繪製）：指的是頁面首次繪製文字或影像的時間點，通常在 FP 之後發生，因為它涉及到更具體的頁面內容。

  • LCP（最大內容繪製）：指的是頁面上最大的文字塊或影像元素完成繪製的時間點，它關注的是頁面主要內容的可見性。

image

SI：速度指數 SI 全稱為 Speed Index，即速度指數，用於衡量頁面渲染使用者可見內容迅速程度。Speed Index 並不是一個具體的時間點，而是一個綜合性指標。它表示頁面從載入開始到頁面內容基本可見的過程中，使用者感受到的載入速度。該指標是基於影片捕獲的可視進度或從繪製事件的可視進展來計算。

一般來說，在移動裝置上，Speed Index 低於 3.4s，在桌面上低於 1.3s 時，Lighthouse 才能獲得 90 以上的評分。

image

互動相關指標

CLS：累積佈局偏移 CLS 全稱為 Cumulative Layout Shift，即累積佈局偏移，用於衡量一個頁面在載入過程中，由於內容的載入和渲染，導致頁面佈局發生多次變化的情況。具體來說，CLS 指標衡量的是頁面中可見元素在載入過程中由於內容載入而發生的位置偏移。

注意：只有意外的佈局變化才會計入 CLS 分數。如果內容在使用者互動（例如點選）後移動，則不會增加 CLS。
在 Chrome DevTools 的 Lighthouse 皮膚中可以測量 CLS 得分：

image

CLS 的值範圍通常是從 0 到 1，其中 0 表示沒有佈局偏移，1 表示佈局偏移非常嚴重。一個較低的 CLS 值意味著頁面在載入過程中佈局穩定，使用者可以更流暢地瀏覽頁面。
理想的 CLS 時間應控制在 0.1 之內：
image

CLS 分數是透過將影響分數與距離分數相乘來計算的，其中：
影響分數：視口中會移動的不穩定元素的總面積佔比。如果頁面載入過程中有覆蓋視口 60% 面積的元素移動了，那麼影響分數就是 0.6。
距離分數：視口中任何單一元素移動的最大距離與視口高度的比值。假設一個元素從位置（0, 100）移動到（0, 500），這導致了 400px 的垂直偏移。如果視口的高度是 1000px，那麼距離分數就是 400px / 1000px = 0.4。
則累積佈局偏移分數是 0.6 x 0.4 = 0.375

INP：互動到下一次繪製 INP 全稱為 Interaction to Next Paint，即互動到下一次繪製，用來衡量使用者與網頁互動後，瀏覽器完成下一次螢幕繪製所需的時間。這個指標主要關注的是使用者互動（如點選、觸控、鍵盤輸入等）之後，頁面響應並渲染新內容的速度。

INP 會測量以下延遲：
輸入延遲：使用者互動和瀏覽器能夠處理事件之間的時間，類似於 FID。
處理延遲：瀏覽器處理事件處理程式所需的時間
顯示延遲：瀏覽器重新計算佈局並將畫素繪製到螢幕上所需的時間。

image
理想的 INP 時間應控制在 200 毫秒之內：
image

對於 INP，只觀測以下互動型別：
使用滑鼠點選。
點按帶有觸控式螢幕的裝置。
實體鍵盤或螢幕鍵盤鍵。

FID：首次輸入延遲 FID 全稱為 First Input Delay，即首次輸入延遲，是衡量網頁效能的一個重要指標，它反映了使用者在頁面載入過程中首次與頁面互動時的體驗。FID 特別關注使用者首次點選按鈕、連結、輸入欄位等可互動元素時，頁面響應這些互動所需的時間。

FID 僅測量輸入延遲，即使用者輸入和瀏覽器開始執行事件處理程式之間的時間。
image
INP 是 FID 的繼任指標。雖然兩者都是響應能力指標，但 FID 僅測量了頁面上首次互動的輸入延遲，而 INP 則透過考慮所有頁面互動（從輸入延遲到執行事件處理程式所需的時間，再到瀏覽器繪製下一幀）來改進FID。這使得 INP 成為更可靠的整體響應能力指標。

TTI：可互動時間 TTI 全稱為 Time To Interactive，即可互動時間，用於評估頁面從開始載入到使用者可以順暢地與之互動的時間點。TTI 特別關注頁面的響應性和互動性，它試圖捕捉使用者能夠開始與頁面進行流暢互動的瞬間。

TTI 時間主要取決於以下因素：
頁面佈局穩定，所有可見的內容都已經被載入。
主執行緒空閒。如果還在載入指令碼或處理其他任務，那麼應用將不會處於互動狀態。使用者的點選和其他操作將被忽略（或排隊）直到執行緒空閒。

Core Web Vitals

Core Web Vitals 是一組由Google推出的關鍵使用者體驗指標，旨在幫助開發人員評估和最佳化網站的效能。這些指標主要關注三個方面：載入效能、互動效能和視覺穩定性。分別對應三個指標：LCP（Largest Contentful Paint）、 INP（Interaction to Next Paint） 、CLS（Cumulative Layout Shift）
image

原文連結：前端效能指標，一網打盡

相關文章