為提升網頁的瀏覽體驗,2020 年 5 月份,Google 公布了核心網頁指標(Core Web Vitals),并宣稱核心網頁指標可能成為排名因素之一。現在時間終于敲定,核心網頁指標加入排名影響因素的時間是 2021 年 5 月份。
核心網頁指標(Core Web Vitals)是模擬真實場景、以用戶為中心的一系列用戶體驗指標。主要衡量網頁可用性的多個維度,分別是加載時間、交互性、內容加載時的穩定性。
如上圖,之前影響排名的網頁體驗類因素有移動友好性、安全瀏覽、HTTPS、無干擾性插頁式廣告,之后將加入核心網頁指標的三個指標。這三個指標分別是 LCP、FID、CLS。
LCP,Largest Contentful Paint,最大內容渲染時間,即瀏覽器可視區域中最大的內容塊渲染出來的時間。
這個內容塊可以是<img>、<svg>
或者<video>
圈出的矩形區域,也可以是文字塊圈出的區域。
可以看下官網的示范圖:
FCP(First Contentful Paint),是首次繪制內容的事件,即上圖中第一個內容模塊展示出來的時刻。
LCP,是可視區域內最大內容塊渲染出來的時間,而上圖中最大的內容塊是首頁的圖片,因此,當圖片渲染出來時,即 LCP 的時刻。
FCP 能讓用戶不著急跳出,而最大內容塊渲染出來,才是用戶真正開始瀏覽網頁的時刻,所以 LCP 更符合用戶的瀏覽習慣。
關于 LCP 指標的衡量和優化,可以參考官方文檔:
web.dev/lcp/
web.dev/optimize-lcp/
回想你有沒有遇到過網頁打開后,點擊鏈接、按鈕或輸入文字沒有反應的情況。這是因為瀏覽器主線程在執行其他操作,比如在解析和執行一些大型 JS。
而 FID(First Input Delay,首次輸入延遲)就是考察從用戶首次與頁面進行交互(即當他們單擊鏈接,點擊按鈕或使用自定義的JavaScript驅動的控件)到瀏覽器實際上能夠響應該交互之間的時間。
關于 FID 指標的衡量和優化,可以參考官方文檔:
web.dev/fid/
web.dev/optimize-fid/
CLS,Cumulative Layout Shift,累積布局偏移,* 用來衡量網頁加載時模塊上下跳動的指標* 。比如下面的例子:
當用戶點擊時,模塊位置變化,導致點擊錯誤,是很差的用戶體驗。因此,當模塊上下跳動的偏移越大,CLS 的分數越低。可以看下官方的示范圖片:
關于 FID 指標的衡量和優化,可以參考官方文檔:
web.dev/cls/
web.dev/optimize-cls/
關于這個問題,Google是這么說的:
出色的頁面體驗使人們可以做更多的事情并更深入地參與其中;相反,不良的頁面體驗可能會妨礙人們在頁面上找到有價值的信息。通過將頁面體驗添加到Google在對搜索結果進行排名時考慮的數百種信號中,我們旨在幫助人們更輕松地訪問他們正在尋找的信息和網頁,并支持網站所有者提供用戶喜歡的體驗。
另外,如果網頁滿足網頁體驗的所有指標,Google 還會在 SERP 添加特殊標示!我猜測是類似于 AMP 網頁的小閃電。
這個特殊標示會近期開始測試,如果沒問題,會在 2021 年 5 月同步上線。
盡管此次是網頁體驗相關的內容,但 Google 不惜多次打臉,反復強調內容的相關性和質量仍是更重要的因素。好的網頁體驗,無法超越高相關性、優質的網頁。但如果內容質量相近的網頁,網頁體驗好的會有排名優勢。
這個也容易理解,用戶更愿意等待一個優質內容的網頁,而不愿意快速打開一個垃圾網頁。另外也能知道,在整體的排名因素中,內容因素是最高優先級的,其次才是網頁體驗部分。
了解了核心網頁指標,我該怎么去優化呢。
第一步,需要使用 GSC 的 核心網頁指標報告,做個整站調查,了解網站的整體情況和現存問題。
如上圖,先看下自己網站的整體情況怎么樣。有多少優質的、待改進的、欠佳的網頁。
然后看下改進和欠佳的問題具體是哪些。點擊還能看到涉及網頁的具體問題。
第二步,就是使用 Page Speed Insights 和 Lighthouse 工具來測試和提升相關性能指標。
另外,還可以訪問 web.dev/vitals-tools 了解更多工具。
Google 說,AMP 仍是提升性能成本最低的方式之一,比如你如果用 Wordpress 搭建網站,使用 AMP 插件就可以使整站實現 AMP。如果你在使用 AMP,可以使用 AMP 性能指南來診斷網頁,進一步提升性能。
另外,Google 會繼續支持和維護 AMP 項目,像之前一樣。
至于 AMP 是否會下線,我覺得不太可能。但地位沒之前那么高,卻是顯而易見的。
核心網頁指標的推出,也是因為 AMP 的局限明顯,復雜的交互無法滿足開發者的需求才推出。
我預計,核心網頁指標和 AMP 會長期共存,并有差異化的定位。
AMP 面向中小站長和開發者,實現成本低,交互需求不算復雜。
而核心網頁指標則面向交互需求較高、愿意投入開發的站長和開發者。
了解 Google 搜索結果中的網頁體驗 https://developers.google.com/search/docs/guides/page-experience
LCP 文檔 https://web.dev/lcp/
LCP 優化文檔 https://web.dev/optimize-lcp/
FID 文檔 https://web.dev/fid/
FID 優化文檔 https://web.dev/optimize-fid/
CLS 文檔 https://web.dev/cls/
CLS 優化文檔 https://web.dev/optimize-cls/
【重要】谷歌發布核心網頁指標Core Web Vitals https://mp.weixin.qq.com/s/HFTVRBEsq5ZrbKjICv33VA
Page Speed Insights https://developers.google.com/speed/pagespeed/insights/
Lighthouse 工具 https://developers.google.com/web/tools/lighthouse
AMP 性能指南 https://amp.dev/page-experience/
(來源:SEO技術流)
以上內容屬作者個人觀點,不代表雨果網立場!本文經原作者授權轉載,轉載需經原作者授權同意。
(來源:SEO技術流)