Core Web Vitals ：頁(yè)面速度現(xiàn)在對(duì) SEO 更為重要

Core Web Vitals 是速度指標(biāo)，是 Google 用于衡量用戶(hù)體驗(yàn)的頁(yè)面體驗(yàn)信號(hào)的一部分。這些指標(biāo)測(cè)量最大內(nèi)容繪制 (LCP) 的視覺(jué)負(fù)載、累積布局偏移 (CLS) 的視覺(jué)穩(wěn)定性以及首次輸入延遲 (FID) 的交互性。

頁(yè)面體驗(yàn)和包含的 Core Web Vital 指標(biāo)將于 2021 年 6 月正式用于頁(yè)面排名。

資料來(lái)源：谷歌

查看網(wǎng)站指標(biāo)的最簡(jiǎn)單方法是使用Google Search Console 中的Core Web Vitals 報(bào)告。通過(guò)該報(bào)告，您可以輕松查看您的網(wǎng)頁(yè)是否被歸類(lèi)為“不良 URL”、“URL 需要改進(jìn)”或“良好 URL”。

在報(bào)告中，您可以找到有關(guān)特定問(wèn)題的更多詳細(xì)信息和受影響頁(yè)面的列表。

關(guān)于 Core Web Vitals 的快速事實(shí)

事實(shí) 1：指標(biāo)在桌面和移動(dòng)之間分開(kāi)，但只有移動(dòng)信號(hào)將用于對(duì)頁(yè)面進(jìn)行排名。Google 將?在 3 月份切換到100% 移動(dòng)優(yōu)先索引，因此使用移動(dòng)速度信號(hào)是有意義的，因?yàn)樗饕?yè)面也將基于移動(dòng)版本。

事實(shí) 2：數(shù)據(jù)來(lái)自 Chrome 用戶(hù)體驗(yàn)報(bào)告 (CrUX)，該報(bào)告記錄了選擇加入的 Chrome 用戶(hù)的數(shù)據(jù)。這些指標(biāo)將在用戶(hù)的第 75 個(gè)百分位進(jìn)行評(píng)估，因此如果您的用戶(hù)中有 70% 屬于“良好”類(lèi)別，5% 屬于“需要改進(jìn)”類(lèi)別，那么您的頁(yè)面仍被判斷為“需要改進(jìn)”。

事實(shí) 3：將為每個(gè)頁(yè)面評(píng)估指標(biāo)，但如果沒(méi)有足夠的數(shù)據(jù)，John Mueller表示?可能會(huì)使用來(lái)自網(wǎng)站部分或整個(gè)網(wǎng)站的信號(hào)。

事實(shí) 4：隨著這些新指標(biāo)的添加，移動(dòng)設(shè)備上的“頭條新聞”功能要求將 AMP 移除。由于新故事實(shí)際上沒(méi)有關(guān)于速度指標(biāo)的數(shù)據(jù)，因此可能會(huì)使用來(lái)自更大類(lèi)別頁(yè)面甚至整個(gè)域的指標(biāo)。

事實(shí) 5：單頁(yè)面應(yīng)用程序不會(huì)通過(guò)頁(yè)面轉(zhuǎn)換來(lái)衡量幾個(gè)指標(biāo)，即 FID 和 LCP。我們將在一分鐘內(nèi)討論這些是什么。

事實(shí) 6：指標(biāo)可能會(huì)隨時(shí)間變化，閾值也可能會(huì)發(fā)生變化。多年來(lái)，谷歌已經(jīng)改變了用于衡量其工具速度的指標(biāo)以及他們認(rèn)為速度快與否的閾值。這完全有可能在未來(lái)再次改變。事實(shí)上，我們?nèi)ツ暝诟倪M(jìn)之前的指標(biāo)方面做了一些工作，但我們需要再次做一些工作來(lái)改進(jìn)新的指標(biāo)。

Core Web Vitals 對(duì) SEO 很重要嗎？

只是為了設(shè)定預(yù)期，請(qǐng)記住有 200 多個(gè)排名因素。我不期望改進(jìn) Core Web Vitals 會(huì)有多大改進(jìn)。不知道它們會(huì)對(duì)排名產(chǎn)生多大影響，但這不太可能是一個(gè)強(qiáng)烈的信號(hào)，特別是考慮到谷歌已經(jīng)使用許多頁(yè)面體驗(yàn)組件來(lái)確定排名。

讓我們更詳細(xì)地了解每個(gè)核心 Web 要素。

Core Web Vitals 的組成部分

以下是 Core Web Vitals 的三個(gè)當(dāng)前組件：

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

• 累積布局偏移 (CLS)

• 首次輸入延遲 (FID)

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

LCP 是視口中加載的單個(gè)最大可見(jiàn)元素。

來(lái)源：web.dev/vitals

最大的元素通常是特色圖片或 <h1> 標(biāo)簽，但可以是以下任何一個(gè)：

• <img> 元素

• <svg> 元素內(nèi)的 <image> 元素

• <video> 元素內(nèi)的圖像

• 使用 url() 函數(shù)加載的背景圖像

• 文本塊

<svg> 和 <video> 可能會(huì)在未來(lái)添加。

如何查看 LCP

在PageSpeed Insights 中，LCP 元素將在診斷部分指定。對(duì)于測(cè)試頁(yè)面，LCP 是我們?cè)诓┛臀恼轮械奶厣珗D片。

在 Chrome DevTools 中，執(zhí)行以下步驟：

1. 性能 > 勾選“截圖”

2. 單擊“開(kāi)始分析并重新加載頁(yè)面”

3. LCP 在時(shí)序圖上

4. 點(diǎn)擊節(jié)點(diǎn)；這是 LCP 的元素

優(yōu)化 LCP

由于我們?cè)谶@個(gè)頁(yè)面和許多其他頁(yè)面上的 LCP 元素是特色圖像，我們可以通過(guò)預(yù)加載此圖像或可能內(nèi)聯(lián)整個(gè)圖像以將圖像與 HTML 代碼一起下載來(lái)改進(jìn)它。基本上，我們希望比目前更快地加載此圖像。

累積布局偏移 (CLS) — 視覺(jué)穩(wěn)定性

CLS 測(cè)量元素如何移動(dòng)或頁(yè)面布局的穩(wěn)定性。它考慮了內(nèi)容的大小及其移動(dòng)的距離。該指標(biāo)的一個(gè)主要問(wèn)題是，即使在初始頁(yè)面加載后，它仍會(huì)繼續(xù)測(cè)量。Google 正在收集有關(guān)此特定指標(biāo)的反饋，因此我們將來(lái)可能會(huì)對(duì)其進(jìn)行一些更改。

來(lái)源：web.dev/vitals

如果您嘗試單擊移動(dòng)的頁(yè)面上的某些內(nèi)容而最終單擊了您不打算單擊的內(nèi)容，這可能會(huì)很煩人。它總是發(fā)生在我身上。我點(diǎn)擊了一件事，突然間，我點(diǎn)擊了一個(gè)廣告，甚至不是在同一個(gè)網(wǎng)站上。作為用戶(hù)，這是令人沮喪的。

CLS的常見(jiàn)原因包括：

• 沒(méi)有尺寸的圖像

• 沒(méi)有尺寸的廣告、嵌入和 iframe

• 使用 JavaScript 注入內(nèi)容

• 在加載后期應(yīng)用字體或樣式

如何查看 CLS

在 PageSpeed Insights 的“診斷”下，您會(huì)找到正在發(fā)生變化的元素列表。

使用WebPageTest。在幻燈片視圖中，使用以下選項(xiàng)：

• 突出顯示布局變化

• 縮略圖大小：巨大

• 縮略圖間隔：0.1 秒

注意我們的字體如何在 5.1s-5.2s 之間重新設(shè)置樣式，隨著我們的自定義字體的應(yīng)用而改變布局。

您可能想嘗試Layout Shift GIF Generator。

Smashing Magazine?也有一個(gè)有趣的技術(shù)，他們分享了他們用 3px 實(shí)心紅線(xiàn)勾勒出所有內(nèi)容，并記錄了頁(yè)面加載的視頻，以確定發(fā)生布局變化的位置。

優(yōu)化 CLS

對(duì)于我們的測(cè)試頁(yè)面，我們可能想要做的是預(yù)加載我們的自定義字體，完全刪除自定義字體（我們對(duì)此表示懷疑），或者在初始頁(yè)面加載時(shí)使用默認(rèn)字體并僅在后續(xù)頁(yè)面加載時(shí)加載我們的字體。這些在品牌、風(fēng)格、一致性等方面都有權(quán)衡，我們將不得不決定前進(jìn)的最佳路徑。

首次輸入延遲 (FID) — 交互性

FID 是從用戶(hù)與您的頁(yè)面交互到頁(yè)面可以響應(yīng)的時(shí)間。您也可以將其視為響應(yīng)能力。這不包括滾動(dòng)或縮放。

示例交互：

• 單擊鏈接或按鈕

• 在空白字段中輸入文本

• 選擇下拉菜單

• 單擊復(fù)選框。

嘗試單擊某些內(nèi)容而頁(yè)面上沒(méi)有任何反應(yīng)可能會(huì)令人沮喪。

來(lái)源：web.dev/vitals

并非所有用戶(hù)都會(huì)與頁(yè)面交互，因此他們可能沒(méi)有 FID 值。這也是實(shí)驗(yàn)室測(cè)試工具沒(méi)有價(jià)值的原因，因?yàn)樗鼈儾慌c頁(yè)面交互。請(qǐng)改用總阻塞時(shí)間 (TBT)。

FID的原因

JavaScript 爭(zhēng)奪主線(xiàn)程。只有一個(gè)主線(xiàn)程，JavaScript 競(jìng)爭(zhēng)在其上運(yùn)行任務(wù)。

來(lái)源：https :?//web.dev/long-tasks-devtools

當(dāng)任務(wù)正在運(yùn)行時(shí)，頁(yè)面無(wú)法響應(yīng)用戶(hù)輸入。這是感覺(jué)到的延遲。任務(wù)越長(zhǎng)，用戶(hù)經(jīng)歷的延遲就越長(zhǎng)。任務(wù)之間的中斷是頁(yè)面必須切換到用戶(hù)輸入任務(wù)并響應(yīng)他們想要做的事情的機(jī)會(huì)。

優(yōu)化 FID

我認(rèn)為我們的網(wǎng)站對(duì) FID 沒(méi)有任何顧慮，但一般來(lái)說(shuō)，您希望分解長(zhǎng)期任務(wù)并將不需要的任何 JavaScript 推遲到以后。

衡量核心網(wǎng)絡(luò)生命力的工具

實(shí)驗(yàn)數(shù)據(jù)與現(xiàn)實(shí)數(shù)據(jù)的區(qū)別在于，現(xiàn)實(shí)數(shù)據(jù)著眼于真實(shí)用戶(hù)、網(wǎng)絡(luò)狀況、設(shè)備、緩存等，實(shí)驗(yàn)室數(shù)據(jù)始終基于相同條件進(jìn)行測(cè)試，希望測(cè)試結(jié)果具有可重復(fù)性。

現(xiàn)場(chǎng)數(shù)據(jù)

實(shí)驗(yàn)數(shù)據(jù)

我喜歡 GSC 中的報(bào)告，因?yàn)槟梢砸淮尾榭炊鄠€(gè)頁(yè)面的數(shù)據(jù)，但數(shù)據(jù)有點(diǎn)延遲，而且是 28 天的滾動(dòng)平均值，因此更改可能需要一些時(shí)間才能顯示在報(bào)告中。在 Chrome 88 中，Google 正在DevTools 中添加 Core Web Vitals。

您還可以?隨時(shí)查看 Lighthouse的得分權(quán)重，查看歷史變化。

最后的想法

您希望改進(jìn) Core Web Vitals，以便您的用戶(hù)獲得更好的體驗(yàn)。它們對(duì) SEO 的影響還有待觀察，但它們應(yīng)該幫助您在分析中記錄更多“感覺(jué)”增加的數(shù)據(jù)。

與您的開(kāi)發(fā)人員合作；他們是這里的專(zhuān)家。頁(yè)面速度可能非常復(fù)雜。如果你是一個(gè)人，你可能需要依靠插件或服務(wù)來(lái)處理這個(gè)問(wèn)題，比如 WP Rocket 或 NitroPack。

翻譯作品，原作者：Patrick Stox