使用 Chrome 的網路工具尋找改善使用者體驗的機會。
今天將介紹 Lighthouse、PageSpeed 和開發人員工具中的全新工具功能,有助於瞭解網站如何運用網站體驗指標進行改善。
再次複習一下工具,Lighthouse 是一項開放原始碼的自動化工具,可改善網頁品質。您可以在 Chrome 開發人員工具中,找到這個偵錯工具,並針對任何網頁、公開網頁或需要驗證的網頁執行這項工具。您也可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 提供元素螢幕截圖等新功能,讓您更輕鬆地檢查 UI 特定部分,進而改善使用者體驗指標 (例如哪些節點導致版面配置位移)。
我們也在 PageSpeed Insights 中推出元素螢幕截圖的支援功能,方便您輕鬆找出執行網頁的一次性效能問題。
![元素螢幕截圖:醒目顯示影響頁面版面配置位移的 DOM 節點](https://web.dev/static/articles/optimize-vitals-lighthouse/image/element-screenshots-highl-9678c17be2c3e.png?authuser=7&hl=zh-tw)
評估 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 報表的「指標」部分包含這些指標的研究室版本。方便您大致瞭解需要注意的使用者體驗方面。
![Lighthouse 效能指標](https://web.dev/static/articles/optimize-vitals-lighthouse/image/lighthouse-peformance-met-3efe9953f7349.png?authuser=7&hl=zh-tw)
![開發人員工具效能面板中的 Web Vitals 指標](https://web.dev/static/articles/optimize-vitals-lighthouse/image/web-vitals-lane-the-devt-783469a60bb43.png?authuser=7&hl=zh-tw)
現場指標 (例如 Chrome 使用者體驗報告或 RUM 中的指標) 則不受此限制,並且對於研究室資料是很實用的工具,可以反映實際使用者的使用體驗。現場資料無法提供在研究室中取得的診斷資訊類型,因此兩者會用到。
瞭解可以在 Web Vitals 中改善的部分
找出最大內容繪製元素
LCP 是使用者感知的載入體驗指標,標記會在網頁載入期間標示出主要內容 (或「最大」內容) 載入並向使用者顯示的時間點。
Lighthouse 提供「Largest Contentful Paint 元素」稽核,可識別哪個元素是最大的內容繪製。將滑鼠遊標懸停在所需元素上,即可在主要瀏覽器視窗中醒目顯示該元素。
![最大內容繪製元素](https://web.dev/static/articles/optimize-vitals-lighthouse/image/largest-contentful-paint-b0d51a8ebda9.png?authuser=7&hl=zh-tw)
如果這項元素是圖片,您可以利用這項資訊改善圖片的載入方式。Lighthouse 內含多次圖片最佳化稽核,可協助您瞭解圖片能否經過妥善壓縮、調整大小,或以更理想的現代化圖片格式來提供。
![採用適當大小稽核圖片](https://web.dev/static/articles/optimize-vitals-lighthouse/image/properly-size-images-audi-73a6bd1ff0d65.png?authuser=7&hl=zh-tw)
您也能找到 Annie Sullivan 的 LCP 書籤小程式,只要按一下滑鼠,就能快速識別 LCP 元素的紅色矩形。
![使用書籤小程式醒目顯示 LCP 元素](https://web.dev/static/articles/optimize-vitals-lighthouse/image/highlighting-lcp-element-3679084da1848.png?authuser=7&hl=zh-tw)
預先載入延遲發現的映像檔以改善 LCP
如要改善 Largest Contentful Paint,如果瀏覽器延遲偵測到重要主頁橫幅,請預先載入這些圖片。如果需要在偵測到圖片前載入 JavaScript 軟體包,就可能會發生延遲發現。
![預先載入最大內容繪製圖片](https://web.dev/static/articles/optimize-vitals-lighthouse/image/preload-largest-contentf-337c3976114a2.png?authuser=7&hl=zh-tw)
我們詢問幾個有關預先載入 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。「延遲載入畫面圖片」稽核有助於解決這個問題:
![延遲載入畫面外圖片](https://web.dev/static/articles/optimize-vitals-lighthouse/image/defer-offscreen-images-b155bac024485.png?authuser=7&hl=zh-tw)
不需捲動位置的重要圖片 (例如最大內容繪製圖片) 不應延遲載入。否則可能會延遲載入 LCP 圖片。如果系統透過「最大內容繪製圖片已延遲載入」稽核功能,以錯誤方式延遲載入 LCP 圖片,Lighthouse 會醒目顯示:
![避免延遲載入 LCP 圖片](https://web.dev/static/articles/optimize-vitals-lighthouse/image/avoid-lazy-loading-lcp-im-5cda17112b2f1.png?authuser=7&hl=zh-tw)
識別 CLS 貢獻
「累計版面配置位移」是指視覺穩定性的測量結果。可量化頁面內容在視覺上移動的程度Lighthouse 有一項適用於 CLS 偵錯的稽核作業,稱為「避免大型版面配置位移」。
這項稽核會醒目顯示貢獻最多頁面位移的 DOM 元素,左側的「元素」欄中會列出這些 DOM 元素清單,右側則會顯示這些 DOM 對整體 CLS 所貢獻的內容。
![避免 Lighthouse 進行大型版面配置位移稽核,標明造成 CLS 的相關 DOM 節點](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-avoid-large-layout-sh-629d2845accff.png?authuser=7&hl=zh-tw)
多虧新的 Lighthouse 元素螢幕截圖功能,我們可以看到稽核中記錄的主要元素預覽,還可以透過點擊縮放功能取得更清晰的檢視畫面:
![按一下元素螢幕截圖即可展開](https://web.dev/static/articles/optimize-vitals-lighthouse/image/clicking-an-element-scre-fa8d885736b59.png?authuser=7&hl=zh-tw)
在載入後 CLS 中,您可以用「永久」的視覺呈現值呈現對 CLS 影響最大的元素。您可以在 SpeedCurve 的 Core Web Vitals 資訊主頁等第三方工具中找到這項功能,我喜歡使用 Defaced 版面配置位移 GIF 產生器來執行下列工作:
![版面配置位移產生器醒目顯示位移](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-layout-shift-generato-21aa868cfdf03.gif?authuser=7&hl=zh-tw)
Search Console 的 Core Web Vitals 報表其實是為整個網站的版面配置位移問題彙整而成。如此一來,我就能查看網站上 CLS 較高的網頁類型 (在本例中,我有助於自己確認需要花時間使用哪些範本):
![Search Console 顯示 CLS 問題](https://web.dev/static/articles/optimize-vitals-lighthouse/image/search-console-displaying-652f8345e0e22.png?authuser=7&hl=zh-tw)
從無尺寸圖片中找出 CLS
如要「限制」因無尺寸圖片而導致的累計版面配置位移,請在圖片和影片元素中加入寬度和高度大小屬性。這個方法可確保瀏覽器在圖片載入時,可在文件中分配正確的空間大小。
![稽核寬度和高度沒有明確的圖片元素](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-image-elements-wit-469f666c4444e.png?authuser=7&hl=zh-tw)
請參閱設定圖片的高度和寬度非常重要一文,深入瞭解在考量圖片尺寸和長寬比的重要性。
辨識廣告中的 CLS
透過 Lighthouse 發布商廣告,您可以發掘改善網頁廣告載入體驗的機會,包括對版面配置位移的貢獻,以及可能會推遲使用者網頁使用時間的長時間工作。在 Lighthouse 中,您可以透過社群外掛程式啟用此功能。
![廣告相關稽核會醒目顯示可縮短要求及版面配置位移時間的機會](https://web.dev/static/articles/optimize-vitals-lighthouse/image/ads-related-audits-highli-655d466f3dfce.png?authuser=7&hl=zh-tw)
請注意,廣告是網路上版面配置位移最大的因素之一。請務必:
- 將非頁緣固定廣告放在可視區域頂端附近時必須謹慎行事
- 為廣告版位預留最大的大小,藉此避免發生變動
避免使用非合成動畫
如果複雜的 JavaScript 工作導致主執行緒處於忙碌狀態,非合成動畫可能會在低階裝置上顯示為資源浪費。這類動畫可能會產生版面配置位移。
如果 Chrome 發現無法合成的動畫,就會向開發人員工具追蹤 Lighthouse 讀取作業回報,以便列出哪些含有動畫的元素未合成,以及原因為何。您可以在避免非複合動畫稽核中找到這些屬性。
![透過稽核避免使用非合成動畫](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-non-compo-c2eb95c0a3b8a.png?authuser=7&hl=zh-tw)
偵錯首次輸入延遲時間 / 總封鎖時間 / 長時間工作
「首次輸入」會評估使用者初次與網頁互動 (例如點選連結、輕觸按鈕或使用以 JavaScript 為基礎的自訂控制項),到瀏覽器實際能開始處理事件處理常式的時間,開始處理該互動的時間。較長的 JavaScript 工作可能會影響這項指標和這項指標的 Proxy,也就是總封鎖時間。
![稽核可避免主執行緒工作過長](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-long-main-bdd20692ccc9c.png?authuser=7&hl=zh-tw)
Lighthouse 內含「避免長主執行緒工作」稽核,其中會列出主執行緒上最長的工作。這有助於找出造成輸入延遲最壞的貢獻者。在左欄中,我們可以看到負責長時間主執行緒工作的指令碼網址。
右側會顯示工作持續時間。提醒您,長時間工作是指執行時間超過 50 毫秒的工作結果會認為封鎖主執行緒的時間夠長,而影響影格速率或輸入延遲時間。
如果考慮使用第三方服務進行監控,我也很喜歡 Calibre 的「主執行緒執行時間軸」視覺化呈現這些成本,可醒目顯示父項和子項任務,因為這會影響到影響互動的長時間工作。
![Calibre 的主執行緒執行時間軸](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-main-thread-execution-16ffaca06acc9.png?authuser=7&hl=zh-tw)
封鎖網路要求,查看 Lighthouse 中的前後影響
Chrome 開發人員工具支援封鎖網路要求,查看個別資源遭移除或無法使用的影響。這有助於瞭解個別指令碼 (例如第三方嵌入或追蹤程式) 對總封鎖時間 (TBT) 和互動所需時間等指標產生的費用。
網路要求封鎖功能也適用於 Lighthouse!我們來簡單介紹一下網站的 Lighthouse 報表Perf 得分為 63/100,TBT 為 400 毫秒。轉入程式碼後,我們發現這個網站會在 Chrome 中載入不需要的 Intersection Observer polyfill。那就封鎖!
![網路要求封鎖](https://web.dev/static/articles/optimize-vitals-lighthouse/image/network-request-blocking-0af6598f53919.png?authuser=7&hl=zh-tw)
在開發人員工具「Network」面板中的指令碼上按一下滑鼠右鍵,然後點選 Block Request URL
來封鎖指令碼。這裡我們會為 Intersection Observer polyfill 執行此操作。
![在開發人員工具中封鎖要求網址](https://web.dev/static/articles/optimize-vitals-lighthouse/image/block-request-urls-devto-6a1f372c47f8e.png?authuser=7&hl=zh-tw)
接著,我們可以重新執行 Lighthouse。這次,我們可以看到效能分數提高了 (70/100),總封鎖時間 (400 毫秒 => 300 毫秒)。
![看到封鎖昂貴的網路要求之後](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-view-blocking-costl-dd077ef6d8454.png?authuser=7&hl=zh-tw)
以門面元件取代昂貴的第三方嵌入項目
常見的使用第三方資源,將影片、社群媒體貼文或小工具嵌入頁面中。預設情況下,多數的嵌入會立即載入,而且可能會有代價高昂的酬載,會對使用者體驗造成負面影響。如果第三方不是關鍵原因 (例如使用者需要捲動內容才能看到廣告),上述情形就很浪費。
提升這類小工具的效能的其中一種模式,是在使用者互動時延遲載入小工具。方法是轉譯小工具的輕量預覽 (門面),並只在使用者互動時載入完整版本。Lighthouse 的稽核作業將建議第三方資源,這類資源可透過門面載入延遲,例如 YouTube 影片嵌入。
![稽核重點指出,可以替換部分昂貴的第三方資源](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-highlighting-some-86a43248c5c98.png?authuser=7&hl=zh-tw)
提醒你,Lighthouse 會醒目顯示第三方程式碼,阻斷主執行緒的時間超過 250 毫秒。這可能會揭露各種第三方指令碼 (包括 Google 編寫的指令碼),而在轉譯內容需要捲動才能查看內容時,可能需要更久或延遲載入。
![降低第三方 JavaScript 稽核的費用](https://web.dev/static/articles/optimize-vitals-lighthouse/image/reduce-cost-third-party-8400bcee48ab3.png?authuser=7&hl=zh-tw)
超越 Core Web Vitals 的資料
除了醒目顯示 Core Web Vitals 指標外,新版 Lighthouse 和 PageSpeed Insights 也會提供具體指引,協助您在啟用來源地圖的情況下,改善大量使用 JavaScript 的網頁應用程式的載入速度。
其中包括減少對網頁 JavaScript 成本的稽核集合,例如減少對 polyfill 的依賴,以及對使用者體驗而言可能不需要的重複項目。
如要進一步瞭解 Core Web Vitals 工具,請密切留意 Lighthouse 團隊 Twitter 帳戶和 開發人員工具的新功能。
主頁橫幅 來自 Unsplash 上的 Mercedes Mehling。