您的網(wǎng)站排名下降了嗎？擔(dān)心您的網(wǎng)站不符合 Google 的 Core Web Vitals 標(biāo)準(zhǔn)？想要優(yōu)化網(wǎng)站的頁(yè)面速度但不確定下一步該怎么做？

本指南將引導(dǎo)您逐步完成以下過(guò)程：

1.如何測(cè)試您網(wǎng)站的 Core Web Vitals。

2.如何制定計(jì)劃使您的網(wǎng)站更快。

3.如何跟蹤網(wǎng)站的表現(xiàn)

但首先，讓我們深入了解什么是 Core Web Vitals，以及為什么我們需要關(guān)注這些關(guān)鍵的 SEO 指標(biāo)。

什么是Core Web Vitals？

Core Web Vitals是一組由 Google 開(kāi)發(fā)的三個(gè)頁(yè)面速度指標(biāo)。每個(gè)指標(biāo)衡量和評(píng)估訪問(wèn)者在您網(wǎng)站頁(yè)面上的不同方面的體驗(yàn)。

• Largest Contentful Paint (LCP)：主頁(yè)內(nèi)容呈現(xiàn)的速度有多快？

• Cumulative Layout Shift (CLS)：渲染后頁(yè)面布局是否穩(wěn)定？

• First Input Delay(FID)：頁(yè)面對(duì)用戶輸入的反應(yīng)速度有多快？

  
  

您在 Core Web Vitals 測(cè)試中的結(jié)果越好，您在 SERP 上的排名就越好。

Core Web Vitals如何影響谷歌排名？

隨著 2021 年 6 月的頁(yè)面體驗(yàn)更新，Core Web Vitals 指標(biāo)成為排名因素。

Google 從真實(shí)的 Chrome 用戶那里收集這些指標(biāo)作為Chrome 用戶體驗(yàn)報(bào)告 (CrUX)的一部分。然后使用此數(shù)據(jù)對(duì)搜索結(jié)果進(jìn)行排名。

對(duì)于每個(gè)指標(biāo)，谷歌都為“良好”用戶體驗(yàn)定義了一個(gè)閾值，這些良好的分?jǐn)?shù)在任何 Core Web Vitals 報(bào)告中都會(huì)被涂成綠色。例如，Largest Contentful Paint 應(yīng)該在導(dǎo)航到頁(yè)面后的 2.5 秒內(nèi)發(fā)生。

如果 75% 的用戶體驗(yàn)都滿足所有三個(gè)指標(biāo)的“良好”閾值，那么網(wǎng)站將獲得最大的排名提升。

Lighthouse 分?jǐn)?shù)會(huì)影響我的網(wǎng)站排名嗎？

與 Core Web Vitals 不同，Lighthouse 分?jǐn)?shù)不會(huì)影響您的搜索引擎排名。即使 Lighthouse 給您的分?jǐn)?shù)很低，您的真實(shí)用戶可能仍然會(huì)在您的網(wǎng)站上獲得良好的體驗(yàn)。

除了 Core Web Vitals 指標(biāo)外，許多性能工具還會(huì)顯示 0 到 100 之間的性能分?jǐn)?shù)。

這稱為L(zhǎng)ighthouse Performance score，基于 Google 的 Lighthouse 測(cè)試工具，許多其他網(wǎng)站速度測(cè)試都建立在該工具之上。

該分?jǐn)?shù)為您的網(wǎng)站提供了高水平的評(píng)估。

但是，在優(yōu)化頁(yè)面時(shí)，您可以忽略它，而是專注于您想要改進(jìn)的特定指標(biāo)。

因此，讓我們開(kāi)始改進(jìn)真正重要的網(wǎng)站速度指標(biāo)——Core Web Vitals。

第 1 步：檢查您是否需要優(yōu)化您的Core Web Vitals

訪問(wèn)Search Console，這是一種 Google 工具，可提供關(guān)于您的網(wǎng)站在搜索結(jié)果中的表現(xiàn)。

如果您在網(wǎng)站上配置了 Search Console，則可以快速查看網(wǎng)站的實(shí)時(shí) Core Web Vitals 報(bào)告。如果沒(méi)有，下面介紹了如何在 Google Search Console 上設(shè)置您的網(wǎng)站。

此 Core Web Vitals 選項(xiàng)卡根據(jù) Google 的用戶體驗(yàn)指標(biāo)顯示您的網(wǎng)站的運(yùn)行情況。

如果您只有“好的 URL”，那么您就做得很好，不必?fù)?dān)心為 SEO 進(jìn)一步優(yōu)化 Core Web Vitals。

但是，如果您的某些頁(yè)面被標(biāo)記為“差”或“需要改進(jìn)”，那么改進(jìn) Core Web Vitals 指標(biāo)可以幫助您的網(wǎng)站在 Google 上排名更高。

第 2 步：識(shí)別您網(wǎng)站上的慢速頁(yè)面

您網(wǎng)站上的單個(gè)慢速頁(yè)面可能會(huì)拖累整個(gè)網(wǎng)站的指標(biāo)和體驗(yàn)。因此，找到并修復(fù)返回“差”或“需要改進(jìn)”分?jǐn)?shù)的每個(gè)頁(yè)面非常重要。

如何在 Search Console 中識(shí)別單個(gè)慢速頁(yè)面

如果您的網(wǎng)站流量很大，這一步很簡(jiǎn)單。

1.打開(kāi) Core Web Vitals 選項(xiàng)卡。

2.單擊移動(dòng)或桌面數(shù)據(jù)的“打開(kāi)報(bào)告”。

3.選擇“為什么 URL 不被認(rèn)為是好的”下列出的問(wèn)題之一。

4.單擊有問(wèn)題的 URL 組之一。

Google 將為該組中的示例頁(yè)面提供 URL 級(jí)別的數(shù)據(jù)，您可以將精力集中在 Core Web Vitals 上表現(xiàn)最差的頁(yè)面上。

但是，一旦進(jìn)入 Search Console，您可能只會(huì)看到“URL 組”的數(shù)據(jù)，而不是單個(gè)頁(yè)面；那是完全正常的。

如果您的網(wǎng)站較新且流量不大，Google 會(huì)將多個(gè) URL 組合成一個(gè) URL 組，并根據(jù)Core Web Vitals 對(duì)該組進(jìn)行評(píng)級(jí)。

很有可能，該 URL 組中的頁(yè)面非常相似，以至于您對(duì)一個(gè)頁(yè)面所做的更改可以復(fù)制到該組中的其他頁(yè)面。

如何在 Search Console 中查看慢速 URL 組

Google Search Console 有時(shí)會(huì)將您網(wǎng)站上的相似頁(yè)面分類為網(wǎng)址組。這是因?yàn)槟W(wǎng)站上的大多數(shù)頁(yè)面可能無(wú)法自行獲得足夠的流量，因此 Google 無(wú)法獲得足夠的性能數(shù)據(jù)。

使用 Google Search Console 中詳細(xì)的桌面和移動(dòng)Core Web Vitals報(bào)告，找出您網(wǎng)站的哪些部分運(yùn)行緩慢。

在與之前相同的區(qū)域中，您還可以看到您的慢速 URL 組。

在上面的屏幕截圖中，我們可以看到網(wǎng)站上有一組 30 個(gè) URL 不符合最大內(nèi)容繪制閾值。

默認(rèn)情況下，Search Console 會(huì)顯示該組中的一個(gè)示例網(wǎng)址。您可以單擊組以查看組中 URL 的完整列表。

但是僅僅因?yàn)橐唤M URL 很慢并不意味著該組中的每個(gè)頁(yè)面都很慢。您需要進(jìn)一步調(diào)查以確定需要優(yōu)化的頁(yè)面。

如何測(cè)試 URL 組內(nèi) URL 的單個(gè)頁(yè)面速度

如果您看到一長(zhǎng)串“沒(méi)有足夠使用數(shù)據(jù)的 URL”，我們可以為您提供解決方案。

Google 只為接收到足夠流量以記錄數(shù)據(jù)的各個(gè)頁(yè)面提供 URL 級(jí)別的性能數(shù)據(jù)。

由于您沒(méi)有足夠的真實(shí)用戶數(shù)據(jù)，最好的選擇是運(yùn)行基于實(shí)驗(yàn)室的性能測(cè)試，以查看 URL 組中的哪些頁(yè)面運(yùn)行緩慢。

基于實(shí)驗(yàn)室的測(cè)試在用于測(cè)量頁(yè)面性能的受控環(huán)境中運(yùn)行。

實(shí)驗(yàn)室數(shù)據(jù)與現(xiàn)實(shí)數(shù)據(jù)不匹配，但您可以使用它來(lái)對(duì)您的網(wǎng)頁(yè)進(jìn)行排名并確定最慢的網(wǎng)頁(yè)。

您可以使用免費(fèi)的網(wǎng)站速度測(cè)試工具來(lái)運(yùn)行您的測(cè)試，或使用DebugBear批量測(cè)試頁(yè)面并根據(jù) Core Web Vitals 指標(biāo)對(duì)它們進(jìn)行排名。

DebugBear 站點(diǎn)速度測(cè)試結(jié)果，2022 年 10 月

第 3 步：為您網(wǎng)站上的關(guān)鍵頁(yè)面設(shè)置監(jiān)控

一旦您確定了哪些頁(yè)面表現(xiàn)不佳，您將需要持續(xù)監(jiān)控您的網(wǎng)站以更快地檢測(cè)性能變化。

DebugBear既運(yùn)行連續(xù)的基于實(shí)驗(yàn)室的測(cè)試，又隨著時(shí)間的推移跟蹤谷歌的真實(shí)用戶數(shù)據(jù)。通過(guò)這種方式，您可以確認(rèn)您的 Core Web Vitals 改進(jìn)正在發(fā)揮作用，并在發(fā)生任何意外回歸時(shí)收到警報(bào)。

您應(yīng)該持續(xù)監(jiān)控哪些頁(yè)面？

您應(yīng)該考慮監(jiān)控三種類型的頁(yè)面：

1. 您確定為具有較差的 Core Web Vitals 的特定頁(yè)面。

2. 關(guān)鍵的高流量頁(yè)面，例如您的主頁(yè)。

3. 等效的競(jìng)爭(zhēng)對(duì)手頁(yè)面，以便您可以進(jìn)行比較和基準(zhǔn)測(cè)試。

專業(yè)提示：識(shí)別您網(wǎng)站上的不同頁(yè)面類別并監(jiān)控每種類型頁(yè)面的一個(gè)或兩個(gè) URL。

一個(gè)類別中的頁(yè)面將具有相似的性能特征。監(jiān)視 50 個(gè)相似的頁(yè)面通常不會(huì)幫助您發(fā)現(xiàn)其他性能問(wèn)題。

第 4 步：對(duì)慢速頁(yè)面運(yùn)行深入的性能測(cè)試以確定潛在的修復(fù)

通過(guò)性能測(cè)試，您將能夠了解“需要改進(jìn)”或“差”Core Web Vitals 分?jǐn)?shù)的確切原因。

要在您的各個(gè)慢速頁(yè)面上運(yùn)行性能測(cè)試：

1.訪問(wèn)：轉(zhuǎn)到 debugbear.com/test。

2.測(cè)試：輸入慢速網(wǎng)頁(yè)的 URL。

3.審查：分析您的 Core Web Vitals 結(jié)果并閱讀報(bào)告中的建議以加速您的網(wǎng)站。

如何分析最大的內(nèi)容繪畫(huà)分?jǐn)?shù)

Largest Contentful Paint (LCP) 測(cè)量導(dǎo)航后最大的內(nèi)容元素出現(xiàn)在頁(yè)面上的時(shí)間。

因此，第一步是識(shí)別 LCP 元素——例如，頁(yè)面上的大圖像或標(biāo)題。

完成后，您可以研究如何加載必要的資源以更快地顯示該內(nèi)容。

如何分析累積的布局偏移分?jǐn)?shù)

Cumulative Layout Shift衡量渲染后布局的穩(wěn)定性。

要減少它，請(qǐng)檢查哪些 UI 元素在初始頁(yè)面加載后改變了位置。

如何分析第一個(gè)輸入延遲分?jǐn)?shù)

First Input Delay測(cè)量用戶交互后頁(yè)面開(kāi)始處理用戶輸入的時(shí)間。

實(shí)驗(yàn)室測(cè)試通常不會(huì)模擬用戶交互，但您仍然可以查看長(zhǎng)時(shí)間的 CPU 任務(wù)，這些任務(wù)會(huì)延遲頁(yè)面處理用戶輸入的速度。

第 5 步：確定最有前途的優(yōu)化

不同站點(diǎn)速度優(yōu)化的影響差異很大。

通常，應(yīng)用少量改進(jìn)可以大大提升您的整個(gè)網(wǎng)站。

在實(shí)施任何更改之前，請(qǐng)考慮：

• 對(duì) Core Web Vitals 的影響有多大？

• 這些改進(jìn)僅適用于特定頁(yè)面還是適用于整個(gè)網(wǎng)站？

• 實(shí)施變更需要多少工作？

使用快速實(shí)驗(yàn)來(lái)估計(jì)核心 Web Vitals 優(yōu)化的潛在影響

DebugBear 包含一項(xiàng)實(shí)驗(yàn)功能，可讓您嘗試性能優(yōu)化，而無(wú)需對(duì)您的網(wǎng)站進(jìn)行代碼更改和部署。

您可以修改頁(yè)面 HTML 以查看資源優(yōu)先級(jí)的變化在實(shí)踐中將如何影響您的網(wǎng)站。

例如，下面我們可以看到網(wǎng)站渲染過(guò)程的早期階段。圖像最終顯示在頁(yè)面頂部。渲染過(guò)程中選定點(diǎn)的屏幕截圖顯示了圖像加載之前頁(yè)面布局的樣子。

在左側(cè)的基線視頻記錄中，下載圖像文件時(shí)沒(méi)有為圖像預(yù)留空間，導(dǎo)致圖像到達(dá)時(shí)某些頁(yè)面內(nèi)容最終向下移動(dòng)。

在右邊，我們看到了一個(gè)實(shí)驗(yàn)，看看如果為圖像設(shè)置了最小高度，頁(yè)面將如何加載，這消除了布局偏移。

使用暫存環(huán)境測(cè)試核心 Web Vitals 優(yōu)化的性能影響

另一種檢查您的更改是否達(dá)到預(yù)期效果的方法是將代碼更改部署到暫存環(huán)境并在那里運(yùn)行測(cè)試。

及早驗(yàn)證指標(biāo)改進(jìn)將幫助您快速找到有效的更改并對(duì) Core Web Vitals 產(chǎn)生積極影響。

第 6 步：評(píng)估現(xiàn)實(shí)的優(yōu)化

一旦您的更改投入生產(chǎn)或生效，將需要 30 天才能看到優(yōu)化的完整結(jié)果。

一旦您看到優(yōu)化所產(chǎn)生的影響，您就可以再次執(zhí)行這些步驟來(lái)決定接下來(lái)要優(yōu)化的內(nèi)容。

開(kāi)始優(yōu)化您的Core Web Vitals 以獲得更好的性能

DebugBear 可以通過(guò)輕松運(yùn)行性能測(cè)試、識(shí)別改進(jìn)機(jī)會(huì)以及跟蹤頁(yè)面速度隨時(shí)間變化來(lái)幫助改善您的 Core Web Vitals。

該產(chǎn)品專為 Core Web Vitals 優(yōu)化而構(gòu)建，將 Google 的真實(shí)用戶數(shù)據(jù)與深度報(bào)告相結(jié)合，可幫助您加快網(wǎng)站速度。

立即查看您網(wǎng)站的 Core Web Vitals：https://www.debugbear.com/?utm_source=article&utm_medium=sponsored&utm_campaign=sej3