核心Web Vitals：Google的網絡性能指標指南

理解谷歌的核心網頁指標 (Core Web Vitals) 及其提升方法

核心要點:

• 核心網頁指標 (Core Web Vitals) 是谷歌用於衡量真實用戶體驗的關鍵性能指標，旨在簡化性能評估，幫助網站所有者和開發者專注於最重要的改進。這三個指標分別是：最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)，分別評估加載速度、交互性和視覺穩定性。
• LCP 衡量加載性能，報告視口中可見的最大圖像或文本塊的渲染時間。 FID 衡量響應速度，記錄用戶與頁面交互到瀏覽器開始處理事件處理程序之間的時間。 CLS 衡量視覺穩定性，評估內容意外移動的情況——通常發生在廣告或當前滾動位置上方圖像加載完成後 DOM 發生變化時。
• 提升核心網頁指標需要優化網站的各個方面，例如優化圖像、利用瀏覽器緩存、最大限度地減少渲染阻塞資源以及優先處理關鍵渲染路徑。谷歌會根據您網站的性能報告提供具體的建議。重視這些指標的網站往往具有更快的加載時間、更好的交互性和更穩定的視覺體驗，從而提升用戶滿意度，並可能提高搜索引擎排名。

谷歌希望用戶擁有良好的網頁體驗，因此在搜索結果中排名較高的網站加載速度也更快。當然，這是一個很大的簡化，但假設您比較的是內容和受眾相似的兩個網站，那麼加載速度較快的網站應該在結果中排名更高。但是，谷歌衡量這一指標的方法一直以來都有些難以捉摸，因此它引入了核心網頁指標，為網站所有者和開發者提供一些急需的清晰度。

不幸的是，“性能”是一個涵蓋數十個指標的總稱……首字節時間、開始渲染、CPU 使用率、JavaScript 堆大小、首次內容繪製、首次有意義繪製、首次CPU 空閒、DOM 加載、頁面完全加載、交互時間、每秒樣式重新計算等等。

不同的工具返回不同的結果集，很難知道從哪裡開始。

谷歌的網頁指標計劃旨在簡化性能評估，並幫助您專注於最重要的改進。核心網頁指標是反映真實世界用戶體驗的關鍵性能指標。部分指標由 Chrome DevTools 中的 Lighthouse 面板、PageSpeed Insights 和 Google Search Console 報告。

web-vitals JavaScript 庫可以幫助測量來自訪問您網站的真實用戶的更真實的指標。結果可以發佈到 Google Analytics 或其他端點以進行進一步分析。

谷歌建議使用第 75 百分位數，即記錄同一指標的多個結果，按從最好到最壞的順序排列，然後分析四分之三點的數值。因此，四分之三的網站訪問者將體驗到這種性能水平。

當前的核心網頁指標是最大內容繪製、首次輸入延遲和累積佈局偏移，它們分別評估加載、交互性和視覺穩定性。

最大內容繪製 (LCP)

LCP 衡量加載性能——內容顯示的速度。

諸如頁面加載和 DOMContentLoaded 等歷史指標在這方面一直存在問題，因為它們並不總是能反映用戶體驗。例如，啟動畫面幾乎可以立即出現，但通過進一步的 Ajax 請求加載的可使用內容可能需要更長時間才能出現。

最大內容繪製 (LCP) 報告視口中可見的最大圖像或文本塊的渲染時間。小於 2.5 秒的時間被認為是良好的，而超過 4.0 秒的時間則被認為是不良的。

LCP 中考慮的元素類型包括：

• <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics"> <p>徽標和菜單不會移動——它們是穩定的元素。廣告添加到 DOM，其起始位置不會改變，因此它也是穩定的。但是，英雄圖像將移動：</p> <ol> <li>英雄圖像在 360 x 720 像素的視口中為 360 x 510 像素。因此，其影響分數為 (360 x 510) / (360 x 720) = 0.71</li> <li>它在 720 像素的視口高度中垂直移動 90 像素，因此其距離分數為 90 / 720 = 0.125</li> </ol> <p>因此，CLS 為 0.71 x 0.125 = 0.089</p> <p>CLS 得分低於 0.1 被認為是良好的，而高於 0.25 則被認為是不良的。在這種情況下，CLS 剛好處於可接受範圍內，因為雖然受影響的區域很大，但移動的距離相對較小。但是，更大的廣告需要進一步關注。 </p> <p>CLS 算法不會記錄任何用戶交互後 500 毫秒內的佈局偏移，這可能會觸發 UI 更改或視口調整大小。因此，您的頁面不會因界面更新、過渡和動畫而受到懲罰，這些更新、過渡和動畫對於操作是必要的，例如從漢堡圖標打開全屏菜單。 </p> <p>Chrome DevTools 中的“渲染”面板（菜單 > 更多工具 > 渲染）提供“佈局偏移區域”選項。選中該框並刷新頁面——佈局偏移以藍色突出顯示。您還可以修改“網絡”面板中的網絡速度以減慢加載速度。 </p> <p>可以通過以下方法改進 FID/TBT：</p> <ol> <li>通過使用 <code>width 和 height 屬性、CSS aspect-ratio 屬性或舊的填充技巧（視情況而定）為圖像、視頻和 iframe 元素預留空間
• 在加載網絡字體時避免 FOUT（未樣式文本閃爍）和 FOIT（不可見文本閃爍）。預加載或使用大小相似的備用字體將有所幫助
• 不要在初始頁面加載期間在現有內容上方插入 DOM 元素，例如時事通訊註冊和類似的通知框
• 使用 CSS transform 和 opacity 進行成本較低的動畫。

性能優先級

核心網頁指標會隨著時間的推移而發展，但評估 LCP、FID 和 CLS 指標可以幫助識別最關鍵的問題。首先解決快速簡單的難題——它們通常具有最大的投資回報率：

• 啟用服務器壓縮和 HTTP/2 或 HTTP/3
• 通過設置 HTTP 過期標頭確保使用瀏覽器緩存
• 儘早預加載資源
• 合併和壓縮 CSS 和 JavaScript
• 刪除未使用的資源
• 考慮使用 CDN 或更好的託管
• 使用適當的圖像大小和格式
• 優化圖像和視頻文件大小（專業的 CDN 可以提供幫助）

核心網頁指標常見問題解答

• 什麼是核心網頁指標？ 核心網頁指標是由谷歌引入的一組特定以用戶為中心的指標，用於衡量網頁的加載性能、交互性和視覺穩定性。它們對於評估網站的整體用戶體驗至關重要。
• 三個核心網頁指標是什麼？ 三個核心網頁指標是：最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。
• 為什麼核心網頁指標對網站所有者很重要？ 核心網頁指標非常重要，因為它們直接影響用戶體驗。重視這些指標的網站往往具有更快的加載時間、更好的交互性和更穩定的視覺體驗，從而提升用戶滿意度，並可能提高搜索引擎排名。
• 如何衡量我網站的核心網頁指標？ 可以使用各種工具來衡量核心網頁指標，包括谷歌的 PageSpeed Insights、Lighthouse 和 Chrome 用戶體驗報告。這些工具可以深入了解網站根據 LCP、FID 和 CLS 指標的性能。
• 如何改進我網站的核心網頁指標？ 改進核心網頁指標需要優化網站的各個方面，例如優化圖像、利用瀏覽器緩存、最大限度地減少渲染阻塞資源以及優先處理關鍵渲染路徑。谷歌會根據您網站的性能報告提供具體的建議。
• 核心網頁指標會影響搜索引擎排名嗎？ 是的，核心網頁指標是谷歌搜索算法中的排名因素。谷歌已表示，從 2021 年 5 月開始，頁面體驗信號（包括核心網頁指標）將被納入搜索結果的排名。在這些指標中反映出更好用戶體驗的網站可能在搜索排名中具有優勢。

以上是核心Web Vitals：Google的網絡性能指標指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！