什麼是 Core Web Vitals (CWV)？

什麼是 Core Web Vitals (CWV)？

Core Web Vitals (CWV) 是一組（包含三個）Web 效能指標。Google 的搜尋引擎會衡量這三個指標，並在決定將哪些頁面顯示在搜尋結果中時考慮這些指標。這意味著搜尋引擎最佳化 (SEO) 從業者應最佳化其網頁的 core web vitals，作為提高這些網頁排名的整體策略的一部分。

CWV 是：

1. 最大內容繪製 (LCP)，衡量載入速度
2. 首次輸入延遲 (FID)，衡量頁面互動性
3. 累積版面配置移位 (CLS)，衡量視覺穩定性

什麼是 Google 頁面體驗更新？

雖然頁面載入時間長期以來一直是 SEO 的一個重要部分，但 Google 在 2020 年宣布，CWV 將在 2021 年中期成為其排名演算法的一部分。這被稱為 Google 頁面體驗更新。

在公告中，Google 表示 CWV 將被納入幫助確定頁面搜尋排名的頁面體驗訊號中。其他頁面體驗因素包括 HTTPS 安全性、行動友好性以及是否存在侵入性插頁式廣告（如快顯）。此更新的目標是獎勵提供積極使用者體驗的網頁。

Core Web Vitals 如何影響 SEO？

所有搜尋引擎都使用稱為網路爬蟲或 Web 編目程式的機器人來分析網站。這些機器人確定每個網站上的相關內容，並幫助確定該網站應何時顯示以回應搜尋查詢。Web 效能是 Google 機器人檢查網站的一個方面。

目前尚不清楚 LCP、FID 和 CLS 對 SEO 的影響程度，因為 Google 對其排名演算法大多保密。但是 CWV 確實在很大程度上影響了 SEO。許多產業觀察家進行了案例研究，證明了搜尋排名基於網站 CWV 變化而上升或下降。

這在現實中如何發揮作用？假設 Google 必須在將網站 A 和網站 B 放在搜尋查詢「什麼是 ARPANET？」的搜尋結果頂部之間做出選擇。網站 A 和網站 B 在提供有關網際網路歷程記錄的事實方面享有盛譽，並且都提供有關 ARPANET 主題的相似詳細資訊。在其他條件相同的情況下，如果網站 A 的載入速度更快、回應更快，並且在載入時的跳轉少於網站 B，Google 的演算法可能會決定將網站 A 顯示在搜尋結果的頂部——即使兩個網站提供相似水準的資訊。

（搜尋引擎排名比本範例中描述的更複雜，並且有許多因素會影響網站在搜尋中的顯示位置。）

為什麼 Google 會將 Web 效能納入排名決策？

像 Google 這樣的搜尋引擎希望盡快為搜尋者提供最相關的資訊。載入時間的延遲往往會讓使用者感到沮喪，與此相反，快速載入的頁面會增加使用者返回的機率。雖然 Google 佔據了當今英語搜尋市場的絕大部分份額，但糟糕的使用者體驗可能會導致搜尋者轉向其他來源獲取資訊。

出於類似的原因，DuckDuckGo 和 Bing 等其他搜尋引擎也可能會考慮網路效能——儘管與 Google 一樣，它們的頁面排名演算法如何運作尚不為外人所知。

什麼是最大內容繪製 (LCP)？

最大內容繪製測量載入網頁的最大部分（通常是影像或文字區塊）所需的時間。

根據 Google 的指導方針，低於 2.5 秒即將 LCP 的測量值歸類為「良好」。然而，更快總是更好。

LCP 不測量載入整個網頁需要多長時間，但它提供了一個很好的基準來指示網頁載入的速度。通常，網頁上最大的元素是其主要內容，因此其載入時間通常與使用者感知到頁面已載入的時間保持一致。

LCP 指標的早期版本是首次有效繪製 (FMP)，它測量頁面上的主要內容何時變得可見。Google 發現該指標不可靠，並已將其從一些報告工具中移除。

什麼是首次輸入延遲 (FID)？

首次輸入延遲用於衡量使用者第一次嘗試與網頁互動以及網頁做出回應之間的時間。換句話說，FID 量化了一個人第一次點擊螢幕並使某事發生的速度。根據 Google 的指導方針，「良好」的 FID 為 100 毫秒或更短。

舉一個 FID 的例子，假設 Alan 存取了一個名為「如何擦鞋」的網頁。他在頁面頂部看到一款鞋油的照片輪播，然後按一下右箭頭導覽到下一張照片。FID 是從他點擊箭頭到下一張相片開始載入所經過的時間。

FID 不會測量請求的事件實際發生需要多長時間——Alan 的瀏覽器需要多長時間才能完成下一張相片的載入。它僅測量請求與開始滿足請求之間的時間。

請注意，FID 是一種「現場指標」，或者說，是基於對真實使用者的觀察而不是假設或在「實驗室」中測量的東西。

一些「實驗室指標」替代項包括總阻塞時間 (TBT) 和可互動時間 (TTI)。TBT 測量首次內容繪製 (FCP) 和 TTI 之間經過的時間。FCP 測量從載入開始到項目載入到使用者螢幕之間的時間。就像它的名字所暗示的那樣，TTI 測量從項目看起來已經載入到使用者實際能夠與它們互動所花費的時間。

什麼是累積版面配置移位 (CLS)？

CLS 測量網頁在載入時「跳躍」的程度。具體來說，它測量頁面配置中最大的「突發」移位。根據 Google 的指導方針，「良好」的 CLS 測量值等於或小於 0.1。

版面配置移位是指頁面內容從最初出現的位置向上、向下或沿任何其他方向移動。在這個指標的語境中，突發是一組版面配置移位，它們都在一秒鐘內發生。一個突發可以長達 5 秒，並且包含任意數量的版面配置移位。

想像一下，在 Alan 載入「如何擦鞋」頁面後，他嘗試按一下右箭頭以查看輪播中的下一個影像。然而，影像輪播突然向下移動到頁面下方，Alan 最終點擊了載入在輪播上方的文字。因為網頁內容沒有同時載入，網頁發生了移位，導致 Alan 產生困惑。

此類網頁的 CLS 分數可能很差。它顯然移動了很多，將相片輪播向下移動了數十或數百個像素。

CLS 的測量方式

Google 使用以下公式計算 CLS 分數：

影響分數 * 距離分數 = 版面配置移位分數

• 影響分數是指當版面配置移位發生時，螢幕的變化百分比。
• 距離分數衡量一個元素在螢幕上移動的距離，也是以螢幕百分比的形式表示。

如果網頁在 400 像素高的螢幕上載入，然後在載入新元素時其中 200 個像素發生移位，則影響比例為 200/400，即 50%。如果新元素將另一個元素向下移動 50 像素，則距離分數為 50/400，即 12.5%。

要計算版面配置移位分數，請取這兩個百分比並將它們寫成小數，然後將它們相乘：

0.50 * 0.125 = 0.0625

如果這是網頁的最大移動量，則網頁的 CLS 分數為 0.0625。

雖然理想的情況是網頁在載入時根本不會發生移位，但這仍然是一個不錯的分數。專家建議網頁的 CLS 分數為 0.10 或更低。

如何測量 Core Web Vitals

有許多工具可用於檢查 CWV。以下是 Google 直接提供的所有產品：

• Chrome UX 報告 (CrUX) 提供 Chrome 使用者報告的現場資料，為網站擁有者提供有關實際網站使用者體驗的資料。
• Google Lighthouse 是一款免費工具，可提供有關 CWV 的實驗室指標。它為提高效能、SEO、可存取性等提供了可行的見解。
• Google PageSpeed Insights 結合了 CrUX 和 Lighthouse 的功能，提供有關 CWV 和其他 Web Vitals 的現場和實驗室資料。使用者可以使用 PageSpeed Insights 檢查任意網站的效能，無論該網站是否歸他們所有。以下是 PageSpeed Insights 報告的範例。
• Google Search Console 部分基於 CrUX 現場資料，並透過 URL 或 URL 群組提供 CWV 效能資料。

如何改善 Core Web Vitals

如何提高 LCP

• 使用內容傳遞網路 (CDN)：CDN 將內容快取在世界各地，以便內容更快地到達使用者處。
• 最佳化影像：影像通常是頁面的最大元素。縮減影像檔案大小有助於加快影像的載入時間。
• 實作消極式載入：在消極式載入中，網站資源僅在使用者需要時才載入。這使得網站載入效率更高，但研究表明，過度使用此功能可能會導致較低的 LCP。出於這個原因，Google 建議將消極式載入影像限制在「非頭版畫面」或使用者必須捲動才能看到的網頁部分。

如何提高 FID

• 縮減 JavaScript 函數的大小：代碼繁重的動態網頁可能會導致輸入延遲，因為瀏覽器必須等待所有代碼載入後才能執行。JavaScript 縮製有助於加快此過程。
• 構建靜態網頁：靜態 HTML 網頁的載入速度比動態網頁快得多，當透過 CDN 分發時尤為如此。瞭解靜態網站產生器或 Jamstack，這是一種強調靜態內容的開發理念。
• 移除不必要的第三方工具和指令碼：
在您的網站上載入其他工具也會降低效能。減少網站上第三方工具的數量可以提高 FID 和網站速度。

如何提高 CLS

• 最小化第三方頁面元素：與頁面的其餘部分相比，頁面上的第三方元素從不同的位置載入。因此，它們可能會在稍微不同的時間載入，從而在載入時變更頁面的版面配置。最大限度地減少這些第三方元素的使用會減少由此產生的版面配置移位的數量。
• 為嵌入式內容保留空間：許多第三方元素（例如廣告）對於網站的功能或業務模式至關重要，因此無法消除。開發人員可以在瀏覽器獲取實際元素之前保留網頁上的空間，以便載入這些元素。
• 確保以最佳尺寸載入影像：這與一般最佳化影像的過程略有不同。桌上型電腦、平板電腦和智慧型手機都需要尺寸略有不同的影像，因為它們的螢幕尺寸各不相同。如果瀏覽器首先載入大的、桌面最佳化的影像，然後因為使用的是智慧型手機而需要獲取行動最佳化的影像，這可能會導致頁面上的內容在載入不同大小的影像時跳轉。
• 包括影像和影片的高度和寬度：高度和寬度屬性告訴瀏覽器影像將有多大，以便他們可以在影像或影片載入之前保留該空間。我們的 HTML5 影片文章提供了有關如何為影片執行此操作的更多資訊。
• 使用 CSS 外觀比例方塊：開發人員可以使用許多 CSS 技術來利用外觀比例為頁面元素保留空間——在這裡瞭解更多資訊。

還有哪些其他重要的效能指标？

雖然 Google 告訴 SEO 從業者們應優先考慮 CWV 指標，但它們並不是唯一存在的 Web Vitals。首次內容繪製 (FCP)、DOMContentLoaded (DCL)、可互動時間 (TTI) 和第一個位元組接收時間 (TTFB) 對 SEO 的影響程度不同，但它們可以幫助開發人員識別影響 CWV 的問題。

（就其本身而言，TTFB 並不是一個特別有用的指標。但它可以作為開發人員需要修復的其他問題的標示。）

Cloudflare 如何幫助改善 CWV

Cloudflare 提供各種可幫助提高 CWV 的服務：

• Cloudflare 的內容傳遞網路 (CDN) 在跨越超過 120 個國家 330 座城市的全球網路中快取靜態和動態內容。這使得網站的載入速度更快，所有三個 CWV 都能夠從中受益。
• Cloudflare Images 提供調整大小的功能，可以壓縮影像，進一步提高網站載入速度（尤其是 LCP）。
• Cloudflare Zaraz 在雲端載入第三方資源，遠離瀏覽器，從而改善 FID 和 CLS 等指標。