運用 Chrome 的網路工具，找出改善使用者體驗的機會。
發布日期：2021 年 5 月 11 日
今天，我們將介紹 Lighthouse、PageSpeed 和 DevTools 中的新工具功能，協助您找出網站在網站使用體驗指標方面可改善之處。
提醒一下，Lighthouse 是一項開放原始碼的自動化工具，可用來改善網頁品質。您可以在 Chrome 開發人員工具中找到這項功能，並針對任何網頁 (公開或需要驗證) 執行這項功能。您也可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 包含元素螢幕截圖等新功能，可讓您更輕鬆地檢視影響使用者體驗指標的 UI 部分 (例如影響版面配置變更的節點)。
我們也已在 PageSpeed Insights 中提供元素螢幕截圖支援功能，讓您更輕鬆地找出網頁一次性成效執行作業的問題。
評估 Core Web Vitals
Lighthouse 可綜合評估Core Web Vitals 指標，包括最大內容繪製、累積版面配置偏移和總封鎖時間 (首次輸入延遲時間的實驗室代理程式)。這些指標反映載入、版面配置穩定性和互動就緒情況。網站體驗核心指標的未來中強調的其他指標，例如首次顯示內容所需時間，也都會列在其中。
Lighthouse 報表的「指標」部分會提供這些指標的實驗室版本。您可以使用這項功能，一覽需要關注的使用者體驗面向。
欄位指標 (例如 Chrome 使用者體驗報告或 RUM 中的指標) 則不受此限制，且可反映實際使用者的體驗，因此是實驗室資料的寶貴補充資料。實驗室資料無法提供您在實驗室中取得的診斷資訊，因此這兩者是相輔相成。
找出可改善的 Web Vitals 項目
找出最大內容繪製元素
LCP 是用來評估感知載入體驗的指標。在網頁載入期間，標示主要 (或「最大」) 內容已載入且可供使用者查看的時間點。
Lighthouse 提供「最大內容繪製元素」稽核，可找出哪個元素是最大內容繪製。將滑鼠游標懸停在元素上，即可在主瀏覽器視窗中醒目顯示該元素。
如果這個元素是圖片，這項資訊就是實用的提示，建議您最佳化這張圖片的載入作業。Lighthouse 包含多項圖片最佳化稽核，可協助您瞭解圖片是否可採用更優異的壓縮方式、調整大小或以更合適的新型圖片格式呈現。
您也可以使用 Annie Sullivan 開發的 LCP 書籤小工具，只要按一下即可快速找出 LCP 元素。
預先載入較晚發現的圖片，以改善 LCP
如要改善 Largest Contentful Paint，如果瀏覽器較晚發現關鍵的英雄圖片，請預先載入這些圖片。如果圖片可供偵測前需要先載入 JavaScript 套件，就可能發生偵測延遲的情況。
我們常常會收到一些關於預先載入 LCP 圖片的常見問題，也許值得簡單介紹一下。
您可以預先載入回應式圖片嗎？是。假設我們使用 srcset 和 sizes 指定回應式主圖片，如下所示：
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
由於 imagesrcset 和 imagesizes 屬性已新增至 link 屬性，我們可以使用 srcset 和 sizes 使用的相同圖片選取邏輯，預先載入回應式圖片：
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
如果 LCP 圖片是透過 CSS 背景定義，稽核作業是否也會強調預先載入機會？是。
無論是透過 CSS 背景或 <img> 標示為 LCP 圖片的任何圖片，如果在瀑布流深度為三或以上時發現，都會列為候選圖片。
延遲載入畫面外圖片，並避免在 LCP 中執行此操作
畫面外圖片如果對初始使用者體驗不重要，可以採用延遲載入的方式。這項技巧會延遲下載圖片，直到使用者捲動到圖片附近為止，藉此減少關鍵素材資源的網路爭用情形，並在某些情況下改善 LCP。「延遲載入畫面外圖片」稽核可協助您解決這個問題：
不應延遲載入關鍵的不需捲動位置圖片，例如最大內容繪製圖片。這麼做可能會延遲 LCP 圖片的載入時間。如果 Lighthouse 發現 LCP 圖片未正確延遲載入，就會透過「已延遲載入最大內容繪製圖片」稽核項目醒目標示：
找出 CLS 貢獻
累計版面配置位移是視覺穩定性的評估指標。它會量化網頁內容在視覺上的位移程度。Lighthouse 提供名為「避免大型版面配置位移」的稽核項目，可用於偵錯 CLS。
這項稽核會醒目顯示對網頁位移影響最大的 DOM 元素。在左側的「元素」欄中，您會看到這些 DOM 元素的清單，以及右側的整體 CLS 貢獻。
多虧全新的 Lighthouse 元素螢幕截圖功能，我們可以看到稽核中指出的關鍵元素視覺預覽畫面，並透過點選放大功能，更清楚查看畫面：
對於負載後的 CLS，持續使用矩形來視覺化哪些元素對 CLS 的影響最大，可能會有價值。這項功能可在第三方工具中找到，例如 SpeedCurve 的 Core Web Vitals 資訊主頁，以及我喜歡使用的 Defaced 的版面配置位移 GIF 產生器：
如要查看網站層級的版面配置偏移問題，我會使用 Search Console 的 Core Web Vitals 報表。這讓我可以查看網站上 CLS 值偏高的網頁類型 (在本例中，可協助我自行找出需要花時間處理的部分範本)：
從沒有尺寸的圖片中找出 CLS
如要限制由沒有尺寸的圖片造成的累積版面配置位移，請在圖片和影片元素中加入寬度和高度大小屬性。這種做法可確保瀏覽器在圖片載入期間，可在文件中分配正確的空間量。
請參閱「再次強調設定圖片高度和寬度的重要性」，瞭解思考圖片尺寸和顯示比例的重要性。
找出廣告的 CLS
Lighthouse 的發布商廣告可協助您找出改善網頁廣告載入體驗的機會，包括對版面配置位移和長時間工作項目的貢獻，這些項目可能會延後網頁可供使用者的時間。在 Lighthouse 中，您可以透過社群外掛程式啟用這項功能。
請注意，廣告是造成網站版面配置變動的最大因素之一。請務必：
- 請小心在可視區域頂端附近放置非固定廣告
- 為廣告版位保留盡可能大的尺寸，避免出現轉換
避免使用非合成的動畫
如果 JavaScript 工作量大，導致主執行緒繁忙，未合成的動畫在低階裝置上可能會呈現為卡頓狀態。這類動畫可能會導致版面配置移位。
如果 Chrome 發現動畫無法合成，就會將這項資訊回報至 LightHouse 讀取的開發人員工具追蹤記錄，讓 LightHouse 列出哪些含有動畫的元素未合成，以及原因。您可以在「避免使用未合成的動畫」稽核項目中找到這些動畫。
檢查首次輸入延遲時間 / 總封鎖時間 / 長時間工作
首次輸入延遲時間：從使用者首次與網頁互動起算 (例如點選連結、輕觸按鈕或使用自訂的 JavaScript 驅動控制項)，到瀏覽器實際能夠開始處理事件處理常式，以回應該互動所需的時間。長時間的 JavaScript 工作可能會影響這項指標，以及這項指標的代理值「總封鎖時間」。
Lighthouse 包含「避免長時間在主執行緒上執行的工作」稽核，列出主執行緒上執行時間最長的工作。這項資訊有助於找出造成輸入延遲的主因。在左側欄中，我們可以看到負責處理長主執行緒工作之指令碼的網址。
在右側，我們可以看到這些工作的時間長度。提醒您，長時間工作是指執行時間超過 50 毫秒的工作。這會導致主執行緒長時間阻斷，進而影響影格速率或輸入延遲時間。
如果您考慮使用第三方服務進行監控，我也很喜歡 Calibre 提供的主執行緒執行時間表視覺化圖示，可用於呈現這些成本，並突顯影響互動性的長時間工作，包括父項和子項工作。
封鎖網路要求，在 Lighthouse 中查看影響
Chrome 開發人員工具支援封鎖網路要求，以便查看個別資源遭移除或無法使用所造成的影響。這有助於瞭解個別指令碼 (例如第三方嵌入或追蹤器) 對總阻斷時間 (TBT) 和互動時間等指標的影響。
網路要求封鎖功能也適用於 Lighthouse！讓我們快速查看網站的 Lighthouse 報表。效能分數為 63/100，TBT 為 400 毫秒。深入研究程式碼後，我們發現這個網站在 Chrome 中載入 Intersection Observer polyfill，但這並非必要。讓我們封鎖它！
我們可以按一下開發人員工具網路面板中的指令碼，然後按一下 Block Request URL 來封鎖指令碼。我們會在這裡為 Intersection Observer polyfill 執行這項操作。
接下來，我們可以重新執行 Lighthouse。這次我們可以看到成效分數有所提升 (70/100)，因為總阻斷時間 (400 毫秒 => 300 毫秒)。
使用門面元件取代成本高昂的第三方嵌入功能
一般來說，使用第三方資源將影片、社群媒體貼文或小工具嵌入網頁中，根據預設，大部分的嵌入內容會立即載入，且可能會附帶會對使用者體驗造成負面影響的酬載。如果第三方服務不重要 (例如使用者需要捲動畫面才能看到第三方服務)，這麼做就會造成浪費。
在使用者互動時延遲載入小工具，是改善這類小工具效能的一種模式。您可以透過算繪小工具的輕量預覽畫面 (外觀) 來達成這項目標，並只在使用者與小工具互動時載入完整版本。Lighthouse 的稽核功能會推薦可使用門面元件延遲載入的第三方資源，例如 YouTube 嵌入影片。
提醒您，Lighthouse 會醒目顯示會封鎖主執行緒超過 250 毫秒的第三方程式碼。這可能會顯示所有第三方指令碼 (包括 Google 撰寫的指令碼)，如果這些指令碼所算繪的內容需要捲動才能查看，則可能需要改進延遲或延後載入。
除了 Core Web Vitals
除了強調 Core Web Vitals 之外，最新版本的 Lighthouse 和 PageSpeed Insights 也提供具體指引，讓您在啟用原始碼對照圖的情況下，瞭解如何加快載入大量 JavaScript 的網路應用程式。
其中包括越來越多的稽核項目，可減少網頁中的 JavaScript 成本，例如減少對 polyfill 和重複項目的依賴，這些項目可能並非使用者體驗所需。
如要進一步瞭解 Core Web Vitals 工具，請密切留意 Lighthouse 團隊的 Twitter 帳戶和 DevTools 的新功能。
主頁橫幅，由 Mercedes Mehling 在 Unsplash 上提供。