還在看那些老掉牙的效能優化文章麼？這些最新效能指標瞭解下

y_ck發表於2020-07-15
優化指標

效能優化相關的文章其實網上挺多，但是大部分都是在講如何優化效能，也就是講方法論。但是在實際工作中，如何量化效能優化也是相當重要的一環。今天本文會介紹谷歌提倡的七個使用者體驗指標（也可以認為是效能指標），每個指標分別根據以下幾點講解：

  1. 指標本身的作用、測量、推薦時間區間等
  2. 如何指標進行優化，該內容會在文末統一講解

FP & FCP

首次繪製，FP（First Paint），這個指標用於記錄頁面第一次繪製畫素的時間。

首次內容繪製，FCP（First Contentful Paint），這個指標用於記錄頁面首次繪製文字、圖片、非空白 Canvas 或 SVG 的時間。

這兩個指標看起來大同小異，但是 FP 發生的時間一定大於等於 FCP，如下圖是掘金的指標：

FP 指的是繪製畫素，比如說頁面的背景色是灰色的，那麼在顯示灰色背景時就記錄下了 FP 指標。但是此時 DOM 內容還沒開始繪製，可能需要檔案下載、解析等過程，只有當 DOM 內容發生變化才會觸發，比如說渲染出了一段文字，此時就會記錄下 FCP 指標。因此說我們可以把這兩個指標認為是和白屏時間相關的指標，所以肯定是最快越好。

上圖是官方推薦的時間區間，也就是說如果 FP 及 FCP 兩指標在 2 秒內完成的話我們的頁面就算體驗優秀。

LCP

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

LCP 其實能比前兩個指標更能體現一個頁面的效能好壞程度，因為這個指標會持續更新。舉個例子：當頁面出現骨架屏或者 Loading 動畫時 FCP 其實已經被記錄下來了，但是此時使用者希望看到的內容其實並未呈現，我們更想知道的是頁面主要的內容是何時呈現出來的。

此時 LCP 指標是能夠幫助我們實現想要的需求的。

上圖是官方推薦的時間區間，在 2.5 秒內表示體驗優秀。

TTI

首次可互動時間，TTI（Time to Interactive）。這個指標計算過程略微複雜，它需要滿足以下幾個條件

  1. 從 FCP 指標後開始計算
  2. 持續 5 秒內無長任務（執行時間超過 50 ms）且無兩個以上正在進行中的 GET 請求
  3. 往前回溯至 5 秒前的最後一個長任務結束的時間

這裡你可能會疑問為什麼長任務需要定義為 50ms 以外？

Google 提出了一個 RAIL 模型：

對於使用者互動（比如點選事件），推薦的響應時間是 100ms 以內。那麼為了達成這個目標，推薦在空閒時間裡執行任務不超過 50ms（W3C 也有這樣的標準規定），這樣能在使用者無感知的情況下響應使用者的互動，否則就會造成延遲感。

長任務也會在 FID 及 TBT 指標中使用到。

因此這是一個很重要的使用者體驗指標，代表著頁面何時真正進入可用的狀態。畢竟光內容渲染的快也不夠，還要能迅速響應使用者的互動。想必大家應該體驗過某些網站，雖然內容渲染出來了，但是響應互動很卡頓，只能過一會才能流暢互動的情況。

FID

首次輸入延遲，FID（First Input Delay），記錄在 FCP 和 TTI 之間使用者首次與頁面互動時響應的延遲。

這個指標其實挺好理解，就是看使用者互動事件觸發到頁面響應中間耗時多少，如果其中有長任務發生的話那麼勢必會造成響應時間變長。

其實在上文我們就講過 Google 推薦響應使用者互動在 100ms 以內：

TBT

阻塞總時間，TBT（Total Blocking Time），記錄在 FCP 到 TTI 之間所有長任務的阻塞時間總和。

假如說在 FCP 到 TTI 之間頁面總共執行了以下長任務（執行時間大於 50ms）及短任務（執行時間低於 50ms）

那麼每個長任務的阻塞時間就等於它所執行的總時間減去 50ms

所以對於上圖的情況來說，TBT 總共等於 345ms。

這個指標的高低其實也影響了 TTI 的高低，或者說和長任務相關的幾個指標都有關聯性。

CLS

累計位移偏移，CLS（Cumulative Layout Shift），記錄了頁面上非預期的位移波動。

大家想必遇到過這類情況：頁面渲染過程中突然插入一張巨大的圖片或者說點選了某個按鈕突然動態插入了一塊內容等等相當影響使用者體驗的網站。這個指標就是為這種情況而生的，計算方式為：位移影響的面積 * 位移距離。

以上圖為例，文字移動了 25% 的螢幕高度距離（位移距離），位移前後影響了 75% 的螢幕高度面積（位移影響的面積），那麼 CLS 為 0.25 * 0.75 = 0.1875。

CLS 推薦值為低於 0.1，越低說明頁面跳來跳去的情況就越少，使用者體驗越好。畢竟很少有人喜歡閱讀或者互動過程中網頁突然動態插入 DOM 的情況，比如說插入廣告~

介紹完了所有的指標，接下來我們來了解哪些是使用者體驗三大核心指標、如何獲取相應的指標資料及如何優化。

三大核心指標

Google 在今年五月提出了網站使用者體驗的三大核心指標，分別為：

  • LCP
  • FID
  • CLS

LCP 代表了頁面的速度指標，雖然還存在其他的一些體現速度的指標，但是上文也說過 LCP 能體現的東西更多一些。一是指標實時更新，資料更精確，二是代表著頁面最大元素的渲染時間，通常來說頁面中最大元素的快速載入能讓使用者感覺效能還挺好。

FID 代表了頁面的互動體驗指標，畢竟沒有一個使用者希望觸發互動以後頁面的反饋很遲緩，互動響應的快會讓使用者覺得網頁挺流暢。

CLS 代表了頁面的穩定指標，尤其在手機上這個指標更為重要。因為手機螢幕挺小，CLS 值一大的話會讓使用者覺得頁面體驗做的很差。

如何獲取指標

Lighthouse

你可以通過安裝 Lighthouse 外掛來獲取如下指標

web-vitals-extension

官方出品，你可以通過安裝 web-vitals-extension 外掛來獲取三大核心指標

web-vitals 庫

官方出品，你可以通過安裝 web-vitals 包來獲取如下指標

程式碼使用方式也挺簡單：

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Chrome DevTools

這個工具就不多做介紹了，開啟 Performance 即可快速獲取如下指標

如何優化指標

資源優化

該項措施可以幫助我們優化 FP、FCP、LCP 指標。

  • 壓縮檔案、使用 Tree-shaking 刪除無用程式碼
  • 服務端配置 Gzip 進一步再壓縮檔案體積
  • 資源按需載入
  • 通過 Chrome DevTools 分析首屏不需要使用的 CSS 檔案，以此來精簡 CSS
  • 內聯關鍵的 CSS 程式碼
  • 使用 CDN 載入資源及 dns-prefetch 預解析 DNS 的 IP 地址
  • 對資源使用 preconnect，以便預先進行 IP 解析、TCP 握手、TLS 握手
  • 快取檔案，對首屏資料做離線快取
  • 圖片優化，包括：用 CSS 代替蹄片、裁剪適配螢幕的圖片大小、小圖使用 base64 或者 PNG 格式、支援 WebP 就儘量使用 WebP、漸進式載入圖片

網路優化

該項措施可以幫助我們優化 FP、FCP、LCP 指標。

這塊內容大多可以讓後端或者運維幫你去配置，升級至最新的網路協議通常能讓你網站載入的更快。

比如說使用 HTTP2.0 協議、TLS 1.3 協議或者直接擁抱 QUIC 協議~

優化耗時任務

該項措施可以幫助我們優化 TTI、FID、TBT 指標。

  • 使用 Web Worker 將耗時任務丟到子執行緒中，這樣能讓主執行緒在不卡頓的情況下處理 JS 任務
  • 排程任務 + 時間切片，這塊技術在 React 16 中有使用到。簡單來說就是給不同的任務分配優先順序，然後將一段長任務切片，這樣能儘量保證任務只在瀏覽器的空閒時間中執行而不卡頓主執行緒

不要動態插入內容

該項措施可以幫助我們優化 CLS 指標。

  • 使用骨架屏給使用者一個預期的內容框架，突兀的顯示內容體驗不會很好
  • 圖片切勿不設定長寬，而是使用佔點陣圖給使用者一個圖片位置的預期
  • 不要在現有的內容中間插入內容，起碼給出一個預留位置

最後

以上是筆者對於使用者體驗指標的一些內容整理，如果有不懂的或者錯誤的地方歡迎指正及交流。

推薦關注我的微信公眾號【前端真好玩】，工作日推送高質量文章。

image.png

筆者就職於酷家樂，裝潢設計行業獨角獸。一流的視覺化、前端技術團隊，有興趣的可以簡歷投遞至 zx597813039@gmail.com

相關文章