[[406216]]

李文濤

Akamai亞太區架構師經理

進入到六月，國人便被網上的各種促銷信息“狂轟濫炸”，這標志著618電商購物節的正式開始。疫情催生出的“宅經濟”讓消費者紛紛轉至線上購買物品，而可以“買全球、賣全球”的跨境電商正成為那些習慣于“海淘”的消費者青睞的消費模式。根據Finaria的數據，疫情影響下，2020年全球電商用戶超34億人，而2021年的數量預計將同比增長10%，攀升至38億人。此外，為抓住618這個上半年最大的消費季，今年天貓國際共入駐了來自全球87個國家和地區的29000多個海外品牌。

在此趨勢下，剛剛落幕的今年全國兩會政府工作報告中就明確提出發展跨境電商等新業態新模式。跨境電商正在成為中國拉動經濟增長的新通道、融入“雙循環”格局的重要動力，從中釋放的政策利好信號將為跨境電商產業鏈中的各方帶來更多機遇。

如何抓住機遇？構建Web性能更優的在線平臺是跨境電商的重中之重。Akamai研究表明，網頁加載速度每減慢100毫秒，銷售額下降7%。更重要的是，隨著谷歌在近期引入的Core Web Vitals——衡量Web性能以及事關搜索引擎排名的指標，中國的跨境電商平臺須在今年緊跟形勢、妥善優化自身平臺的Web性能和直觀的用戶體驗，否則將在搜索引擎排名中寸步難移，最終錯過流量、影響收入。

Core Web Vitals：跨境電商網站性能和搜索排名的關鍵因素

自網站誕生以來，響應速度或響應時間一直備受關注，而速度慢乃是網站“殺手”，因此在過去很長一段時間里，站點的響應時間和頁面加載時間是衡量Web性能的關鍵指標。隨著頁面元素的不斷增多和技術的推陳出新，更關注真實用戶使用體驗的“用戶感知”指標正逐漸成為主流。但該指標在業內莫衷一是，不僅國內電商和歐美電商使用的指標不同，并且國內電商之間使用的指標亦不相同。直至去年谷歌提出從頁面負載、交互性、視覺穩定性三個維度考核頁面用戶體驗的“Core Web Vitals”——新一代Web性能體驗和質量指標，業內才走向一個統一的、均能接受的指標定義方法和維度。

圖一、新的用戶體驗指標Core Web Vitals

并且，谷歌明確將于今年把Core Web Vitals作為谷歌搜索排名的影響因素之一。Core Web Vitals由三個指標構成：Largest Contentful Paint（LCP），衡量頁面渲染和視覺加載的性能，谷歌要求LCP最好在頁面首次開始加載后的2.5秒內發生；First Input Delay（FID），衡量頁面的交互性和流暢度，谷歌要求頁面的FID最好小于100毫秒；Cumulative Layout Shift（CLS），衡量頁面的視覺穩定性，谷歌要求頁面的CLS最好保持小于0.1。在這三個指標之中，“頁面穩定性”是一個較新角度，對電商行業極為重要。電商網站內容豐富，在消費者訪問時，經常會“彈”出促銷信息等內容，而這些彈出窗口就會影響頁面的穩定性。例如，突然出現的促銷窗口會使整個頁面下移，可能導致想點“取消”按鈕的消費者不小心點到“確認下單”（如圖二所示）。

圖二、突然出現的彈窗導致頁面下移

達到Core Web Vitals標準的跨境電商網站優化舉措

與舊有Web性能的關鍵指標一樣，Core Web Vitals與業績直接相關，且事實證明，按照Core Web Vitals優化后的站點對收入大有裨益。例如，沃達豐（Vodafone）在把LCP優化31%后，其銷售額提升了8%，且用戶訪問網站的轉化率和購物車的轉化率分別提升了15%和11%。Yahoo日本新聞網站（Yahoo! JAPAN News）通過降低CLS，其提升了15%的單用戶頁面瀏覽量和13.3%的平均用戶瀏覽時長，并且頁面跳出率降低了1.72%。

那么跨境電商平臺該如何優化以達到谷歌推薦的Core Web Vitals良好數值，最終在搜索引擎排名上名列前茅？Akamai有很多針對性的方案和優化建議，幫助用戶將這三個指標提升至谷歌推薦的良好值。

針對LCP，跨境電商平臺應盡可能讓自己的HTML交付得更快，因為只有瀏覽器接收到HTML文件后才會開始渲染頁面。HTML交付速度涉及許多優化維度，如DNS時間、首包時間、TCP時間、全球路由優化。此外，由于頁面渲染離不開關鍵CSS和JS，因此JS和CSS的傳輸優化也十分重要。跨境電商平臺可以利用最新的Brotli算法對客戶端的CSS和JS進行壓縮，相比GZIP可以節省15%至20%的字節數。服務器推送技術（Server Push）亦可在用戶請求HTML的時候，主動把關鍵JS和CSS文件推送到用戶的瀏覽器上，從而更快加載兩個關鍵元素。其余的優化方式還包括使用原生懶加載技術來加載圖片、預加載頁面字體、使用CDN、HTTP/2提升連接性能等。

針對FID，跨境電商平臺可以延遲加載一些非關鍵或性能較慢的JavaScript文件，移除一些不需要的第三方代碼，或密切監測第三方代碼來判斷其是否影響用戶交互性能、達到及時發現、及時優化的目的。此外，跨境電商平臺亦可使用最新的JavaScript功能來提升交互性能；通過壓縮來減小JavaScript文件尺寸；查看JavaScript代碼的利用率、移除未被調用的邏輯。

針對CLS，跨境電商平臺可以預先設置好頁面圖片和視頻的寬度、高度參數。預先定義好它們在頁面渲染的尺寸，可以避免因尺寸變化導致的頁面加載過程中的位移。此外，跨境電商平臺可以預先分配給諸如廣告等動態元素一些空間，以避免上述提到的“彈窗”問題。最后，跨境電商平臺可以使用字體預加載功能，以及應避免使用JavaScript來改變頁面布局。

值得注意的是，谷歌預計今年六月份將把“用戶體驗”相關指標作為其搜索排名依據，因此同類型網站中達到谷歌建議的Core Web Vitals“Good”（參見圖一）的網站將在搜索排名上更靠前。需要說明的是，谷歌要求三項指標均達到“Good”，網站才可在搜索排名上得到提升。換而言之，若跨境電商平臺只在LCP達到“Good”，但FID或CLS是“Needs Improvement”或“Poor”，那將無法得到排名加成。

Mobile-First Indexing時代下的跨境電商網站優化舉措

過去幾年，谷歌一直同時索引網站的桌面站點和移動站點。而隨著“Mobile-First Indexing”的引入，從今年4月開始，谷歌搜索引擎在抓取、索引和排名上會優先參考網站的移動版本，這意味著谷歌將主要抓取和索引移動端頁面。針對這個重大變化，Akamai的一些電商客戶發現，若不采取應對措施，其可能有20%的谷歌搜索流量會受影響，因此跨境電商應在搜索引擎優化的具體規劃中重點考慮網站的移動版本，針對以下幾方面進行頁面優化。

首先是可見性。Mobile-First Indexing實行后，谷歌搜索引擎主要模擬移動爬蟲抓取網站。跨境電商平臺應了解谷歌爬蟲的爬取行為變化，了解自己的移動站點是否被正確地爬取。

其次是性能。移動站點的性能變得愈發重要，跨境電商平臺需要了解自己移動站點的性能，以及谷歌爬蟲爬取該站點的性能。此外，在移動站點的基礎設施資源緊張時，跨境電商平臺也需明晰只爬取移動站點的谷歌爬蟲是否會對自己的源站帶來額外壓力，然后進行針對性優化。

此外，谷歌也對包括電商在內的網站管理者提出了一些最佳實踐。第一，谷歌建議網站不要再使用單獨的移動M站域名。例如，很多跨境電商平臺會有桌面端“www.xxx.com”和移動端“m.xxx.com”兩個域名，谷歌建議把兩者整合到“www.xxx.com”，然后跨境電商平臺通過前端服務器或CDN來自動識別訪客的設備來源，進而返回相應的桌面端或移動端內容，或使用響應式網頁設計（RWD）技術進行頁面交付。第二，谷歌建議在桌面和移動站點均使用相同的圖片URL。目前，很多電商平臺會將同一張圖片壓縮、裁剪成多個版本，供桌面端、移動端甚至不同瀏覽器使用，這些圖片會放在不同的文件夾和路徑下。使用相同的圖片URL來服務桌面和移動站點并不容易，跨境電商平臺可以依靠Akamai Image Manager這類基于CDN的自動網站圖像優化解決方案。第三，谷歌建議確保移動站點的圖片質量是最優化的。為了節省字節、提升移動站點性能，一些電商平臺在制作移動站點圖片時，可能會把圖片壓縮得過于模糊，最終適得其反、影響移動用戶體驗。而且在Mobile-First Indexing的背景下，移動站點是搜索引擎流量的主要入口，事關“門面”的移動端圖片質量不容小覷。跨境電商平臺可以使用一些如WebP和AVIF等較新的圖片格式，以此在保證圖片質量的同時降低圖片尺寸。

積極探尋新形勢、新規則、新舉措，是中國跨境電商的發展之要、更是生存之需。在全球消費在線化、電商化的大勢所趨之下，抓住Core Web Vitals和Mobile-First Indexing的重點并進行相應優化將成為中國跨境電商在危機中育新機、于變局中開新局的“掘金秘籍”。

作為全球領先的智能邊緣平臺，Akamai已為眾多全球知名跨境電商平臺提供Core Web Vitals和Mobile-First Indexing時代的Web性能優化解決方案。其中Akamai mPulse可以幫助跨境電商平臺監控真是用戶的LCP、FID、CLS指標，并提供針對性優化方向；而Akamai EdgeWorkers邊緣計算服務可以實現網站自適應交付，統一移動端和桌面端的域名。了解更多信息，請訪問：https://www.akamai.com/cn/zh/products/performance/mpulse-real-user-monitoring.jsp。