Home 技術文章 如何優化電子商務網站的核心Web Vitals
Applications

如何優化電子商務網站的核心Web Vitals

About The Author

Outline

Google即將推出的網頁體驗更新將從核心網路虛擬化(CWV)衍生的信號引入官方排名算法。 核心Web虛擬化是一組度量標準,用於衡量與頁面交互的真實用戶的頁面載入速度,交互速度和視覺穩定性。 未通過核心網站虛擬測試的網站排名將低於目前的2021年初。

CWV由3速度量標準組成,這些度量標準對用戶的感知體驗有顯著影響。 其中包括用於測量負載時間的最大Contentful Paint (LCP),用於測量交互性和響應性的首次輸入延遲(FID),以及用於測量視覺穩定性的累積佈局偏移(CLS)。 儘管網站速度在許多電子商務公司的前沿,但它將成爲線上環境中最重要的因素之一。 以下是您必須關注的指標,以及如何提高每個指標的速度。

什麼是核心Web虛擬化

在網上留下良好的第一印象是至關重要的。 購物者希望立即查看產品,快速瀏覽和輕鬆結帳,而不會中斷。 如果沒有達到他們的期望,他們就會反彈,永遠不會再回來。 Core Web Vitals通過測量移動購物者實時瀏覽網站時提供的體驗頁面來幫助解決此問題。

雖然大多數Google工具都依賴於類比環境中的綜合測試(稱爲實驗室數據),但核心Web虛擬化是使用從Google Chrome用戶體驗(crux)(真實Chrome用戶數據數據庫)收集的現場數據進行測量的。 現場數據捕獲實際用戶變量(如設備,網路條件和/或設定)的顯著影響。 視使用者的狀況而定,網站的效能可能會大幅改變,並會影響您的核心Web重要分數。

每個CWV指標都有不同的閾值,可視爲良好,中或差。 但是,它們都有一個共同點:谷歌在將頁面分類到這些組中時使用第75百分位數—達到閾值的頁面被認爲在75%或更多的頁面載入中速度快是一種很好的體驗。

您無法優化您不知道的內容,因此讓我們瞭解構成核心Web虛擬化的三個指標。

資料來源 :https://web.dev/vitals/

最大Contentful Paint (LCP)

當最大的內容元素在顯示器上完全可見時,用戶通常會感覺到頁面已載入,即根據最大內容畫圖(即LCP)的速度。 內容元素可以包括塊級元素,圖像(包括SVG文件中的圖像)和影片。 對於電子商務,LCP通常會測量商品圖片/英雄圖片載入的速度。 如果速度緩慢,用戶會假定整個體驗都是相似的,這會導致他們離開競爭對手的站點。

2.5秒或更短的LCP被認爲是快速的,LCP在2.6到4.0秒之間的頁面需要改進,而LCP在4.0秒以上的頁面速度很慢。

TheTieBar.com在Layer0 (Edgio)上以800毫秒的時間載入LCP。

在上例中,當主圖像完全塗漆時,拉桿的LCP標記爲900毫秒。 在Edgio上的數千頁上,Tie Bar持續爲移動購物者提供次秒的頁面載入,同時提供定製,實時庫存查找和動態定價。

通常,LCP會受到下列其中一種影響:

  • 伺服器響應時間緩慢
  • 渲染阻止JavaScript和CSS
  • 資源載入時間長
  • 客戶端渲染問題

要優化LCP,請考慮以下事項:

  1. 通過將流量路由到最接近的可用CDN Pop,暫存資產,使用服務工作人員以及使用”rel=”預連接”及早建立第三方連接,優化伺服器響應時間。
  2. 減少JavaScript阻塞時間,方法是:精簡代碼(例如刪除空格),使用Broti或gzip等工具壓縮數據 ,拆分捆綁包並在開始時僅發送所需的內容,以及使用Babel等工具使用較新語法提供代碼 。 通過刪除任何未使用的CSS或不必要的字元(如間距,縮進或註釋)來減少CSS,並通過將關鍵CSS直接包含在頁面標題中來內聯來減少CSS。
  3. 爲了縮短資源負載時間,優化和壓縮映像和文本文件,預載入基本資源,並使用服務工作人員根據網路連接和暫存資產提供不同的資產。
  4. 使用伺服器端呈現(SSR)和預呈現,通過減少JavaScript阻塞時間(請參閱#2以進行優化)優化客戶端呈現。

首次輸入延遲(FID)

儘管用戶的第一印象會受到最大圖像渲染速度的影響,但當用戶嘗試與網站交互時,您的網站響應速度同樣重要。 首次輸入延遲(FID)測量用戶首次與頁面交互(單擊,點擊或按鍵)到瀏覽器響應該交互的時間。

通常,由於JavaScript在主線程上執行,並且預設情況下所有JavaScript都是渲染阻止,因此會出現輸入延遲。 這意味着當瀏覽器遇到JavaScript文件時,它必須暫停下載,解析,編譯和執行該JavaScript。 這需要的時間越長,用戶體驗的延遲就越長,谷歌就會越少查看可用的頁面。

谷歌認爲FID的速度等於或小於100毫秒,在1.1到3.0秒之間需要改進,超過3.0秒則慢。 儘管爲所有核心Web虛擬數據爭取第75百分位是很重要的,但Google建議在移動和桌面上查看FID的第95至99百分位,因爲這將代表最差的用戶體驗,並驗證需要最大改進的領域 (因爲它將側重於95%以上的頁面載入的FID)。

另外還必須注意,與LCP和CLS不同,FID只能在現場測量(而不會在實驗室數據中找到),因爲它需要真正的用戶交互。

航班資料顯示系統速度緩慢的常見原因包括:

  1. 阻止主線程達50毫秒或更長時間的長任務
  2. 第一方腳本執行延遲了交互準備
  3. JavaScript執行時間過長

‍How到FID的Optime:

  1. 將長期執行的代碼分解爲較小的異步任務,並利用代碼拆分。
  2. 將非重要組件的大量腳本載入(和執行)移出關鍵路徑,並儘量減少級聯數據提取以及客戶端需要後處理的數據量。
  3. 使用Web工作人員,如 ComlinkWorkwayWorkerize,這使得可以在後臺線程上執行JavaScript,將JavaScript包代碼拆分爲多個塊(也稱爲懶惰載入),並使用延遲或異步載入所有第三方腳本。

累積佈局偏移(CLS)

頁面的視覺穩定性是影響用戶體驗的另一個因素,它會阻止購物者繼續購買。 核心Web Vitals中的第三個也是最後一個指標是”累積佈局偏移”(CLS),它衡量用戶遇到意外佈局偏移的頻率。

您已經經歷過這些情況:您即將點擊鏈接或產品圖像,但在您觸摸顯示器,頁面移動和bam之前 ,您會無意中點擊其他內容。 在最好的情況下,這些情況是一個輕微的煩惱,但最壞的情況下,你發送購物者尋找一個更流暢,更少陰險的體驗在網上.

Google計算這些頁面移動的方法是:將影響分數或視口中可見內容移動的量乘以 距離分數,或者將不穩定元素在幀中移動的距離除以顯示器的最大尺寸(高度或寬度)。 購物者瀏覽時發生的每個意外佈局偏移的所有單獨分數(影響分數x距離分數)的總和 將導致頁面的CLS。

谷歌認爲CLS低於0.1的良好,介於0.1和0.25之間爲中度,大於0.25爲差。

如果您發現CLS較差,可能是由於以下原因之一:

  1. 圖像或影片自行調整大小
  2. 調整廣告大小
  3. 延遲載入並顯示大於或小於預期的字體

要改進此指標,請考慮以下事項:

  1. 包括圖像和影片元素的準確尺寸。
  2. 避免彈出廣告或橫幅。 相反,靜態地爲AD插槽保留較大的空間。
  3. 使用字體顯示和字體載入API等工具避免不樣式或不可見的文本(FOIT/FOUT )閃爍

Layer0如何幫助優化每個Core Web Vitals指標的速度

大型複雜的電子商務網站具有數百萬頁面,數千個SKU,A/B測試和個性化,動態定價和實時庫存查找功能,可通過Layer0實現次秒的速度。 事實上,Layer0是市場上唯一保證低於500ms中位LCP的平臺。

在Layer0上,內容在頁面上即時呈現或繪製,並且由於我們的應用程式感知,JavaScript可配置CDN (稱爲cdn-as-JavaScript)而立即可製圖 。 它利用先進的預測預取和邊緣計算,將動態內容(JSON/SSR/HTML)從邊緣流式傳輸到用戶的瀏覽器中—甚至在請求之前。 這使站點始終比購物者的點擊提前5秒鐘。

Layer0上的網站邊緣的HTML和JSON數據的暫存命中率超過95%,而傳統CDN上的網站平均命中率爲6%。 這是一個巨大的差異,交付內容通常會使網站緩慢.

底線

快速的頁面載入區分了吸引購物者和嚇跑競爭對手網站的購物者。 核心Web虛擬化通過測量最大的Contentful Paint,第一輸入延遲和累積佈局移動來考慮用戶對速度,交互性和視覺穩定性的第一印象。 如果LCP的速度超過2.5秒,FID的速度超過100毫秒,CLS的速度超過.1秒,您可以假設用戶和Google都認爲您的網站速度較慢。 谷歌將降低你的排名,消費者將反彈,永遠不會回來.

短短几個月內,不良的頁面體驗將損害您的品牌聲譽,並影響您的SEO排名。 使用上面提供的優化策略保護您來之不易的SEO,或立即使用Layer0 (現在是Edgio)。

Layer0是您的一體化解決方案,用於開發,部署,預覽,實驗,監視, 跑前端。 鞋嘉年華,旋轉和1-800-WELORTS只是電子商務網站的幾個例子,它們提供了次秒的速度,並正在得到它的好處。 如果您對頁面體驗更新或如何加快網站速度有任何疑問,我們很樂意立即與網站速度專家聯繫。

Google即將推出的網頁體驗更新將從核心網路虛擬化(CWV)衍生的信號引入官方排名算法。 核心Web虛擬化是一組度量標準,用於衡量與頁面交互的真實用戶的頁面載入速度,交互速度和視覺穩定性。 未通過核心網站虛擬測試的網站排名將低於目前的2021年初。