前端性能指標，一網打盡！

作者：CUGGZ 2024-06-12 00:00:05

開發前端

LCP 全稱為 Largest Contentful Paint，即最大內容繪制，用于記錄視窗內最大的元素繪制的時間，這個時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發生改變，該指標會在用戶第一次交互后停止記錄。

在構建高性能的前端應用時，了解并掌握前端性能指標是至關重要的。這些指標不僅可以幫助我們評估應用的性能，還能指導我們進行針對性的優化，從而提升用戶體驗。本文將從加載和交互兩個維度，全面介紹前端性能指標，幫助你一網打盡前端性能優化的關鍵要點！

加載相關

FCP：首次內容繪制

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

在下圖中，FCP 發生在第二張圖時：

圖片

這個指標直接關系到用戶的體驗，如果 FCP 時間過長，用戶將會面對長時間的空白頁面，進而可能誤以為網站故障，甚至選擇離開并尋找其他選項。雖然 FCP 并不涵蓋整個頁面的加載時間，但它卻反映了用戶開始與頁面進行視覺交互的速度。

在 Chrome DevTools 的 Lighthouse 面板中可以測量 FCP 得分：

圖片

理想的 FCP 時間應控制在 1.8 秒之內：可以考慮通過以下方式來優化 FCP 時間：

降低服務器響應時間：確保服務器能迅速響應請求，這樣瀏覽器就能更快地開始處理并渲染頁面內容。可以通過優化服務端代碼、改善靜態資源的提供方式（如將圖片部署到 CDN）來實現。
延遲加載非關鍵資源：對于非關鍵的腳本和 CSS 樣式表，使用defer屬性或async屬性（對于腳本）來延遲加載，這樣它們就不會阻塞頁面的初次渲染。
移除不必要的資源：檢查頁面并移除那些未被使用的樣式表和JavaScript腳本，這些不必要的資源會拖慢 FCP 的時間。
內聯關鍵樣式：雖然這種做法會受到質疑，但如內聯一些關鍵的 CSS 樣式確實可以減少瀏覽器解析外部資源所需的時間，從而加快渲染速度。

LCP：最大內容繪制

在下圖中，LCP 發生在第三張圖時：

圖片

根據規范，LCP 考慮的元素類型包括：

<img> 元素。
<svg> 元素內嵌的 <image> 元素。
<video> 元素。
使用 url() 函數加載背景圖片的元素。
包含文本節點或其他內嵌文本元素子元素的塊級元素。

在 Chrome DevTools 的 Lighthouse 面板中可以測量 LCP 得分：

圖片

理想的 LCP 時間應控制在 2.5 秒之內：

圖片

TTFB：首字節時間

TTFB，全稱為 Time to First Byte，即首字節時間，表示從點擊網頁到接收到第一個字節的時間。

在下圖中，TTFB 測量的是 startTime 和 responseStart 之間的時間總和：

圖片

這個時間段包括：

重定向時間
Service Worker 啟動時間
DNS 查找
連接和 TLS 協商
請求，直到響應的第一個字節到達

理想的 TTFB 時間應控制在 800 毫秒之內：

圖片

TBT：總阻塞時間

TBT 全稱為 Total Blocking Time，即總阻塞時間，用于衡量的是長任務對主線程的阻塞時間總和。即從首次內容繪制（FCP）到頁面達到可交互時間（TTI）期間，主線程因運行長任務而被阻塞的總時間，因此，TBT 會對首次輸入延遲有很大影響。長任務是指那些執行時間超過 50 毫秒的 JavaScript 任務，因為它們可能會阻塞頁面的渲染和響應，從而影響用戶體驗。

在 Chrome DevTools 的 Lighthouse 面板中可以測量 TBT 得分：

圖片

減少 TBT 時間的方式包括：

減輕第三方代碼的影響
縮短JavaScript執行時間
減少主線程的工作量
控制請求數量和傳輸大小

理想情況下，TBT 在移動設備上應低于 300 毫秒，在桌面 Web 上應低于 100 毫秒。

FMP：首次有效渲染

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

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

圖片

FP：首次繪制

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

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

FCP（首次內容繪制）：指的是頁面首次繪制文本或圖像的時間點，通常在 FP 之后發生，因為它涉及到更具體的頁面內容。
LCP（最大內容繪制）：指的是頁面上最大的文本塊或圖像元素完成繪制的時間點，它關注的是頁面主要內容的可見性。

圖片

SI：速度指數

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

圖片

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

交互相關

CLS：累積布局偏移

CLS 全稱為 Cumulative Layout Shift，即累積布局偏移，用于衡量一個頁面在加載過程中，由于內容的加載和渲染，導致頁面布局發生多次變化的情況。具體來說，CLS 指標衡量的是頁面中可見元素在加載過程中由于內容加載而發生的位置偏移。這些元素可能因為圖片、廣告、視頻等資源的加載而發生移動。如果一個頁面的元素在加載過程中頻繁移動，那么這個頁面的 CLS 值就會比較高，這通常不是一個好的用戶體驗。

注意：只有意外的布局變化才會計入 CLS 分數。如果內容在用戶交互（例如點擊）后移動，則不會增加 CLS。

在 Chrome DevTools 的 Lighthouse 面板中可以測量 CLS 得分：

圖片

CLS 的值范圍通常是從 0 到 1，其中 0 表示沒有布局偏移，1 表示布局偏移非常嚴重。一個較低的 CLS 值意味著頁面在加載過程中布局穩定，用戶可以更流暢地瀏覽頁面。

理想的 CLS 時間應控制在 0.1 之內：

圖片

CLS 分數是通過將影響分數與距離分數相乘來計算的，其中：

影響分數：視口中會移動的不穩定元素的總面積占比。如果頁面加載過程中有覆蓋視口 60% 面積的元素移動了，那么影響分數就是 0.6。
距離分數：視口中任何單一元素移動的最大距離與視口高度的比值。假設一個元素從位置（0, 100）移動到（0, 500），這導致了 400px 的垂直偏移。如果視口的高度是 1000px，那么距離分數就是 400px / 1000px = 0.4。

則累積布局偏移分數是 0.6 x 0.4 = 0.375。

影響 CLS 分數的常見的原因主要有：

圖片、視頻和 iframe 沒有預先設定尺寸，導致頁面加載時元素位置變化。
字體加載過程中可能產生文本短暫消失或樣式未加載的文本閃爍，影響布局穩定性。
動態內容（如廣告、通知等）注入 DOM 后，尤其是網絡請求之后，往往會導致頁面布局發生突變。

CLS 是由于布局中的意外變化而發生的，因此在編寫 HTML 和 CSS 時，可以考慮以下原則：

避免布局重疊：不要將新元素插入到現有元素之上，因為這可能導致頁面布局發生意外的變化。尤其是當插入通知或警告框時，應該考慮使用不會干擾其他頁面元素的設計方法。
預留空間：為圖像和視頻元素指定尺寸屬性，以便瀏覽器在內容加載之前就能為它們預留出正確的空間。這有助于防止頁面在加載過程中發生不必要的布局調整。
謹慎使用動畫：動畫和過渡效果可以提升用戶體驗，但應確保它們不會導致頁面布局發生不必要的改變。選擇那些不會移動元素或改變布局尺寸的過渡效果，以保持頁面的穩定性和一致性。

INP：交互到下一次繪制

INP 全稱為 Interaction to Next Paint，即交互到下一次繪制，用來衡量用戶與網頁交互后，瀏覽器完成下一次屏幕繪制所需的時間。這個指標主要關注的是用戶交互（如點擊、觸摸、鍵盤輸入等）之后，頁面響應并渲染新內容的速度。

INP 會測量以下延遲：

輸入延遲：用戶交互和瀏覽器能夠處理事件之間的時間，類似于 FID。
處理延遲：瀏覽器處理事件處理程序所需的時間
顯示延遲：瀏覽器重新計算布局并將像素繪制到屏幕上所需的時間。

圖片

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

圖片

對于 INP，只觀測以下互動類型：

使用鼠標點擊。
點按帶有觸摸屏的設備。
實體鍵盤或屏幕鍵盤鍵。

FID：首次輸入延遲

FID 全稱為 First Input Delay，即首次輸入延遲，是衡量網頁性能的一個重要指標，它反映了用戶在頁面加載過程中首次與頁面交互時的體驗。FID 特別關注用戶首次點擊按鈕、鏈接、輸入字段等可交互元素時，頁面響應這些交互所需的時間。

FID 僅測量輸入延遲，即用戶輸入和瀏覽器開始執行事件處理程序之間的時間。

圖片

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

TTI：可交互時間

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

TTI 時間主要取決于以下因素：

頁面布局穩定，所有可見的內容都已經被加載。
主線程空閑。如果還在加載腳本或處理其他任務，那么應用將不會處于交互狀態。用戶的點擊和其他操作將被忽略（或排隊）直到線程空閑。

可以通過減少腳本的加載時間來降低 TTI 時間，因為腳本的加載和處理往往是造成高 TTI 的元兇。以下是一些優化策略：

清除冗余腳本：移除所有未使用的腳本，避免瀏覽器花費時間去解析不必要的代碼，從而提升頁面加載速度。
分割腳本文件：將大型腳本拆分成多個較小的文件。這有助于瀏覽器更有效地加載和解析這些腳本，減少阻塞時間。
動態加載腳本：對于來自外部資源且無法直接分割或修改的腳本，考慮采用動態加載的方式，以減少對頁面初始加載時間的影響。

Core Web Vitals

Core Web Vitals 是一組由Google推出的關鍵用戶體驗指標，旨在幫助開發人員評估和優化網站的性能。這些指標主要關注三個方面：加載性能、交互性能和視覺穩定性。

Core Web Vitals 包含了三個指標：

INP（Interaction to Next Paint）：用于評估頁面交互的性能，它衡量的是從用戶與頁面進行交互（如點擊、觸摸等）到頁面下一次繪制（Paint）之間的時間。
LCP（Largest Contentful Paint）：用于評估頁面加載的性能，它衡量的是頁面加載的最大內容元素（如文本塊或圖片）出現在屏幕上的時間。
CLS（Cumulative Layout Shift）：用于評估頁面視覺穩定性，它衡量的是頁面在加載過程中由于內容布局變化而發生的意外移動。

圖片

性能測量工具

可以借助 Gooogle 開源的 web-vitals 庫來測量一些性能指標：

import {onCLS, onINP, onLCP, onFCP, onFID, onTTFB} from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onLCP(console.log);
onFCP(console.log);
onFID(console.log);
onTTFB(console.log);

使用 Google 提供免費的 PageSpeed Insights (PSI) 工具來測試網站的性能：

圖片

使用 Chrome Devtools 的 Lighthouse 選項卡測試性能指標：

圖片

注意，在 Lighthouse 中，不同指標在總分數中的占比是不同的：

圖片

責任編輯：武曉燕來源：前端充電寶

LCP 元素優化