使用 Chrome 的網路工具尋找改善使用者體驗的機會。
今天將介紹 Lighthouse、PageSpeed 和開發人員工具中的全新工具功能，有助於瞭解網站如何運用網站體驗指標進行改善。
再次複習一下工具，Lighthouse 是一項開放原始碼的自動化工具，可改善網頁品質。您可以在 Chrome 開發人員工具中，找到這個偵錯工具，並針對任何網頁、公開網頁或需要驗證的網頁執行這項工具。您也可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 提供元素螢幕截圖等新功能，讓您更輕鬆地檢查 UI 特定部分，進而改善使用者體驗指標 (例如哪些節點導致版面配置位移)。
我們也在 PageSpeed Insights 中推出元素螢幕截圖的支援功能，方便您輕鬆找出執行網頁的一次性效能問題。
評估 Core Web Vitals
Lighthouse 可以合成評估 Core Web Vitals 指標，包括「Largest Contentful Paint」、Cumulative Layout Shift 和 Total Blocking Time (用於 First Input Delay 的研究室 Proxy)。這些指標可反映載入、版面配置穩定性和互動完備性。未來 Core Web Vitals 未來的部分也會醒目顯示「First Contentful Paint」等其他指標。
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">
透過新增至 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 圖片。如果系統透過「最大內容繪製圖片已延遲載入」稽核功能，以錯誤方式延遲載入 LCP 圖片，Lighthouse 會醒目顯示：
識別 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 讀取作業回報，以便列出哪些含有動畫的元素未合成，以及原因為何。您可以在避免非複合動畫稽核中找到這些屬性。
偵錯首次輸入延遲時間 / 總封鎖時間 / 長時間工作
「首次輸入」會評估使用者初次與網頁互動 (例如點選連結、輕觸按鈕或使用以 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。這次，我們可以看到效能分數提高了 (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 帳戶和 開發人員工具的新功能。
主頁橫幅 來自 Unsplash 上的 Mercedes Mehling。