Google即將推出的Page Experience更新將源自核心Web生命體徵(CWV)的信號引入官方排名算法中。 核心Web Vitals是一組度量標準,用於衡量與頁面交互的真實用戶的頁面載入速度,成為交互速度和視覺穩定速度。 未通過核心Web生命體徵測試的網站排名將低於目前2021年初的排名。
CWV由3速指標組成,發現這些指標對用戶的感知體驗有重大影響。 其中包括測量載入時間的最大Contentful Paint (LCP),用於測量交互性和響應性的首次輸入延遲(FID)以及用於測量視覺穩定性的累積布局偏移(CLS)。 儘管網站速度一直是許多電子商務公司的前沿,但它將成為線上格局中最重要的因素之一。 以下是您必須關注的指標以及如何提高每個指標的速度。
什麼是核心Web生命體徵
在網上留下良好的第一印象至關重要。 購物者希望立即查看產品,快速瀏攬,輕鬆結賬,不受打擾。 如果他們的期望沒有得到滿足,他們就會退縮,永遠不會再回來。 Core Web Vitals通過測量移動購物者實時瀏攬網站時提供的體驗頁面來幫助解決此問題。
雖然大多數Google工具依賴類比環境中的呲合測試(稱為實驗室數據),但Core Web Vitals是使用從Google Chrome用戶體驗(CRUX)(真實的Chrome用戶數據數據庫)收集的現場數據進行測量的。 現場數據捕獲實際用戶變量的顯著影響,如設備,網絡條件和/或設置。 根據用戶的條件,站點的性能可能會有顯著的變化,並影響您的Core Web重要得分。
每個CWV指標都有不同的閾值,可視為良好,中或差。 但是,它們都有一個共同點:Google將頁面分類為這些組時使用75百分位—如果頁面載入速度達到閾值,則會被視為速度較快的頁面載入速度為75%或更多,這是一種很好的體驗。
您無法優化您不知道的內容,因此讓我們來了解構成核心Web生命體徵的三個指標。
最大Contentful塗料(LCP)
當顯示器上完全顯示最大的內容元素(即最大的Contentful Paint或LCP的速度)時,用戶通常會感覺頁面已載入。 內容元素可以包括塊級元素,圖像(包括SVG文件中的圖像)和影片。 對於電子商務,LCP通常會測量商品圖片/英雄圖片的載入速度。 如果速度緩慢,用戶會假定整個體驗都是類似的,這會導致他們離開競爭對手的站點。
2.5秒或更短的LCP被認爲是快速的,LCP在2.6至4.0秒之間的頁面需要改進,而LCP超過4.0秒的速度較慢。
TheTieBar.com在Layer0 (Edgio)上以800毫秒的時間載入LCP
在上面的示例中,當主圖像完全繪製時,拉桿的LCP在900毫秒處被標記。 Tie Bar始終為移動購物者提供亞秒頁面載入,同時為Edgio上的數千頁面提供定制,實時庫存查詢和動態定價。
通常,LCP受以下某種影響:
- 伺服器響應時間慢
- 渲染阻止JavaScript和CSS
- 資源載入時間長
- 客戶端呈現問題
要優化LCP,請考慮以下事項:
- 通過將流量路由到最近的CDN PoP可用,暫存資產,使用服務工作者以及通過“rel=”預連接提前建立第三方連接,優化伺服器響應時間。
- 通過以下方式減少JavaScript阻止時間:縮減代碼(例如刪除空格),使用Broti或gzip等工具壓縮數據,拆分包並僅發送開始時需要的內容,以及使用Babel等工具以較新的語法提供代碼。 通過刪除任何未使用的CSS或不必要的字元(如間距,縮進或注釋),並通過將關鍵CSS直接包含在頁面標題中來內嵌來減少CSS。
- 為了縮短資源載入時間,優化和壓縮圖像和文本文件,預載入重要資源,並使用服務人員根據網路連接和暫存資產提供不同的資產。
- 使用伺服器端渲染(SSR)和預渲染,通過減少JavaScript阻止時間(請參閱第2條以優化此內容)來優化客戶端渲染。
首次輸入延遲(FID)
儘管用戶的第一印象會受到最大圖像渲染速度的影響,但在用戶嘗試與站點交互時,響應也同樣重要。 First Input Delay (首次輸入延遲)(FID)用於測量從用戶第一次與頁面交互(單擊,點擊或按鍵)到瀏攬器可以響應該交互的時間。
通常,由於JavaScript是在主線程上執行的,並且默認情況下所有JavaScript都是渲染阻止,因此會出現輸入延遲。 這意味著當瀏攬器遇到JavaScript文件時,必須暫停正在執行的操作,以便下載,分析,編譯和執行該JavaScript。 這需要的時間越長,用戶體驗的延遲越長,Google查看頁面可用性的時間也就越少。
Google認爲100毫秒或更短的FID速度與1.1至3.0秒之間需要改進,3.0秒以上的FID速度較慢。 儘管努力爭取所有核心網路生理參數的95百分位數非常重要,但Google建議在移動和臺式機上查看FID的95至99百分位數,因為這將代表最糟糕的用戶體驗,並驗證最需要改進的領域(因為它將重點關注FID,用於超過90%的頁面載入)。
還必須注意的是,與LCP和CLS不同,FID只能在現場測量(而不能在實驗室數據中找到),因為它需要真正的用戶交互。
航班資料顯示系統緩慢的常見原因包括:
- 阻止主線程50毫秒或更長時間的長任務
- 第一方腳本執行延遲了交互準備
- JavaScript執行時間過長
How至FID的Optime:
- 將長時間執行的代碼分解為較小的異步任務,並利用代碼拆分。
- 將非必要組件的繁重腳本載入(和執行)從關鍵路徑中移走,從而最大程度地減少級聯數據提取以及客戶端需要後處理的數據量。
- 使用Web工作人員,如Comlink,Workway或Workerize,這樣就可以在後臺線程上執行JavaScript,將JavaScript包代碼拆分為多個塊(也稱為延遲載入),並使用defer或async載入所有第三方腳本。
累計版面配置偏移(CLS)
頁面的視覺穩定性是影響用戶體驗的另一個因素,可能會阻止購物者繼續購買。 Core Web Vitals中的第三個也是最後一個指標是累積版面配置偏移(CLS),用於衡量用戶遇到意外版面配置偏移的頻率。
您已經經歷過以下情況:您即將點擊鏈接或產品圖像,但在觸摸屏幕之前,頁面會移動,而bam則會無意中單擊其他內容。 在最好的情況下,這些情況可能會讓人有點煩惱,但最糟糕的情況是,您會讓購物者在網上尋找更順暢,更少的體驗。
Google計算這些頁面移動的方法是:將影響分數或視口中可見內容的移動量乘以距離分數,或不穩定元素在框架中移動的距離除以顯示器的最大尺寸(高度或寬度)。 購物者瀏覽時發生的每個意外佈局偏移的所有個別分數(影響分數x距離分數)的總計,將產生頁面的CLS。
Google認為低於0.1的CLS為良好,介於0.1和0.25之間為中度,大於0.25的CLS為較差。
如果您發現CLS質量較差,則可能是由於以下原因之一:
- 正在自行調整大小的圖像或影片
- 調整廣告大小
- 延遲載入且顯示比預期大或小的字體
要改進此指標,請考慮以下事項:
Layer0如何幫助優化每個核心Web生命體徵指標的速度
擁有數百萬頁面,數千個SKU,A/B測試和個性化,動態定價和實時庫存查詢的大型復雜電子商務網站,借助Layer0可以實現幾秒以內的速度。 事實上,Layer0是市場上唯一能保證低於500ms中位數LCP的平臺。
在Layer0上,內容可即時呈現或繪製在頁面上,並且由於我們的CDN-AS-JavaScript可配置的JavaScript CDN (稱為CDN-AS-JavaScript),因此可以立即將內容選中。 它利用先進的預測預取和邊緣計算,將動態內容(JSON/SSR/HTML)從邊緣流式傳輸到用戶的瀏覽器中—甚至在用戶請求之前。 這使站點始終比購物者的點擊提前5秒。
Layer0網站在邊緣的HTML和JSON數據的暫存命中率超過95%,而傳統CDN網站的平均命中率為6%。 這是一個巨大的差異,它提供的內容通常會使網站速度緩慢。
底線
快速的頁面載入區分了讓購物者感到高興和將他們嚇跑到競爭對手的網站。 核心Web Vitals通過測量最大的Contentful Paint,首次輸入延遲和累積布局偏移來考慮用戶對速度,交互性和視覺穩定性的第一印象。 如果LCP的速度超過2.5秒,FID超過100毫秒,CLS超過.1,則可以假定用戶和Google都認為您的站點速度較慢。 谷歌會降低你的排名,消費者會跳出來,永遠不會回來。
在短短幾個月內,差的頁面體驗將損害您的品牌聲譽並影響您的SEO排名。 使用上面提供的優化策略保護您辛苦獲得的SEO,或者立即使用Layer0 (現為Edgio)。
Layer0是您開發,部署,預攬,試驗,監控和執行前端的一體化解決方案。 Shoe Carnival,Revolve和800花卉只是電子商務網站的幾個例子,這些網站提供亞秒級的速度,並從中受益。 如果您對網頁體驗更新或如何加速您的網站有任何疑問,我們很樂意立即與網站速度專家聯繫。
Google即將推出的Page Experience更新將源自核心Web生命體徵(CWV)的信號引入官方排名算法中。 核心Web Vitals是一組度量標準,用於衡量與頁面交互的真實用戶的頁面載入速度,成為交互速度和視覺穩定速度。 未通過核心Web生命體徵測試的網站排名將低於目前2021年初的排名。