使用 Lighthouse 最佳化網站體驗指標

使用 Chrome 的網路工具尋找改善使用者體驗的機會。

Addy Osmani

今天我們要介紹 Lighthouse、PageSpeed 和開發人員工具等新工具的功能 如何改善網站使用體驗指標

剛才提到的工具 Lighthouse 是 這項開放原始碼的自動化工具可改善網頁品質。您可以在 Chrome 開發人員工具套件 並在任何網頁上公開或要求驗證你也可以在以下位置找到 Lighthouse： PageSpeed 洞察、 CI 和 WebPageTest。

Lighthouse 7.x 提供元素螢幕截圖等新功能，方便使用者目視 (影響使用者體驗指標的節點) 影響了使用者體驗指標 (例如哪些節點影響了版面配置) Shift 鍵)。

PageSpeed Insights 也在 PageSpeed Insights 中支援元素螢幕截圖，讓您可以 輕鬆找出需要的一次性網頁效能問題。

評估 Core Web Vitals

燈塔 綜合衡量 Core Web Vitals 指標，包括最大內容繪製、累積 版面配置位移和總封鎖時間 (First Input Delay 的研究室 Proxy)。 這些指標可反映載入、版面配置穩定性和互動完備性。其他指標，例如 「First Contentful Paint」標示的：未來的 Core Web Vitals 也提升成效

「指標」Lighthouse 報告部分包含這些指標的研究室版本。別擔心！您可以使用 讓您快速瞭解需要注意的使用者體驗。

注意： Lighthouse 主要評估在研究室設定中最初載入網頁時，模擬手機或電腦速度緩慢時的使用者體驗。如果網頁有某些行為可能導致版面配置位移或 JavaScript 工作在網頁載入後所需時間過長，研究室指標就不會反映這一點。歡迎使用開發人員工具效能面板、Search Console、Web Vitals 擴充功能或 RUM，在載入後查看指標。

，瞭解如何調查及移除這項存取權。

開發人員工具效能面板中的新「Web Vitals」選項會顯示 追蹤哪些時間點醒目顯示指標，例如上方所示的 Layout Shift (LS)。

實際環境指標，例如 Chrome 使用者體驗 檢舉或 RUM，沒有 功能限制，可以如實反映實際使用者的體驗，因此能有效補充研究室資料 。現場資料無法提供研究室提供的診斷資訊， 一手掌握

瞭解可以在 Web Vitals 中改善的部分

找出最大內容繪製元素

LCP 是使用者感知的載入體驗指標，這記載了 主要內容 (即「最大」)：內容已載入並向使用者顯示。

Lighthouse 具有「最大內容繪製元素」以便識別出哪些元素 大型內容繪製作業將滑鼠遊標懸停在所需元素上，即可在主要瀏覽器視窗中醒目顯示該元素。

如果這項元素是圖片，這項資訊是一項實用提示，建議您對載入內容進行最佳化處理 其他部分Lighthouse 提供多項圖片最佳化稽核功能，可協助您瞭解 但你的圖片可以更妥善壓縮、調整大小，或以更理想的方式呈現 格式。

您可能也會看到 LCP Annie 的 bookmarklet Sullivan 提供可快速辨識的 LCP 元素，而且只要按一下滑鼠就能快速找到。

預先載入延遲發現的映像檔以改善 LCP

如要改善最大內容繪製體驗，請預先載入重要英雄 圖片。如果出現 需要先載入 JavaScript 套件，才能偵測到圖片。

注意： 請謹慎使用預先載入。早期網路頻寬是稀少資源，使用預先載入功能可能會產生其他資源的費用。如要有效使用預先載入功能，請確認資源的排序方式正確無誤，避免在頁面中其他資源 (例如重要的 CSS、JS、字型) 時迴歸。預先載入的費用有詳細說明。

關於預先載入 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。「延遲載入畫面圖片」稽核有助於解決這個問題：

不需捲動位置的重要圖片 (例如最大內容繪製圖片) 不應延遲載入。否則可能會延遲載入 LCP 圖片。如果透過「最大內容繪製圖片被延遲載入」時，LCP 圖片延遲載入時，Lighthouse 會醒目顯示稽核：

識別 CLS 貢獻

「累計版面配置位移」是指視覺穩定性的測量結果。可量化網頁的 內容呈現的不定時變化Lighthouse 有一項適用於 CLS 偵錯的稽核作業，名為「Avoid Large」(避免大型) 「版面配置位移」。

這項稽核會醒目顯示貢獻最多頁面位移的 DOM 元素，在元素中 畫面左側就會列出這些 DOM 元素的清單，右側則會顯示這些 DOM 的整體 CLS 捐款。

多虧有新的 Lighthouse 元素螢幕截圖功能，我們都能看到 稽核中提到的重要元素，以及點擊縮放功能，讓檢視內容更加清楚：

在載入後 CLS 中，可能可以使用矩形的持續視覺呈現值 哪些元素對於 CLS 的影響最大。您可在第三方工具 (例如 SpeedCurve 的Core Web Vitals 資訊主頁 我喜歡使用 Defaced's Layout Shift GIF 圖片 產生器適用於：

如果是全網站的版面配置位移問題檢視，Search Console 的核心架構確實很實用 網站體驗指標報告。這可以看到 CLS 較高的網頁類型 (此例中有助於自我識別 部分我需要花時間：

注意： 如要減少網頁字型造成的版面配置位移，請留意 @font-face 適用的新版size-adjust描述元。這項可調整備用字型的大小，以減少 CLS。

從無尺寸圖片中找出 CLS

限制圖片造成的累計版面配置位移 如果沒有尺寸，請在圖片和影片元素中加入寬度和高度尺寸屬性。 藉此確保瀏覽器能夠在文件中分配正確的空間。 載入圖片。

請參閱設定圖片的高度和寬度非常重要 再次提醒 撰寫好的文案，說明圖片尺寸和顯示比例的重要性。

辨識廣告中的 CLS

Lighthouse 發布商廣告 尋找機會改善網頁的廣告載入體驗，包括貢獻內容 版面配置位移和長時間的工作可能會造成網頁使用時間多快。於 Lighthouse 可透過社群外掛程式啟用。

別忘了，廣告是 「最大」版面配置位移貢獻者 在網路上。請務必：

• 將非頁緣固定廣告放在可視區域頂端附近時必須謹慎行事
• 為廣告版位預留最大的大小，藉此避免發生變動

避免使用非合成動畫

非合成的動畫在低階裝置上可能會呈現卡頓 JavaScript 工作會導致主執行緒處於忙碌狀態。這類動畫可能會產生版面配置位移。

如果 Chrome 發現無法合成的動畫，就會向開發人員工具追蹤回報該動畫 Lighthouse 讀取，以便列出哪些元素未合成， 並說明原因。您可以在 避免非複合型結構 動畫。

偵錯首次輸入延遲時間 / 總封鎖時間 / 長時間工作

「首次輸入」會評估使用者初次與網頁互動的時間 (例如，點擊 連結、輕觸按鈕或使用以 JavaScript 為基礎的自訂控制項) 就能開始處理事件處理常式來回應該互動。長 JavaScript 工作會影響這項指標和這個指標的 Proxy 總封鎖時間。

Lighthouse 內含「避免長主執行緒工作」稽核，其中會列出 延遲時間最長的工作這有助於找出 。在左欄中，我們可以看到負責長時間主執行緒的指令碼網址 機器學習程式庫提供一系列預先編寫的程式碼 可用來執行機器學習工作

右側會顯示工作持續時間。提醒你，「長時間工作」是指 執行時間超過 50 毫秒視同封鎖主執行緒的長度已足夠 影格速率或輸入延遲時間

如果考慮使用第三方服務進行監控，我也很喜歡執行主執行緒 時間軸視覺校正 以視覺化方式呈現這些費用，並醒目顯示父項和子項的工作， 執行影響互動性的工作

封鎖網路要求，查看 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 帳戶，以及「新功能 開發人員工具。

主頁橫幅製作者： Mercedes Mehling Unsplash 頁面。