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