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