Edwin 是戰略內容專家。在加入 Yoast 之前,他花了數年時間在荷蘭領先的網頁設計雜誌上磨練自己的技能。
前段時間,谷歌宣布了 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 秒的所有內容都表現不佳。
LCP 評分概覽
LCP 也是動態的,因為載入的第一件事可能不是立即載入那麼大的圖像。當大圖像出現在屏幕上時,LCP 會切換到該大圖像。
這是一張來自谷歌的圖片,解釋了它的工作原理:
這張來自 Google 的圖片讓您對 LCP 的測量方式有一個很好的了解
在左側,您首先會看到徽標和「視覺故事」行。在第二個屏幕中,大標題顯示為 LCP 的候選。但是,在最後一個屏幕中,您會看到大圖像作為 LCP 超過了標題。如果您只有一大段內容,那可能一直都是 LCP。
如果您查看圖像中的載入過程,您可以很容易地看到為什麼這是一個如此方便的指標。您可以輕鬆發現 LCP 是什麼並優化該元素的載入。
Google 提供了多種工具來幫助您找到所有這些元素。例如,PageSpeed Insights 提供了大量關於 Web Vitals 的數據,以及大量改進頁面的建議。如果我們在 PageSpeed Insights 上運行 yoast.com,我們會得到一些分數,低於這個分數,就會得到建議。在我們的例子中,LCP 是平均的,這是因為它是一個大圖像。在下面的屏幕截圖中,您可以看到 PageSpeed Insights 正確識別了該元素。現在你現在有什麼需要改進的!
PageSpeed Insights 將大標題圖像識別為我們網站上的 LCP
根據 Google 的說法,LCP 受多種因素影響:
- 伺服器響應時間慢:因此優化您的伺服器,使用 CDN,緩存資產等。
- 渲染阻塞 JavaScript 和 CSS:所以縮小你的 CSS,延遲非關鍵 CSS 和內聯關鍵 CSS。
- 載入緩慢的資源:因此優化您的圖像、預載入資源、壓縮文本文件等。
- 客戶端渲染的問題:因此盡量減少關鍵的 JavaScript,使用伺服器端渲染和預渲染。
Google 有更多關於LCP 的背景以及如何對其進行優化的文檔。
FID:第一個輸入延遲
第一次輸入延遲測量瀏覽器響應用戶第一次交互所花費的時間。瀏覽器反應越快,頁面就會顯示得越快。如果您希望為您的用戶提供積極的體驗 – 誰不是?—,那麼您應該處理頁面的響應性。
當瀏覽器仍在後台執行其他工作時會發生延遲。所以,它已經載入了頁面,一切看起來都很花哨。但是當你點擊那個按鈕時,什麼都沒有發生!這是一個糟糕的經歷,它會導致挫敗感。即使只有一點點延遲,也可能會讓您的網站感覺遲緩且反應遲鈍。
瀏覽器必須做很多工作,有時它需要停放某些請求,然後才回來處理它們。它不能一次完成所有事情。隨著我們構建越來越複雜的網站——通常由 JavaScript 提供支持——我們對瀏覽器提出了很多要求。為了加快在屏幕上顯示內容和使其交互的過程,我們需要關注 FID。
FID 測量頁面載入期間發生的所有交互。這些是點擊、點擊和按鍵等輸入操作,而不是縮放和滾動等交互。Google 的新指標要求 FID 小於 100 毫秒才能顯示響應。100 毫秒到 300 毫秒之間的任何時間都需要改進,您可以將高於該時間的任何時間視為性能不佳。
測試 FID 後,你會得到一個分數,你可以從那裡開始工作你需要知道的
您需要記住的一件事是,如果沒有用戶交互,您將無法測量 FID。這意味著谷歌不能簡單地根據他們從實驗室獲得的數據來預測 FID——他們需要來自真實用戶的數據,或者所謂的現場數據。這也意味著這些數據不像實驗室數據那樣可控,因為它從各種設備以及以不同方式和環境使用的用戶那裡收集數據。這是您有時會看到數據更改的原因之一。
如果你想提高你的分數,你會經常發現 JavaScript 是導致成績差的罪魁禍首。JavaScript 幫助我們構建了很棒的交互,但它也可能導致帶有複雜代碼的網站速度變慢。通常,瀏覽器在執行 JavaScript 時無法響應輸入。如果您致力於改進您的 JavaScript 代碼及其處理,那麼您將自動致力於提高您的頁面體驗分數。
不過,這是最難的部分。大多數網站可以通過減少執行 JavaScript 所需的時間、分解複雜任務或刪除未使用的 JavaScript 來獲得很多好處。
例如,yoast.com 的得分很高,但並不完美。仍然有一些過程阻止我們獲得滿分。其中一些修復起來很複雜,或者我們只需要此代碼才能使我們的網站正常運行。你應該看看你的分數並確定你能做什麼。嘗試找到最容易實現或導致最大性能提升的改進。
總是有改進的地方,但你必須決定這是否值得——甚至可能
閱讀 Google關於 FID以及如何優化 FID的文檔。
CLS:內容布局轉換
第三個 Core Web Vital 是一個全新的:Content Layout Shift。該指標試圖確定「穩定」的內容如何載入到您的屏幕上。它查看載入時東西跳動的頻率和跳動量。您可以想像有時屏幕上會載入一個按鈕,邀請用戶單擊它。然而,在後台,仍然有一個很大的內容區域正在載入。結果?當內容最終完全載入時,按鈕會向下推一點——就像你想點擊那個按鈕一樣。再次,挫敗感增加!
這些布局變化經常發生在廣告中。現在,廣告是許多網站的生命線,但這些廣告通常載入得很差,以至於讓用戶感到沮喪。此外,許多複雜的網站有很多事情要做,以至於這些網站載入起來很繁重,而且只要準備好,內容就會被載入。這也可能導致內容或 CTA 在屏幕上跳來跳去,為載入速度較慢的內容騰出空間。
以 CNN.com 為例。新聞網站通常非常複雜且載入緩慢,CNN 也不例外。它在 PageSpeed Insights 測試中得分非常低。如果您查看頁面下方的問題和相應提示,您會注意到在撰寫本文時發現不少於五個移動元素。在載入這個頁面的時候,會導致很多元素跳來跳去,需要一段時間才能穩定下來,然後才有用。而且由於用戶並不總是那麼耐心,他們試圖在按鈕出現在屏幕上的那一刻點擊它——只是因為一個大廣告出現在那個位置而錯過了它。
CNN.com 在 PageSpeed Insights 中的得分並不高。你可以看到它找到了對 CLS 有貢獻的五個移動元素你需要知道的
Cumulative Layout Shift 比較幀以確定元素的移動。它獲取布局變化發生的所有點並計算這些移動的嚴重性。谷歌認為低於 0.1 的任何東西都很好,而從 0.1 到 0.25 的任何東西都需要工作。您可以將高於 0.25 的所有內容視為差。
CLS 的分數
當然,分數只關注意想不到的變化。如果用戶單擊菜單按鈕並出現摺疊菜單,則不算作布局轉換。但是,如果該按鈕確實需要對設計進行重大更改,那麼您應該確保讓用戶清楚這一點。
我已經提到廣告是造成這種情況的罪魁禍首之一。它們通常在 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 中,您可以找到三個核心指標:最大內容繪製、首次輸入延遲和內容布局偏移。這些代表性能、響應能力和視覺穩定性——谷歌頁面體驗更新的三大支柱。