改善產品詳細資料頁面的互動性，讓 Lighthouse 中的最大潛在 FID 降低 90%，Chrome 使用者體驗報告中的 FID 提升 9%。
Mercado Libre 是拉丁美洲最大的電子商務與付款服務系統。這項服務已在 18 個國家/地區推出，並在巴西、墨西哥和阿根廷的市場中居領先地位 (根據不重複訪客和網頁瀏覽次數)。
網站效能一直是該公司長期關注的焦點，但他們最近成立了一個團隊，負責監控成效，並在網站的不同部分套用最佳化方式。
本文將概述 Mercado Libre 前端架構團隊的 Guille Paz、Pablo Carminatti 和 Oleh Burkhay 所做的相關工作，以改善其中一個網站使用體驗核心指標：首次輸入延遲 (FID) 及其實驗室代理程式 總封鎖時間 (TBT)。
90%
Lighthouse 中的 FID 最大預估值降低
9%
更多使用者在 CrUX 中將 FID 視為「快速」
長時間工作、首次輸入延遲時間和總封鎖時間
執行耗用大量資源的 JavaScript 程式碼可能會導致長時間工作，也就是在瀏覽器主執行緒中執行超過 50 毫秒的工作。
首次輸入延遲時間 (FID) 是指從使用者首次與網頁互動 (例如點選連結) 起算，到瀏覽器實際能夠開始處理事件處理常式，以回應該互動所需的時間。執行耗用資源的 JavaScript 程式碼的網站可能會有多項耗時的工作，最終會對 FID 造成負面影響。
為了提供良好的使用者體驗，網站應力求首次輸入延遲時間低於 100 毫秒：
雖然 Mercado Libre 的網站在大多數部分的表現都很不錯，但他們在 Chrome 使用者體驗報告中發現，產品詳細資料頁面的 FID 很差。根據這些資訊，他們決定專注於改善網站產品頁面的互動性。
這些頁面可讓使用者執行複雜的互動，因此目標是改善互動性，而不會干擾重要的功能。
評估產品詳細資料頁面的互動性
FID 需要真人使用者，因此無法在實驗室中評估。不過，Total Blocking Time (TBT) 指標可在實驗室中測量，與實地測試的 FID 有良好關聯，而且也能擷取影響互動性的問題。
舉例來說，在以下追蹤記錄中，雖然在主執行緒上執行工作所花費的總時間為 560 毫秒，但其中只有 345 毫秒屬於總封鎖時間 (超過 50 毫秒的各項工作部分時間總和)：
Mercado Libre 在實驗室中使用 TBT 做為替代指標，以評估及改善產品詳細資料頁面的互動性。
以下是他們採用的一般做法：
- 使用 WebPageTest 來判斷實際裝置上哪些指令碼會讓主執行緒保持忙碌狀態。
- 使用 Lighthouse 判斷「可能的最長首次輸入延遲時間」(可能的最長 FID) 變更的影響。
使用 WebPageTest 以圖形呈現長時間的工作
WebPageTest (WPT) 是一種網頁效能工具，可讓您在世界各地的不同位置，對實際裝置執行測試。
Mercado Libre 使用 WPT 選擇與實際使用者相似的裝置類型和位置，重現使用者體驗。具體來說，他們選擇了 Moto 4G 裝置和 維吉尼亞州杜勒斯，因為他們希望模擬墨西哥 Mercado Libre 使用者的體驗。透過觀察 WPT 的主執行緒檢視畫面，Mercado Libre 發現有幾個連續的長時間工作，會將主執行緒阻斷 2 秒：
分析對應的廣告刊登序列後，他們發現這兩秒鐘的大部分時間都來自數據分析模組。應用程式的主要套件大小很大 (950 KB)，因此剖析、編譯和執行作業需要花費很長的時間。
使用 Lighthouse 判斷 FID 最大預估值
Lighthouse 不允許您選擇不同的裝置和位置，但這是診斷網站和取得效能最佳化建議的實用工具。
在產品詳細資料頁面上執行 Lighthouse 時，Mercado Libre 發現「最大潛在 FID」是唯一標示為紅色的指標，其值為 1710ms。
基於這項資訊，Mercado Libre 設定了目標，希望在 Lighthouse 和 WebPageTest 等實驗室工具中改善其最大潛在 FID 分數，並假設這些改善措施會影響實際使用者，因此會顯示在 Chrome 使用者體驗報告等實際使用者監控工具中。
最佳化長時間工作
第一個疊代
根據主執行緒追蹤記錄，Mercado Libre 設定了目標，要改善執行耗用資源的程式碼的兩個模組。
他們開始改善內部追蹤模組的成效。這個模組包含 CPU 密集工作，但對模組運作而言並非必要，因此可以安全移除。這讓整個網站的 JavaScript 減少了 2%。
接著，他們開始著手改善一般套件的大小：
Mercado Libre 使用 webpack-bundle-analyzer 偵測最佳化商機：
- 一開始，他們需要完整的 Lodash 模組。這項功能已改用個別方法 require 取代，只載入 Lodash 的子集，而非整個程式庫，並與 lodash-webpack-plugin 搭配使用，進一步縮減 Lodash 的大小。
他們也套用了以下 Babel 最佳化方式：
- 使用 @babel/plugin-transform-runtime 重複使用 Babel 的輔助程式，大幅縮減套件的大小。
- 使用 babel-plugin-search-and-replace 在建構期間替換符記，以便移除主套件中的大型設定檔。
- 新增 babel-plugin-transform-react-remove-prop-types，藉由移除屬性類型來節省一些額外的位元組。
經過這些最佳化調整後，套件大小縮減約 16%。
評估成效影響
這項變更將 Mercado Libre 的連續長時間工作時間從 兩秒縮短為一秒：
Lighthouse 顯示首次輸入延遲時間最長預估值減少了 57%：
第二次疊代
團隊持續深入研究長時間工作，以便找出後續改善方式。
根據這些資訊，他們決定實施以下變更：
- 繼續縮減主要套件的大小，以便最佳化編譯和剖析時間 (例如，移除不同模組中的重複依附元件)。
- 在元件層級套用程式碼分割功能，將 JavaScript 分割成較小的片段，以便更聰明地載入不同元件。
- 延遲元件復水，以便更聰明地使用主執行緒。這種做法通常稱為「部分水合」。
評估成效影響
產生的 WebPageTest 追蹤記錄顯示更小的 JS 執行片段：
在 Lighthouse 中，他們的 FID 最大預估值時間再減少 60%：
以視覺化方式呈現實際使用者的進度
雖然 WebPageTest 和 Lighthouse 等實驗室測試工具非常適合在開發期間重複使用解決方案，但真正的目標是改善實際使用者的體驗。
Chrome 使用者體驗報告提供使用者體驗指標，說明 Chrome 使用者實際造訪熱門網頁的體驗情形。您可以透過在 BigQuery 中執行查詢、PageSpeedInsights 或 CrUX API，取得報表中的資料。
CrUX 資訊主頁可輕鬆呈現核心指標的進度：
後續步驟
網站效能永遠不是一項完成的工作，而 Mercado Libre 也瞭解這些最佳化功能為使用者帶來的價值。除了在網站上持續套用多項最佳化功能 (包括產品資訊頁面的prefetching、圖片最佳化等)，他們也持續改善產品資訊頁面，以減少總封鎖時間 (TBT)，並透過代理 FID 進一步改善。這些最佳化措施包括：
- 針對程式碼分割解決方案進行疊代。
- 改善第三方指令碼的執行作業。
- 持續改善套件匯集器層級的素材資源套件功能 (webpack)。
Mercado Libre 擁有完整的成效視圖，因此在持續改善網站互動性之餘，也開始評估改善其他兩項現有 Core Web Vitals 的機會：LCP (最大內容繪製時間) 和 CLS (累積版面配置偏移)。