理解谷歌的核心網(wǎng)頁指標(biāo) (Core Web Vitals) 及其提升方法

核心要點:

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

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

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

不同的工具返回不同的結(jié)果集，很難知道從哪里開始。

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

web-vitals JavaScript 庫可以幫助測量來自訪問您網(wǎng)站的真實用戶的更真實的指標(biāo)。結(jié)果可以發(fā)布到 Google Analytics 或其他端點以進行進一步分析。

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

當(dāng)前的核心網(wǎng)頁指標(biāo)是最大內(nèi)容繪制、首次輸入延遲和累積布局偏移，它們分別評估加載、交互性和視覺穩(wěn)定性。

最大內(nèi)容繪制 (LCP)

LCP 衡量加載性能——內(nèi)容顯示的速度。

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

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

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

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

性能優(yōu)先級

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

• 啟用服務(wù)器壓縮和 HTTP/2 或 HTTP/3
• 通過設(shè)置 HTTP 過期標(biāo)頭確保使用瀏覽器緩存
• 盡早預(yù)加載資源
• 合并和壓縮 CSS 和 JavaScript
• 刪除未使用的資源
• 考慮使用 CDN 或更好的托管
• 使用適當(dāng)?shù)膱D像大小和格式
• 優(yōu)化圖像和視頻文件大?。▽I(yè)的 CDN 可以提供幫助）

核心網(wǎng)頁指標(biāo)常見問題解答

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

以上是核心Web Vitals：Google的網(wǎng)絡(luò)性能指標(biāo)指南的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！