了解三個核心 Web Vitals:LCP、FID 和 CLS

Edwin 是戰略內容專家。在加入 Yoast 之前,他花了數年時間在荷蘭領先的網頁設計雜誌上磨練自己的技能。

learn-about-the-three-core-web-vitals-lcp-fid-cls 了解三個核心 Web Vitals:LCP、FID 和 CLS

前段時間,谷歌宣布了 2021 年的新排名因素:頁面體驗,引起了不小的轟動。用戶體驗一直是構建最佳網站的重要組成部分,但現在,它將在幫助您為客戶構建出色網站方面發揮更大的作用。所有這一切都由新的指標提供支持,其中核心是:Core Web Vitals。是時候認識 LCP、FID 和 CLS 了!

目錄由 Web Vitals 提供支持的 Google 頁面體驗更新

我們之前已經討論過這個頁面體驗更新,但是在這篇文章中,我們想再看看那些 Core Web Vitals。一般來說,網站速度指標往往難以理解和混淆。另外,每次您測試您的網站時,它們往往會有所變化。你並不總是得到相同的分數。因此,很容易說您只需要查看一些指標,希望它們變綠。 

在所有可能的指標中,谷歌現在確定了三個所謂的 Core Web Vitals。這些是谷歌來年的重點。每年,Google 都可能會在較長時間內評估這些指標時添加或更改這些指標。 

核心 Web Vitals 是適用於所有網頁的 Web Vitals 的子集,應由所有網站所有者衡量,並將在所有 Google 工具中顯示。每個 Core Web Vitals 都代表了用戶體驗的一個不同方面,在該領域是可衡量的,並反映了以用戶為中心的關鍵結果的真實體驗。

web.dev/vitals/

頁面體驗的三大支柱

目前,頁面體驗的三大支柱是:

  • 載入性能(內容出現在屏幕上的速度有多快?)
  • 響應性(頁面對用戶輸入的反應速度有多快?)
  • 視覺穩定性(載入時屏幕上的東西會移動嗎?)

為了衡量用戶體驗的這些基本方面,谷歌選擇了三個相應的指標——也就是 Core Web Vitals:

  • LCP,最大內容繪製:這衡量了最大的內容出現在屏幕上需要多長時間。這可以是圖像或文本塊。良好的成績給用戶一種網站載入速度快的感覺。緩慢的網站可能會導致挫敗感。
  • FIS 或首次輸入延遲:這衡量站點對用戶的第一次交互做出反應所需的時間。例如,這可能是點擊按鈕。這裡的好成績給用戶一種感覺,即網站對輸入的反應很快,因此反應靈敏。再一次,緩慢會導致挫敗感。
  • CLS 或 Content Layout Shift:這衡量您網站的視覺穩定性。換句話說,載入時屏幕上的內容是否會移動——這種情況多久發生一次?當緩慢載入的廣告出現在該位置時,沒有什麼比嘗試單擊按鈕更令人沮喪的了。

不同的工具使用不同的指標

每個頁面體驗工具都使用從各種來源收集的許多 Web Vitals。由於每個工具都有不同的用途,因此每個工具使用的指標也不同。然而,共同點是核心 Web Vitals,因為谷歌在其擁有的每個頁面體驗工具中都使用了這些。

但是所有這些數字是什麼意思?您必須在您的網站上尋找什麼?您的網站何時足夠快?我什麼時候成績好?關於這個指標,你可以問一百萬個問題。雖然谷歌正在努力縮小理解和改進之間的差距,但這仍然是一個複雜的話題。衡量網站速度和用戶體驗很困難——要考慮的因素太多了。

這些核心網路生命力是什麼?

Core Web Vitals 不能孤立地工作,因為還有很多其他指標。有些基於受控的實驗室測試,而另一些則是僅適用於現場數據的指標。經過大量研究,谷歌確定了一個名為 Web Vitals 的新集合。這些是我們已經知道的指標以及一組新指標的組合。三個核心 Web Vitals 是最重要的,谷歌特別要求網站所有者密切關注這些分數並儘可能提高它們。

LCP:最大的內容塗料

最大內容繪製測量最大內容元素出現在屏幕上的點。請記住,它不會測量頁面完全載入所需的時間,而只是查看最重要部分的載入時間。

如果您有一個只有一段文字和一張大圖像的簡單網頁,則該大圖像將被視為 LCP。由於這是要在瀏覽器中載入的最大內容,它註定要給人留下深刻印象。通過讓它更快地載入,您的網站可以顯示得更快。因此,有時,它可能就像優化圖像本身一樣簡單。 

過去,有諸如「第一個有意義的內容」之類的指標,它衡量了第一條內容出現在屏幕上對用戶有意義的時間。但是,與名稱所暗示的不同,FMC 指標通常無法確定出現在屏幕上的最有意義的東西是什麼。複雜的指標會導致無用的數據。

Largest Contentful Paint 很容易理解:它只是最大元素出現在屏幕上的時間。這些元素可能包括圖像、視頻或其他類型的內容。 

你需要知道的

現在您知道了 LCP 是什麼,您可以開始針對它進行優化。根據 Google 的說法,您應該瞄準 LCP 在頁面載入的前 2.5 秒內發生。4 秒以下的所有內容都需要改進,您可以認為超過 4 秒的所有內容都表現不佳。 

learn-about-the-three-core-web-vitals-lcp-fid-cls 了解三個核心 Web Vitals:LCP、FID 和 CLSLCP 評分概覽

LCP 也是動態的,因為載入的第一件事可能不是立即載入那麼大的圖像。當大圖像出現在屏幕上時,LCP 會切換到該大圖像。 

這是一張來自谷歌的圖片,解釋了它的工作原理:

learn-about-the-three-core-web-vitals-lcp-fid-cls-1 了解三個核心 Web Vitals:LCP、FID 和 CLS這張來自 Google 的圖片讓您對 LCP 的測量方式有一個很好的了解

在左側,您首先會看到徽標和「視覺故事」行。在第二個屏幕中,大標題顯示為 LCP 的候選。但是,在最後一個屏幕中,您會看到大圖像作為 LCP 超過了標題。如果您只有一大段內容,那可能一直都是 LCP。

如果您查看圖像中的載入過程,您可以很容易地看到為什麼這是一個如此方便的指標。您可以輕鬆發現 LCP 是什麼並優化該元素的載入。 

Google 提供了多種工具來幫助您找到所有這些元素。例如,PageSpeed Insights 提供了大量關於 Web Vitals 的數據,以及大量改進頁面的建議。如果我們在 PageSpeed Insights 上運行 yoast.com,我們會得到一些分數,低於這個分數,就會得到建議。在我們的例子中,LCP 是平均的,這是因為它是一個大圖像。在下面的屏幕截圖中,您可以看到 PageSpeed Insights 正確識別了該元素。現在你現在有什麼需要改進的!

learn-about-the-three-core-web-vitals-lcp-fid-cls-2 了解三個核心 Web Vitals:LCP、FID 和 CLSPageSpeed Insights 將大標題圖像識別為我們網站上的 LCP

根據 Google 的說法,LCP 受多種因素影響: 

  • 伺服器響應時間慢:因此優化您的伺服器,使用 CDN,緩存資產等。
  • 渲染阻塞 JavaScript 和 CSS:所以縮小你的 CSS,延遲非關鍵 CSS 和內聯關鍵 CSS。
  • 載入緩慢的資源:因此優化您的圖像、預載入資源、壓縮文本文件等。
  • 客戶端渲染的問題:因此盡量減少關鍵的 JavaScript,使用伺服器端渲染和預渲染。 

Google 有更多關於LCP 的背景以及如何對其進行優化的文檔。

FID:第一個輸入延遲

第一次輸入延遲測量瀏覽器響應用戶第一次交互所花費的時間。瀏覽器反應越快,頁面就會顯示得越快。如果您希望為您的用戶提供積極的體驗 – 誰不是?—,那麼您應該處理頁面的響應性。 

當瀏覽器仍在後台執行其他工作時會發生延遲。所以,它已經載入了頁面,一切看起來都很花哨。但是當你點擊那個按鈕時,什麼都沒有發生!這是一個糟糕的經歷,它會導致挫敗感。即使只有一點點延遲,也可能會讓您的網站感覺遲緩且反應遲鈍。

瀏覽器必須做很多工作,有時它需要停放某些請求,然後才回來處理它們。它不能一次完成所有事情。隨著我們構建越來越複雜的網站——通常由 JavaScript 提供支持——我們對瀏覽器提出了很多要求。為了加快在屏幕上顯示內容和使其交互的過程,我們需要關注 FID。 

FID 測量頁面載入期間發生的所有交互。這些是點擊、點擊和按鍵等輸入操作,而不是縮放和滾動等交互。Google 的新指標要求 FID 小於 100 毫秒才能顯示響應。100 毫秒到 300 毫秒之間的任何時間都需要改進,您可以將高於該時間的任何時間視為性能不佳。

learn-about-the-three-core-web-vitals-lcp-fid-cls-3 了解三個核心 Web Vitals:LCP、FID 和 CLS測試 FID 後,你會得到一個分數,你可以從那裡開始工作你需要知道的

您需要記住的一件事是,如果沒有用戶交互,您將無法測量 FID。這意味著谷歌不能簡單地根據他們從實驗室獲得的數據來預測 FID——他們需要來自真實用戶的數據,或者所謂的現場數據。這也意味著這些數據不像實驗室數據那樣可控,因為它從各種設備以及以不同方式和環境使用的用戶那裡收集數據。這是您有時會看到數據更改的原因之一。

如果你想提高你的分數,你會經常發現 JavaScript 是導致成績差的罪魁禍首。JavaScript 幫助我們構建了很棒的交互,但它也可能導致帶有複雜代碼的網站速度變慢。通常,瀏覽器在執行 JavaScript 時無法響應輸入。如果您致力於改進您的 JavaScript 代碼及其處理,那麼您將自動致力於提高您的頁面體驗分數。

不過,這是最難的部分。大多數網站可以通過減少執行 JavaScript 所需的時間、分解複雜任務或刪除未使用的 JavaScript 來獲得很多好處。

例如,yoast.com 的得分很高,但並不完美。仍然有一些過程阻止我們獲得滿分。其中一些修復起來很複雜,或者我們只需要此代碼才能使我們的網站正常運行。你應該看看你的分數並確定你能做什麼。嘗試找到最容易實現或導致最大性能提升的改進。

learn-about-the-three-core-web-vitals-lcp-fid-cls-4 了解三個核心 Web Vitals:LCP、FID 和 CLS總是有改進的地方,但你必須決定這是否值得——甚至可能

閱讀 Google關於 FID以及如何優化 FID的文檔。

CLS:內容布局轉換

第三個 Core Web Vital 是一個全新的:Content Layout Shift。該指標試圖確定「穩定」的內容如何載入到您的屏幕上。它查看載入時東西跳動的頻率和跳動量。您可以想像有時屏幕上會載入一個按鈕,邀請用戶單擊它。然而,在後台,仍然有一個很大的內容區域正在載入。結果?當內容最終完全載入時,按鈕會向下推一點——就像你想點擊那個按鈕一樣。再次,挫敗感增加!

這些布局變化經常發生在廣告中。現在,廣告是許多網站的生命線,但這些廣告通常載入得很差,以至於讓用戶感到沮喪。此外,許多複雜的網站有很多事情要做,以至於這些網站載入起來很繁重,而且只要準備好,內容就會被載入。這也可能導致內容或 CTA 在屏幕上跳來跳去,為載入速度較慢的內容騰出空間。 

以 CNN.com 為例。新聞網站通常非常複雜且載入緩慢,CNN 也不例外。它在 PageSpeed Insights 測試中得分非常低。如果您查看頁面下方的問題和相應提示,您會注意到在撰寫本文時發現不少於五個移動元素。在載入這個頁面的時候,會導致很多元素跳來跳去,需要一段時間才能穩定下來,然後才有用。而且由於用戶並不總是那麼耐心,他們試圖在按鈕出現在屏幕上的那一刻點擊它——只是因為一個大廣告出現在那個位置而錯過了它。

learn-about-the-three-core-web-vitals-lcp-fid-cls-5 了解三個核心 Web Vitals:LCP、FID 和 CLSCNN.com 在 PageSpeed Insights 中的得分並不高。你可以看到它找到了對 CLS 有貢獻的五個移動元素你需要知道的

Cumulative Layout Shift 比較幀以確定元素的移動。它獲取布局變化發生的所有點並計算這些移動的嚴重性。谷歌認為低於 0.1 的任何東西都很好,而從 0.1 到 0.25 的任何東西都需要工作。您可以將高於 0.25 的所有內容視為差。 

learn-about-the-three-core-web-vitals-lcp-fid-cls-6 了解三個核心 Web Vitals:LCP、FID 和 CLSCLS 的分數

當然,分數只關注意想不到的變化。如果用戶單擊菜單按鈕並出現摺疊菜單,則不算作布局轉換。但是,如果該按鈕確實需要對設計進行重大更改,那麼您應該確保讓用戶清楚這一點。

我已經提到廣告是造成這種情況的罪魁禍首之一。它們通常在 JavaScript 中並且沒有得到很好的優化,而且它們是從外部伺服器提供的。每一步都會添加緩慢,您必須努力讓您的廣告立即出現在正確的位置。但是還有另一個元素會導致大的布局變化:圖像。

開發人員並不總是在代碼中指定圖像的寬度和高度,而是讓瀏覽器決定圖像在屏幕上的顯示方式。在帶有一些圖像和文本的頁面上,文本將首先出現在屏幕上,然後是圖像。如果開發者沒有為這些圖片預留空間,載入頁面的頂部會被文字填充,提示用戶開始閱讀。但是,圖像稍後載入並出現在文本首先出現的位置。這會將文本向下推,讓用戶感到不安。因此,請始終在 CSS 中指定圖像的寬度和高度,以便為要載入的圖像保留一個位置。

Google 有很多關於 CLS 的背景文檔,以及如何針對 CLS 進行優化

有很多工具可以幫助您監控 Web Vitals 並提高網站的性能。我在前段時間寫的第一篇 Page 體驗文章中提到了很多。您可以在那裡看到它們。在這裡,我想強調最重要的一些:

  • PageSpeed Insights: PageSpeed Insights 已經變成了一個全方位服務的測量工具,既有現場數據又有實驗室數據。此外,您還會獲得有關改進的建議。
  • Lighthouse: Google 將 Lighthouse 構建為用於審計 PWA 的工具,但現在它是監控性能的絕佳工具。它有幾個 PageSpeed Insights 沒有的審計,甚至還有一些 SEO 檢查。
  • Search Console Core Web Vitals 報告:您現在可以直接從 Search Console 從您的網站獲得洞察!很高興了解您的網站的表現。

這些是核心網路生命力

2021 年的某個時候,谷歌將更新他們的演算法,以納入一個新的排名因素:頁面體驗。為了衡量頁面體驗,谷歌開發了一套新的指標,稱為 Web Vitals。在這些 Web Vitals 中,您可以找到三個核心指標:最大內容繪製、首次輸入延遲和內容布局偏移。這些代表性能、響應能力和視覺穩定性——谷歌頁面體驗更新的三大支柱。

相關文章