運用 Chrome 的網頁工具，找出提升使用者體驗的機會。
發布日期：2021 年 5 月 11 日
今天，我們將介紹 Lighthouse、PageSpeed 和開發人員工具中的新工具功能，協助您找出網站可如何改善Web Vitals。
Lighthouse 是一項開放原始碼的自動化工具，可用來改善網頁品質。您可以在 Chrome 開發人員工具偵錯工具套件中找到這項工具，並針對任何網頁 (無論是公開網頁或需要驗證的網頁) 執行。您也可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 包含元素螢幕截圖等新功能，可讓您更輕鬆地檢查影響使用者體驗指標的 UI 部分 (例如哪些節點會導致版面配置位移)。
我們也支援 PageSpeed Insights 的元素螢幕截圖，可更輕鬆地找出網頁一次性效能執行的問題。
評估 Core Web Vitals
Lighthouse 可綜合評估Core Web Vitals 指標，包括Largest Contentful Paint、累計版面配置位移和Total Blocking Time (First Input Delay的實驗室 Proxy)。這些指標反映了載入、版面配置穩定性和互動就緒程度。其他指標，例如網站體驗核心指標未來發展中強調的首次顯示內容所需時間，也包含在內。
Lighthouse 報表的「指標」部分包含這些指標的實驗室版本。您可以透過這份摘要，瞭解哪些使用者體驗需要留意。
欄位指標 (例如 Chrome 使用者體驗報告或 RUM 中的指標) 沒有這項限制，且能反映實際使用者的體驗，因此是實驗室資料的重要補充。實測資料無法提供實驗室資料中的診斷資訊，因此兩者相輔相成。
找出可改善網站體驗指標的地方
找出 Largest Contentful Paint 元素
LCP 是評估使用者感知載入體驗的指標。這項指標會標示網頁載入期間，主要 (或「最大」) 內容載入完成並顯示給使用者的時間點。
Lighthouse 提供「Largest Contentful Paint 元素」稽核功能，可找出 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 圖片，且在瀑布圖深度為三或以上時發現，則該圖片為候選圖片。
延遲載入畫面外圖片，並避免對 LCP 圖片進行這項操作
如果畫面外圖片對初始使用者體驗不重要，可以延遲載入。這項技術會延遲下載圖片，直到使用者捲動到圖片附近為止，這樣可以減少重要素材資源的網路爭用，在某些情況下還能改善 LCP。「延遲載入畫面外圖片」稽核可協助您：
不需捲動位置的重要圖片 (例如 Largest Contentful Paint 圖片) 不應延遲載入。否則可能延遲 LCP 圖片載入。如果 LCP 圖片不正確地延遲載入，Lighthouse 會透過「Largest Contentful Paint image was lazily loaded」稽核項目醒目顯示：
找出 CLS 影響因素
Cumulative Layout Shift 是視覺穩定性的評估指標。這項指標會量化網頁內容在視覺上的位移程度。Lighthouse 有一項用於偵錯 CLS 的稽核，稱為「避免大幅度版面配置位移」。
這項稽核會醒目顯示對網頁位移影響最大的 DOM 元素。左側的「元素」欄會列出這些 DOM 元素，右側則會顯示這些元素對整體 CLS 的影響。
有了全新的 Lighthouse 元素螢幕截圖功能，我們不僅能查看稽核中註明的關鍵元素視覺預覽，還能點選縮放功能，更清楚地查看：
對於載入後的 CLS，持續使用矩形圖示，呈現對 CLS 影響最大的元素，可能會有幫助。這項功能可在 SpeedCurve 的 Core Web Vitals 資訊主頁等第三方工具中找到，我喜歡使用 Defaced 的 Layout Shift GIF 產生器：
如要查看整個網站的版面配置位移問題，Search Console 的 Core Web Vitals 報表非常實用。這讓我能查看網站上 CLS 較高的網頁類型 (在本例中，這有助於自行找出需要花時間處理的範本部分)：
找出未指定尺寸的圖片造成的 CLS
如要限制因圖片未指定尺寸而造成的 Cumulative Layout Shift，請在圖片和影片元素中加入寬度和高度屬性。這種做法可確保瀏覽器在載入圖片時，能在文件中分配正確的空間。
請參閱「Setting Height And Width On Images Is Important Again」(再次強調設定圖片高度和寬度的重要性)，瞭解考量圖片尺寸和顯示比例的重要性。
找出廣告造成的 CLS
Publisher Ads for Lighthouse 可協助您找出改善網頁廣告載入體驗的機會，包括版面配置位移和長時間任務，這些因素可能會延遲使用者可使用網頁的時間。在 Lighthouse 中，您可以透過社群外掛程式啟用這項功能。
請注意，廣告是網頁版面配置位移的最大原因之一。請務必：
- 在可視區域頂端附近放置非頁緣固定廣告時，請務必小心
- 為廣告版位預留最大空間，避免版面位移
避免使用非合成的動畫
如果 JavaScript 任務繁重，導致主執行緒忙碌，未合成的動畫在低階裝置上可能會出現卡頓。這類動畫可能會導致版面配置位移。
如果 Chrome 發現動畫無法合成，就會向 Lighthouse 讀取的開發人員工具追蹤記錄回報，讓 Lighthouse 列出哪些含有動畫的元素未合成，以及原因。您可以在「Avoid non-composited animations」(避免非複合動畫) 稽核中找到這些動畫。
對 First Input Delay/Total Blocking Time/長時間任務進行偵錯
首次輸入評估的是從使用者首次與網頁互動 (例如點選連結、輕觸按鈕或使用自訂 JavaScript 控制項)，到瀏覽器實際開始處理事件處理常式以回應互動的時間。長時間的 JavaScript 工作可能會影響這項指標，以及這項指標的代理指標：Total Blocking Time。
Lighthouse 包含「避免長時間的主要執行緒工作」稽核，會列出主要執行緒上執行時間最長的工作。這有助於找出造成輸入延遲的主因。左欄會顯示負責長時間主執行緒工作的指令碼網址。
右側會顯示這些工作的時間長度。提醒您，長時間任務是指執行時間超過 50 毫秒的工作。這會阻斷主執行緒，足以影響影格速率或輸入延遲時間。
如果考慮使用第三方服務進行監控，我也很喜歡 Calibre 的主執行緒執行時間軸視覺效果，可用於視覺化這些成本，並醒目顯示導致長時間任務影響互動性的父項和子項任務。
封鎖網路要求，在 Lighthouse 中查看前後影響
Chrome 開發人員工具支援封鎖網路要求，可查看移除或無法使用個別資源時的影響。這有助於瞭解個別指令碼 (例如第三方嵌入或追蹤器) 對 Total Blocking Time (TBT) 和 Time to Interactive 等指標的影響。
網路要求封鎖功能也適用於 Lighthouse！我們來快速查看網站的 Lighthouse 報表。效能分數為 63/100，TBT 為 400 毫秒。深入研究程式碼後，我們發現這個網站在 Chrome 中載入 Intersection Observer polyfill，但這並非必要。封鎖吧！
在開發人員工具的「網路」面板中，對指令碼按一下滑鼠右鍵，然後點選「Block Request URL」即可封鎖。這裡我們將為 Intersection Observer 填充進行這項操作。
接著，我們可以重新執行 Lighthouse。這次可以看到效能分數有所提升 (70/100)，Total Blocking Time 也有所改善 (400 毫秒 => 300 毫秒)。
使用門面元件取代耗費資源的第三方嵌入內容
在網頁中嵌入影片、社群媒體貼文或小工具時，通常會使用第三方資源。根據預設，大多數嵌入內容都會立即積極載入，並可能伴隨高昂的酬載，對使用者體驗造成負面影響。如果第三方並非重要資源 (例如使用者需要捲動才能看到)，就會造成浪費。
如要改善這類小工具的效能，其中一種模式是在使用者互動時延遲載入。您可以先顯示輕量版小工具預覽畫面 (外觀)，等到使用者與其互動時，再載入完整版本。Lighthouse 會進行稽核，並建議可使用門面元件延遲載入的第三方資源，例如 YouTube 影片嵌入。
提醒您，Lighthouse 會醒目顯示封鎖主執行緒超過 250 毫秒的第三方程式碼。這項功能可顯示各種第三方指令碼 (包括 Google 製作的指令碼)，如果指令碼轉譯的內容需要捲動才能查看，建議延遲或延遲載入。
超越 Core Web Vitals
除了醒目顯示 Core Web Vitals 之外，近期版本的 Lighthouse 和 PageSpeed Insights 也會嘗試提供具體指引，協助您在啟用來源對應的情況下，改善 JavaScript 密集網頁應用程式的載入速度。
這包括越來越多的稽核項目，可減少網頁中 JavaScript 的成本，例如減少對 polyfill 的依賴，以及使用者體驗可能不需要的重複項目。
如要進一步瞭解 Core Web Vitals 工具，請密切關注 Lighthouse 團隊的 X 帳戶和開發人員工具的新功能。