跨境電商系列 | 跨境電商平臺的Web性能優(yōu)化之道

疫情催生出的“宅經(jīng)濟”，讓消費者紛紛轉(zhuǎn)至線上購買物品，而可以“買全球、賣全球”的跨境電商，正在成為那些習(xí)慣于“海淘”的消費者所青睞的消費模式。根據(jù)Finaria的數(shù)據(jù)，疫情影響下，2020年全球電商用戶已經(jīng)超34億人，2021年的數(shù)量預(yù)計將同比增長10%，攀升至38億人。

在此趨勢下，剛剛落幕的今年全國兩會政府報告中就明確提出，“推動進出口穩(wěn)定發(fā)展，發(fā)展跨境電商等新業(yè)態(tài)新模式。實施更大范圍、更寬領(lǐng)域、更深層次對外開放，更好參與國際經(jīng)濟合作”。作為拉動經(jīng)濟增長的新通道、融入“雙循環(huán)”格局的重要動力，跨境電商已連續(xù)三年成為兩會熱詞，從中釋放的政策利好信號將為跨境電商產(chǎn)業(yè)鏈中的各方帶來更多機遇。

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

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

圖一：新的用戶體驗指標(biāo)Core Web Vitals

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

圖二：突然出現(xiàn)的彈窗導(dǎo)致頁面下移

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

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

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

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

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

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

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

首先是可見性。Mobile-First Indexing實行后，谷歌搜索引擎主要模擬移動爬蟲抓取網(wǎng)站?？缇畴娚唐脚_應(yīng)了解谷歌爬蟲的爬取行為變化，了解自己的移動站點是否被正確地爬取。

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

此外，谷歌也對包括電商在內(nèi)的網(wǎng)站管理者提出了一些最佳實踐。

·第一，谷歌建議網(wǎng)站不要再使用單獨的移動M站域名。例如，很多跨境電商平臺會有桌面端“www.xxx.com”和移動端“m.xxx.com”兩個域名，谷歌建議把兩者整合到“www.xxx.com”，然后跨境電商平臺通過前端服務(wù)器或CDN來自動識別訪客的設(shè)備來源，進而返回相應(yīng)的桌面端或移動端內(nèi)容，或使用響應(yīng)式網(wǎng)頁設(shè)計（RWD）技術(shù)進行頁面交付。

·第二，谷歌建議在桌面和移動站點均使用相同的圖片URL。目前，很多電商平臺會將同一張圖片壓縮、裁剪成多個版本，供桌面端、移動端甚至不同瀏覽器使用，這些圖片會放在不同的文件夾和路徑下。使用相同的圖片URL來服務(wù)桌面和移動站點并不容易，跨境電商平臺可以依靠Akamai Image Manager這類基于CDN的自動網(wǎng)站圖像優(yōu)化解決方案。

·第三，谷歌建議確保移動站點的圖片質(zhì)量是最優(yōu)化的。為了節(jié)省字節(jié)、提升移動站點性能，一些電商平臺在制作移動站點圖片時，可能會把圖片壓縮得過于模糊，最終適得其反、影響移動用戶體驗。而且在Mobile-First Indexing的背景下，移動站點是搜索引擎流量的主要入口，事關(guān)“門面”的移動端圖片質(zhì)量不容小覷?？缇畴娚唐脚_可以使用一些如WebP和AVIF等較新的圖片格式，以此在保證圖片質(zhì)量的同時降低圖片尺寸。

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

作為享譽全球的智能邊緣平臺，Akamai已為眾多全球知名跨境電商平臺提供Core Web Vitals和Mobile-First Indexing時代的Web性能優(yōu)化解決方案。其中Akamai mPulse可以幫助跨境電商平臺監(jiān)控真實用戶的LCP、FID、CLS指標(biāo)，并提供針對性優(yōu)化方向；而Akamai EdgeWorkers邊緣計算服務(wù)可以實現(xiàn)網(wǎng)站自適應(yīng)交付，統(tǒng)一移動端和桌面端的域名。