作者：Akamai亞太區(qū)架構(gòu)師經(jīng)理 李文濤

進(jìn)入到六月,國(guó)人便被網(wǎng)上的各種促銷信息“狂轟濫炸”,這標(biāo)志著618電商購(gòu)物節(jié)的正式開(kāi)始。疫情催生出的“宅經(jīng)濟(jì)”讓消費(fèi)者紛紛轉(zhuǎn)至線上購(gòu)買(mǎi)物品,而可以“買(mǎi)全球、賣(mài)全球”的跨境電商正成為那些習(xí)慣于“海淘”的消費(fèi)者青睞的消費(fèi)模式。根據(jù)Finaria的數(shù)據(jù),疫情影響下,2020年全球電商用戶超34億人,而2021年的數(shù)量預(yù)計(jì)將同比增長(zhǎng)10%,攀升至38億人。此外,為抓住618這個(gè)上半年最大的消費(fèi)季,今年天貓國(guó)際共入駐了來(lái)自全球87個(gè)國(guó)家和地區(qū)的29000多個(gè)海外品牌。

在此趨勢(shì)下,剛剛落幕的今年全國(guó)兩會(huì)政府工作報(bào)告中就明確提出發(fā)展跨境電商等新業(yè)態(tài)新模式。跨境電商正在成為中國(guó)拉動(dòng)經(jīng)濟(jì)增長(zhǎng)的新通道、融入“雙循環(huán)”格局的重要?jiǎng)恿?從中釋放的政策利好信號(hào)將為跨境電商產(chǎn)業(yè)鏈中的各方帶來(lái)更多機(jī)遇。

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

Core Web Vitals:跨境電商網(wǎng)站性能和搜索排名的關(guān)鍵因素

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

圖一、新的用戶體驗(yàn)指標(biāo)Core Web Vitals

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

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

達(dá)到Core Web Vitals標(biāo)準(zhǔn)的跨境電商網(wǎng)站優(yōu)化舉措

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

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

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

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

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

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

Mobile-First Indexing時(shí)代下的跨境電商網(wǎng)站優(yōu)化舉措

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

首先是可見(jiàn)性。Mobile-First Indexing實(shí)行后,谷歌搜索引擎主要模擬移動(dòng)爬蟲(chóng)抓取網(wǎng)站。跨境電商平臺(tái)應(yīng)了解谷歌爬蟲(chóng)的爬取行為變化,了解自己的移動(dòng)站點(diǎn)是否被正確地爬取。

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

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

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

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