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

核心要點(diǎn):

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

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

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

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

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

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

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

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

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

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

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

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

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

性能優(yōu)先級(jí)

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

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

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

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

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