運用 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 上提供。