聊聊前端效能指標那些事兒

語言: CN / TW / HK
時間 2023-03-28 13:02:42
主題:

作者：京東科技 郝樑

前言：作為 C 端前端研發，除了攻克業務難點以外，也要有更深層的自我目標，那就是效能優化。這事兒說大不大，說小也不小，但難度絕對不一般，所涉及的範圍優化點深入工程每個細胞。做好前端效能優化絕非簡單之事！文章主要內容介紹前端效能考核指標及優化方案。

 

一、前端效能指標有哪些？

根據 chrome Lighthouse 最新規則，前端效能指標考量主要有 FCP（First Contenful Paint）、SI（Speed Index）、LCP（Largest Contentful Paint）、TBT（Total Blocking Time）、CLS（Cumulative Layout Shift） ，佔比分別如下。



 

二、什麼是 FCP ？

FCP： First Contentful Paint 首次內容繪製是指測量頁面從開始載入到頁面內容（文字、圖片、背景圖、svg 元素或非白色 canvas 元素）的任何部分在螢幕上完成渲染的時間，是測量載入速度感知的重要指標之一。

示例：



從上圖可以觀察到，頁面載入開始到頁面渲染完成的時間軸中，FCP 發生在第二幀，首批文字和圖片在螢幕上已經渲染完成。

雖然頁面一部分內容已完成渲染，但這並非頁面所有內容全部完成渲染；這就是首次內容繪製（FCP）與最大內容繪製（LCP）最重要的區別。

FCP 效能值：首次內容繪製完成渲染時間應控制在 1.8s 以內。

我們可以從以下方向點優化 FCP ：

• 消除阻塞渲染的資源：
◦ <script> 標籤：在 <head> 標籤內的，並且沒有 defer/async 屬性
◦ <link rel="stylesheet"> 標籤：沒有 disabled 屬性，有 media="all" 屬性被認為是渲染阻塞
• 縮小 CSS 體積：寫法，壓縮 CSS
• 移除未使用的 CSS
• 預連線到所需的來源： <link rel="preconnect">
• 減少伺服器響應時間（TTFB）
• 避免多個頁面重定向：瀏覽器請求已定向的資源時，伺服器會返回一個 HTTP 響應，然後瀏覽器必須在新位置發出另一個 HTTP 請求來檢索資源。這種額外的網路傳輸會使資源載入延遲數百毫秒。
• 預載入關鍵請求：<link rel="preload" href="styles,css" as="style" />
• 避免巨大的網路負載：網路負載的中位數在 1700 到 1900 KiB 之間。 Lighthouse 會標記總網路請求超過 5000 KiB 的頁面。將總位元組大小保持在 1600 KiB 以下。
◦ 縮小和壓縮網路有效負載：縮小（程式碼），資料壓縮（Gzip，Brotli）
◦ 圖片使用 Webp
◦ JPEG 圖片壓縮級別設定為 85
• 對靜態資源使用高效的快取策略：可快取資源
◦ 字型、影象、媒體檔案、指令碼或樣式表
◦ 資源具有 200 、 203 、 206 HTTP 狀態碼
◦ 資源沒有明確的無快取策略
• 避免 DOM 過大：
◦ 會造成網路效率和負載效能差
◦ 頁面互動時，會導致重新計算節點的位置和樣式，降低渲染速度
◦ 可能會不知不覺儲存大量節點的引用，造成記憶體過大
• 最小化關鍵請求深度：鏈的長度越長，下載量越大，對頁面載入效能的影響就越大
◦ 減少關鍵資源數量（刪除，推遲下載，標記 async 等）
◦ 優化關鍵位元組數減少下載時間
◦ 優化剩餘關鍵資源的載入順序，儘早下載所有關鍵資源，縮短關鍵路徑長度
• 確保文字在網頁字型載入期間保持可見：預載入網路字型
• 保持較低的請求數和較小的傳輸大小： CSS 和 JavaScript ，圖片，字型，檔案，媒體


三、什麼是 Speed Index ？

SI：Speed Index 衡量頁面載入期間內容以視覺方式顯示的速度。 Lighthouse 首先捕獲瀏覽器中頁面載入的視訊，並計算幀之間的視覺速度。通俗的講，就是網頁從有東西到完全顯示內容的可見填充速度。

Speed Index 指標值：



我們可以從以下方向點優化 Speed Index 的方法：

• 減少主執行緒工作
• 減少 JavaScript 執行時間
• 確保文字在 webfont 載入期間保持可見


四、什麼是 LCP ？（重點）

LCP： Largest Contentful Paint 最大（最有意義）內容繪製，是指根據頁面首次開始載入的時間點來報告可視區域內可見的最大影象或者文字塊完成渲染的相對時間。





 

LCP 指標值：

• LCP <= 2.5s 合格
• 2.5s < LCP <= 4s 需要優化
• LCP > 4s 劣質


1. LCP 考量的元素有哪些？

主要考量以下幾種相關元素：

• <img> 元素
• 內嵌在 <svg> 元素內的 <image> 元素
• video 元素（使用封面圖片）
• 通過 url（）函式載入的帶有背景影象的元素
• 帶有文字或其他行內元素文字的塊級元素

2. LCP 元素大小是如何定義的？

最大內容繪製（LCP）的元素大小是指使用者在可視區域內可見的大小，所以考量都是基於可視區域為準，如果元素有延伸到可視區域外，或者元素被裁剪或包含不可見的溢位，這些部分不計入元素大小；

對於影象元素的大小，指標會對比可見尺寸與原始尺寸，取尺寸小者為準；例如雙倍圖以可見尺寸為準，拉伸放大圖則以原始尺寸為準；

對於文字元素，元素的大小為文字節點的大小（包含所有文字節點的最小矩形）；

WARNING： 所有元素通過 CSS 設定的任何邊距、填充或邊框都不在考量範圍內。另外如果設定了滿屏背景圖，但螢幕可視區域內有佔比較大的元素（浮在背景圖上的元素），導致背景圖暴漏可視範圍較小，那麼最大內容會選擇可視區域內最大元素。

並且，一個元素只有在渲染完成後對使用者可見後才能視為最大內容元素。

3. LCP 繪製時間上報

因為網路或技術原因，網頁的載入通常是分段進行的， 所以最大元素也在發生變化。

為了應對這種變化，瀏覽器在繪製第一幀後立即分發一個 largest-contentful-paint 型別的 PerformanceEntry （代表了 performance 時間列表中單個 metric 資料；performance.getEntries() 獲取時間列表資料），用於識別最大內容元素。渲染後續幀之後，瀏覽器會在最大內容元素髮生變化時分發另一個 PerformanceEntry 。

頁面的元素（某一個元素）只有在渲染完成後並且對使用者可見後才能視為最大內容元素。未載入的影象不會視為渲染完成，也就不能視為最大內容元素。字型阻塞期使用字型的文字也是如此。這些情況下，較小的元素會被報告為最大的元素，但一旦更大的元素渲染完成，則會上報另一個 PerformanceEntry 物件。

除了延遲載入的影象與字型外，頁面可能會在新內容（介面請求等）可用時向 DOM 新增新元素內容。如果有一個新元素大於先前的最大內容元素，則瀏覽器還會上報一個新的 PerformanceEntry 物件。

如果當前的最大內容元素從可視區域被移除（甚至從 DOM 中被移除），那麼除非有一個更大的元素完成渲染，否則該元素將持續作為最大內容元素，不會更改 performanceEntry 物件。

當用戶與頁面進行互動（通過輕觸、滾動或按鍵）時，瀏覽器將立即停止上報 PerformanceEntry 物件，因為使用者互動通常會改變頁面原有內容。

瀏覽器出於安全考慮，對於缺少 Timing-Allow-Origin 標頭的跨域物件來說，是無法得到影象渲染時間戳的，只有影象載入時間戳。正確的設定 Timing-Allow-Origin 標頭，可以獲取更準確的指標值。

4. 當元素佈局和元素大小更改時，哪些情況會影響 LCP

情況1：對元素大小或位置修改不會生成新的 LCP 候選物件，只有元素在可視區域內的初始大小和位置會被納入考量範圍；

情況2：最初在可視範圍內渲染，然後被移除可視區域外的元素仍將報告他在可視區域內的初始大小；

情況3：而在螢幕可視範圍外渲染完成，過度到螢幕上的元素則不做報告。

示例：最大元素隨著內容載入完成而發生改變





第一個示例中，新內容渲染完成，因此使最大元素髮生了改變。

第二個示例中，由於佈局的改變，先前的最大內容從可視區域中被移除了。

如果延遲內容沒有初始最大元素大，則 LCP 取初始值。

5. 最大元素並非重要元素

頁面上最重要元素並非最大元素，這個時候開發者考核指標是最重要元素。

6. 更快的渲染主要內容，降低 LCP 值

影響頁面渲染效能主要原因有以下幾點，通過優化它們可以降低 LCP 指標值

（1） 伺服器響應速度：

是指瀏覽器從伺服器接收內容所需的時間越長，使用者在螢幕上所渲染內容的時間就越長。更快的伺服器將直接影響包括 LCP 各項指標的載入值。

可優化方向：

• 優化伺服器效能
• 將使用者路由到附近的 CDN
• 快取資源
• 優先使用快取提供 HTML 頁面
• 儘早建立第三方連結
• 使用簽名交換

（2） 阻塞渲染的 JS 和 CSS ：

瀏覽器渲染內容之前需要先解析 DOM 樹，解析過程中，如果遇到任何外部樣式表（<link rel="stylesheet">）或同步 JavaScript 標籤（<script src="main.js">），則會暫停解析。

所以指令碼跟樣式都是阻塞渲染的資源，這些資源都會導致 FCP 延遲，從而導致 LCP 延遲。所以延遲載入非必要的 JS 和 CSS ，從而提高網頁主要內容載入速度。

減少 CSS 阻塞時間的方法：

• 消減 CSS ： 刪除 CSS 中的空格、換行、縮排、註釋等字元
• 延遲載入非關鍵 CSS ： 將初始渲染時不需要的 CSS 提取到一個檔案，進行非同步載入
• 內聯關鍵 CSS ： 把首屏內容的關鍵 CSS 直接包在 <head> 中，將 CSS 內聯； Critters 是一個 webpack 外掛，能夠內聯關鍵 CSS 並對其餘部分進行懶載入

減少阻塞渲染的 JavaScript 數量能夠讓渲染速度更快，降低 LCP 值

減少 JS 阻塞時間的方法：

• 消減壓縮 JavaScript 檔案
• 延遲載入未使用的 JavaScript 檔案
• 最大限度的減少未使用的 polyfill

（3） 緩慢的資源載入速度 ：

雖然 CSS 或 JavaScript 阻塞時間的增加會直接導致效能下降，但載入許多其他型別資源所需的時間也會影響繪製時間。

影響 LCP 的元素有以下幾種：

• <img> 標籤
• 內嵌 <svg> 的 <image> 標籤
• <video> 元素的封面圖
• 通過 url() 函式載入的帶有背景圖的元素
• 包含文字節點或其他行內級文字元素的塊級元素

優化方法：

• 優化圖片： 壓縮圖片，使用 webp 格式，圖片資源上傳 CDN ；當然能用程式碼實現儘量不使用圖片；、
• 預載入重要資源： 使用 <link rel="preload"> 提高優先順序進行下載和快取；
• 壓縮文字檔案： Gzip、Brotli （google 出版）
• 基於網路連線交付不同資產（自適應服務）： navigator.connection.effectiveType （有效連線型別 4G）， navigator.connection.saveData （啟用/禁用資料保護程式）， navigator.hardwareConcurrency （cpu 核心數）， navigator.deviceMemory （裝置記憶體）
• 快取資源： service woker 在 worker 上下文中執行： 因此它沒有 DOM 訪問許可權，並且是執行在不同執行緒上，因此它是非阻塞的。

（4） 客戶端渲染：

如 React 、 Vue 、 Angular 這類框架所搭建的單頁面應用，是完全在客戶端中處理邏輯的。

優化方法：

• 最小化關鍵 JavaScript ： 精簡 JavaScript ， 延遲載入未使用的 JavaScript ， 最大限度減少未使用的 polyfill
• 使用服務端渲染： 用伺服器將主要內容首先在伺服器渲染為 HTML ， 客戶端將所有 JavaScript 及所需資料"水合"到相同的 DOM 內容中
• 使用預渲染： 使用無頭瀏覽器，提前搭建每個路由的靜態 HTML 檔案，然後將這些檔案與應用程式所需的 JavaScript 包一起運送


五、什麼是 TBT ？

TBT： Total Blocking Time 總阻塞時間，是頁面被阻塞響應使用者互動的總時間。 TBT = LCP （首次最大內容繪製）和可互動時間之間所有長時間任務的阻塞部分之和。是測量頁面載入響應的重要指標。

超過 50 毫秒的任務即為長任務。 超出 50 毫秒的時間量為阻塞部分。

例如：檢測到一個 90 毫秒的任務，則阻塞部分為 40 毫秒（90 - 50 = 40）

TBT 指標：



優化方法：

• 減少不必要的 JavaScript 載入、解析或執行。減少 JavaScript 負載、刪除未使用的程式碼或有效載入第三方 JavaScript 可以提高 TBT 分數。
• 減少低效的 JavaScript 語句。例如： document.querySelectorAll('a') 會返回所有符合的節點


六、什麼是 CLS ？

CLS： 累計佈局偏移（CLS）是測量視覺穩定性的重要指標。是整個頁面宣告週期內發生的所有意外佈局偏移中最大一連串的佈局偏移分數。

頁面內容的意外偏移大多是由於非同步資源載入，或者動態新增 DOM 元素到頁面現有內容上方導致的。罪魁禍首可能是未知尺寸的影象或視訊、實際渲染後比後備字型更大或更小的字型等。

CLS 指標：



注意： 只有當現有元素的起始位置發生變更時才算做佈局偏移。如果將新元素新增到 DOM 或是現有元素更改大小，則不算做佈局偏移。只有當元素的變更會導致其他可見元素的起始位置發生變化，才叫偏移。

計算公式： 佈局偏移分數 = 影響分數 x 距離分數

影響分數： 前一幀和當前幀的所有不穩定元素的課件區域集合（佔總可視區域的部分）就是當前幀的影響分數。

距離分數： 指的是任何不穩定元素在一幀中位移的最大距離（水平或垂直）除以可視區域的最大尺寸維度（寬度或高度，以較大者為準）。

產生 CLS 的常見原因：

• 無尺寸的圖片
• 無尺寸的廣告，嵌入和 iframe
• 動態注入的內容
• 導致不可見文字閃爍（FOIT）、無樣式文字閃爍（FOUT）的網路字型
• 在更新 DOM 之前等待網路響應的操作

優化方法：

• 在圖片和視訊元素上包含尺寸屬性
• 非使用者互動響應的情況下，都不要在現有的內容上方插入其他內容
• 首選轉換動畫，而不是觸發佈局偏移的屬性動畫


以上五個指標就是目前前端效能指標考量點，以及產生問題原因，優化方法等。每個優化點都可以擴展出很多知識以及學習點，所以前端優化這個工作鏈路依然很長；單一點的優化效果可能並不明顯，但五個點全部優化，定然會有質的飛躍。

在實際專案中，優先從前端自身出發，優化完自身後，再去優化協同項。

另外前端優化是一件可持續，並長久的事情，工具技術升級的迭代也會提升專案效能，針對優化這樣的工作一定要持續下去，而不是做一次就OK了。

前端效能優化這條路，道阻且長，行則將至，專研就會有進步，最終定然會成功達到目標。

文章參考： http://web.dev/ http://developer.chrome.com/

 

「」