尋找使用 Chrome 網路工具改善使用者體驗的機會。
今天，我們將介紹 Lighthouse、PageSpeed 和 DevTools 等新工具功能，協助您評估網站可以如何改善網站體驗指標。
為了複習相關工具，Lighthouse 是一套開放原始碼的自動化工具，可改善網頁品質。您可以在 Chrome 開發人員工具的偵錯工具套件中找到這項工具，並在任何網頁、公開網頁或需要驗證的情況下執行。您也可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 提供元素螢幕截圖等新功能，方便您目視檢查 UI 中影響使用者體驗指標的部分 (例如哪些節點造成版面配置位移)。
PageSpeed Insights 也已支援元素螢幕截圖，讓開發人員更容易找出一次性網頁效能的問題。
評估網站體驗核心指標
Lighthouse 可透過「合成」方式測量網站體驗核心指標，包括最大內容繪製、累計版面配置位移和總封鎖時間 (首次輸入延遲時間的研究室 Proxy)。這些指標反映載入、版面配置穩定性和互動完備性。網站體驗核心指標的未來「首次顯示內容所需時間」等其他指標也包含在內。
Lighthouse 報表的「指標」部分包含這些指標的研究室版本。您可以使用此摘要檢視需要注意的使用者體驗面向。
實際環境指標 (例如 Chrome 使用者體驗報告或 RUM 中的指標) 並無此限制，對於能反映實際使用者體驗的情況，這對於研究室資料具有極大助益。欄位資料無法提供研究室中取得的診斷資訊類型，因此兩者實際上就能派上用場。
找出網站體驗指標中有哪些部分需要改善
找出最大內容繪製元素
LCP 是用來評估感知載入體驗的評估結果，它會在網頁載入期間，標示主要或「最大」內容已載入且向使用者顯示的時間點。
Lighthouse 具備「最大內容繪製元素」稽核，可以識別哪個元素是最大內容繪製。只要將滑鼠遊標懸停至元素上，主瀏覽器視窗就會醒目顯示該元素。
如果這個元素是圖片，則這項資訊是一項實用的提示，建議您將圖片載入最佳化。Lighthouse 包含許多映像檔最佳化稽核，可協助您瞭解圖片是否可以更妥善壓縮、調整大小，或以更理想的現代圖片格式傳送。
您可能也會發現 AnnieSullivan 的 LCP 書籤小，只要按一下即可快速識別附有紅色矩形的 LCP 元素。
預先載入延遲探索的圖片，以改善 LCP
為了改善最大內容繪製功能，如果瀏覽器後來發現了重要的主頁橫幅，請預先載入這些圖片。如果需要在圖片可供偵測前載入 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">
藉助新增至 link 屬性的 imagesrcset 和 imagesizes 屬性，我們就可以透過 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 圖片的圖片，只要發現圖片的瀑布深度為 3 以上，皆可視為候選。
延遲載入畫面外圖片，並避免在 LCP 問題中順利載入
如果畫面外圖片對初始使用者體驗無關，則可延遲載入。這項技術可延後下載圖片，直到使用者捲動圖片為止，藉此減少重要資產的網路爭用情形，在某些情況下還可改善 LCP。「延遲畫面外映像檔」稽核程序可協助您：
重要的不需捲動位置圖片 (例如最大內容繪製圖片) 不應延遲載入。這樣做可能會延遲 LCP 圖片載入。Lighthouse 可透過「最大內容繪製圖片延遲載入」稽核，標示系統錯誤延遲載入 LCP 映像檔：
確定 CLS 貢獻
累計版面配置位移是一項測量視覺穩定性的評估標準。它會量化網頁內容的視覺切換位置。Lighthouse 設有名為「避免大型版面配置轉移」的 CLS 稽核。
這項稽核會醒目顯示對頁面位移影響最大的 DOM 元素。在左側的「Element」(元素) 欄中，您可以看到這些 DOM 元素清單和右側的 CLS 整體貢獻。
有了全新的 Lighthouse 元素螢幕截圖功能，我們就可以預覽稽核中提及的主要元素，還能點選放大畫面來更清楚地查看內容：
針對載入後的 CLS，您可以在「永久」以視覺化方式呈現哪些矩形元素對 CLS 造成最多影響。這項功能位於第三方工具中，例如 SpeedCurve 的網站體驗核心指標資訊主頁，而我也很喜歡使用 Defaced 的版面配置位移 GIF 產生器來執行以下操作：
如果想查看整個網站的版面配置位移問題，在 Search Console 的「Core Web Vitals」報告中，我獲得了許多距離。如此一來，我可以查看網站上具有高 CLS 的網頁類型 (在此案例中，可幫助自己識別需要花費時間在哪些範本部分)：
從無尺寸圖片中找出 CLS
為了限制沒有尺寸的圖片造成的累計版面配置位移，請在圖片和影片元素中加入寬度和高度大小屬性。這個方法可確保瀏覽器在圖片載入時，可在文件中分配正確的空間大小。
請參閱「在圖片上設定高度和寬度的重要性」一文，以充分說明在圖片尺寸和顯示比例的重要性。
從廣告中找出 CLS
Publisher Ads for Lighthouse 可讓您發掘改善網頁廣告載入體驗的機會，包括更新版面配置的貢獻，以及有可能超過使用者網頁可用時間的長時間工作。在 Lighthouse 中，您可以透過社群外掛程式來啟用這項功能。
請記住，廣告是網路版面配置位移的最大貢獻者之一。請務必：
- 將非頁緣固定廣告放在可視區域頂端附近時，請謹慎小心
- 保留最大的廣告版位尺寸，避免偏移量
避免使用非合成動畫
在大量 JavaScript 工作持續忙碌的情況下，非合成的動畫可能會在低階裝置上顯示為卡頓。這類動畫可能會引入版面配置位移。
如果 Chrome 發現無法合成的動畫，就會向 DevTools 追蹤記錄 Lighthouse 讀取報告，列出哪些含有動畫的元素並未合併，以及出現動畫的原因。詳情請參閱避免非合成動畫稽核。
對首次輸入延遲時間 / 總封鎖時間 / 長時間工作進行偵錯
「首次輸入」會測量從使用者首次與網頁互動 (例如點選連結、輕觸按鈕，或使用自訂 JavaScript 技術的控制項) 到瀏覽器實際能夠開始處理該互動事件處理常式的時間，長時間的 JavaScript 工作可能會影響這項指標和這項指標的 Proxy，也就是總封鎖時間。
Lighthouse 提供避免長時間的主執行緒工作稽核，其中會列出主執行緒中最長的工作。這有助於找出輸入延遲最差的因素。左欄會列出負責長時間的主執行緒工作的指令碼網址。
右側會顯示這些工作的持續時間。提醒您，長時間工作是執行時間超過 50 毫秒的工作。系統會將這個情況視為封鎖主執行緒的時間，足以影響影格速率或輸入延遲時間。
考慮到第三方服務進行監控時，我也很喜歡運用主執行緒執行時間軸視覺化 Calibre，以視覺化方式呈現這些成本，重點在於指出造成互動的長期工作有哪些父項和子項工作。
封鎖網路要求，查看 Lighthouse 中的前後影響問題
Chrome 開發人員工具支援封鎖網路要求，以瞭解個別資源移除或無法使用的影響。這有助於瞭解個別指令碼 (例如第三方嵌入程式或追蹤程式) 對總封鎖時間 (TBT) 和互動準備時間等指標的成本。
網路要求封鎖功能也適用於 Lighthouse！讓我們快速瀏覽一下網站的 Lighthouse 報告Perf 分數為 63/100， TBT 為 400 毫秒。深入瞭解程式碼後，我們發現這個網站會在 Chrome 中載入不必要的 Intersection Observer polyfill。讓我們封鎖吧！
我們可以在開發人員工具「Network」面板中的指令碼上按一下滑鼠右鍵，然後點選 Block Request URL 加以封鎖。我們接下來要為 Intersection Observer polyfill 執行這項操作。
接著，我們可以重新執行 Lighthouse。我們可以看到，總封鎖時間 (400 毫秒 => 300 毫秒) 因此效能分數提高了 (70/100)。
以門面元件取代昂貴的第三方嵌入內容
通常會使用第三方資源，在網頁中嵌入影片、社群媒體貼文或小工具。根據預設，大部分的嵌入都會快速載入，並且可能帶有高額酬載，對使用者體驗造成負面影響。如果第三方不重要 (例如使用者需要捲動才能看到之前的頁面)，這會造成浪費。
改善這類小工具效能的一種模式，是在使用者互動時延遲載入小工具。方法是顯示小工具的輕量預覽 (門面元件)，且只在使用者互動時載入完整版本。Lighthouse 具備稽核功能，建議可透過門面元件延遲載入 (例如 YouTube 影片嵌入) 的第三方資源。
提醒您，Lighthouse 會醒目顯示封鎖主執行緒超過 250 毫秒的第三方程式碼。這可能會曝露各種第三方指令碼 (包括 Google 撰寫的指令碼)，而如果轉譯的內容需要捲動才能查看，則可能比較需要延遲或延遲載入。
超越網站體驗核心指標的要求
除了強調網站體驗核心指標之外，新版的 Lighthouse 和 PageSpeed Insights 也會嘗試提供具體指引，協助您在開啟來源地圖的情況下，改善含有大量 JavaScript 的網頁應用程式載入速度。
包括為降低網頁 JavaScript 成本而不斷擴增的稽核系列，例如減少對 polyfill 的依賴，以及可能不適合使用者體驗的重複項目。
如要進一步瞭解網站體驗核心指標工具，請隨時關注 Lighthouse 團隊 Twitter 帳戶和「開發人員工具的新功能」。
主頁橫幅由 Unsplash 上的 Mercedes Mehling 提供。