使用 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 提供「Largest Contentful Paint 元素」稽核，可識別哪個元素是最大的內容繪製。將滑鼠遊標懸停在所需元素上，即可在主要瀏覽器視窗中醒目顯示該元素。
如果這項元素是圖片，您可以利用這項資訊對圖片的載入進行最佳化調整。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 元素清單，右側則會顯示這些 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 上提供。