当前位置: 首页 > 科技赋能

核心WebVitals和移动优先索引来了,如何优化中国跨境电商平台的Web性能

时间:2024-05-19 16:53:12 科技赋能

文/李文涛阿卡迈亚太架构师经理进入六月,国人就被各种促销信息淹没网络“狂轰滥炸”,标志着电商购物节正式启动。

疫情催生的“宅经济”让消费者转向线上购买,而能够“买全球、卖全球”的跨境电商正成为受海外消费者青睐的消费模式。

习惯“海外购物”。

Finaria数据显示,在疫情影响下,2018年全球电商用户数量超过34亿,预计2018年这一数字将同比增长10%,达到38亿。

此外,为了抓住上半年最大的消费季,天猫国际今年吸引了来自全球87个国家和地区的0余个海外品牌入驻。

在此趋势下,刚刚结束的今年两会政府工作报告明确提出发展跨境电子商务等新业态新模式。

跨境电商正在成为我国经济增长的新渠道和融入“双循环”格局的重要动力。

其释放的积极政策信号将为跨境电商产业链各方带来更多机遇。

如何抓住机遇?建立一个网络性能更好的在线平台是跨境电商的首要任务。

Akamai 研究表明,网页加载速度每慢一毫秒,销售额就会下降 7%。

更重要的是,随着谷歌最近推出了Core Web Vitals——衡量Web性能且与搜索引擎排名相关的指标,中国跨境电商平台今年必须跟上形势,适当优化Web自己平台的性能。

和直观的用户体验,否则将很难在搜索引擎排名中移动,最终错失流量并影响收入。

核心网Vitals:跨境电商网站性能和搜索排名的关键因素。

网站诞生以来,响应速度或者说响应时间一直是人们关注的问题,而速度慢就是网站的“杀手”。

因此,在过去很长一段时间里,站点响应时间和页面加载时间是衡量Web性能的关键指标。

随着页面元素的不断增加和技术的创新,更注重真实用户体验的“用户感知”指标逐渐成为主流。

但业内对这一指标尚未达成共识。

不仅国内电商和欧美电商使用的指标不同,国内电商使用的指标也不同。

直到去年谷歌提出“Core Web耀明”——从页面负载、交互性、视觉稳定性三个维度评估页面用户体验的新一代Web性能体验和质量指标,才被业界转向统一且普遍接受的指标。

定义方法和维度。

图1:新的用户体验指标Core WebVitals 而且,谷歌已经明确表示,今年将把Core WebVitals作为Google搜索排名的影响因素之一。

Core Web Vitals 由三个指标组成: Largest Contentful Paint (LCP),衡量页面渲染和视觉加载的性能。

Google 要求 LCP 最好在页面首次开始加载后 2.5 秒内发生; First Input Delay(FID),衡量页面的交互性和流畅性,Google要求页面的FID要小于毫秒; Cumulative Layout Shift (CLS),衡量页面的视觉稳定性,Google 要求页面的 CLS 应小于 0.1。

在这三个指标中,“页面稳定性”是一个比较新的角度,对于电商行业来说极其重要。

电子商务网站内容丰富。

消费者访问时,经常会弹出促销信息等内容,而这些弹出窗口会影响页面的稳定性。

例如,突然的促销窗口会导致整个页面下移,这可能会导致想要点击“取消”按钮的消费者不小心点击了“确认订单”(如图2所示)。

图2:突然弹出的窗口导致页面下移。

符合核心网Vitals标准的跨境电商网站优化措施与旧网性能关键指标相同。

Vitals核心网与性能直接相关,事实证明,根据Vitals核心网优化的Vitals网站将会给营收带来巨大的福音。

例如,沃达丰对其LCP优化31%后,销售额增长了8%,访问网站的用户转化率和购物车转化率分别提高了15%和11%。

通过减少 CLS,Yahoo! JAPAN News 单用户页面浏览量增加了 15%,平均用户浏览时间增加了 13.3%,页面跳出率降低了 1.72%。

那么跨境电商平台应该如何优化,才能实现谷歌推荐的芯网Vitals的良好价值,并最终登上搜索引擎排名前列呢? Akamai有很多针对性的解决方案和优化建议来帮助用户将这三个指标提高到Google推荐的良好值。

对于LCP,跨境电商平台应该尽可能快地交付HTML,因为浏览器在收到HTML文件之前不会开始渲染页面。

HTML传输速度涉及多个优化维度,如DNS时间、首包时间、TCP时间、全局路由优化等。

另外,由于页面渲染离不开关键的CSS和JS,因此JS和CSS的传输优化也非常重要。

跨境电商平台可以使用最新的Brotli算法来压缩客户端CSS和JS,与GZIP相比可以节省15%到20%的字节。

服务器推送技术还可以在用户请求HTML时主动将关键的JS和CSS文件推送到用户的浏览器,从而更快地加载这两个关键元素。

其他优化方法包括使用原生延迟加载技术加载图片、预加载页面字体、使用CDN、HTTP/2提高连接性能等。

对于FID,跨境电商平台可以延迟加载一些非关键或缓慢的内容。

执行JavaScript文件,删除一些不必要的第三方代码,或者密切监视第三方代码以确定其是否影响用户交互性能并实现及时发现。

,及时优化的目的。

此外,跨境电商平台还可以利用最新的JavaScript特性来提高交互性能;通过压缩减小 JavaScript 文件大小;检查 JavaScript 代码的使用并删除未调用的逻辑。

对于CLS,跨境电商平台可以预先设置页面图片和视频的宽度和高度参数。

提前在页面渲染时定义好它们的尺寸,可以避免页面加载时因尺寸变化而产生位移。

此外,跨境电商平台可以预先分配一些空间给广告等动态元素,以避免上述的“弹出”问题。

最后,跨境电商平台可以使用字体预加载功能,并应避免使用JavaScript来改变页面布局。

值得注意的是,谷歌预计将在今年6月使用“用户体验”相关指标作为其搜索排名的依据。

因此,符合Google推荐Core WebVitals“好”(见图1)的同类型网站在搜索排名中的排名会靠前。

再往上走。

需要注意的是,Google要求这三个指标全部达到“Good”,网站才能在搜索排名上得到提升。

换句话说,如果跨境电商平台在LCP中仅达到“良好”,但其FID或CLS为“需要改进”或“较差”,则不会获得排名奖金。

移动优先索引时代的跨境电商网站优化举措过去几年,谷歌一直对网站的桌面网站和移动网站进行索引。

随着“移动优先索引”的推出,从今年4月开始,谷歌搜索引擎在抓取、索引和排名时将优先考虑移动版本的网站,这意味着谷歌将主要抓取和索引移动页面。

针对这一重大变化,Akamai的一些电子商务客户发现,如果不采取对策,他们20%的Google搜索流量可能会受到影响。

因此,跨境电商企业应重点关注网站对搜索引擎优化的具体规划。

针对移动版本,页面针对以下方面进行了优化。

首先是可见性。

实施Mobile-First Indexing后,Google搜索引擎主要模拟移动爬虫来抓取网站。

跨境电商平台应该了解谷歌爬虫抓取行为的变化,了解自己的移动网站是否被正确抓取。

其次是性能。

移动网站的性能变得越来越重要。

跨境电商平台需要了解自家移动网站的性能以及谷歌爬虫抓取网站的性能。

此外,当移动网站的基础设施资源紧张时,跨境电商平台还需要了解仅抓取移动网站的谷歌爬虫是否会给自己的源站带来额外的压力,然后进行有针对性的优化。

此外,谷歌还为包括电子商务公司在内的网站管理者提出了一些最佳实践。

首先,谷歌建议网站不再使用单独的移动M网站域名。

例如,许多跨境电商平台有两个域名:桌面上的“www.xxx.com”和移动??设备上的“m.xxx.com”。

Google建议将两者整合为“www.xxx.com”,然后跨境电商平台通过前端服务器或CDN自动识别访问者设备的来源,然后返回相应的桌面或移动内容,或者使用响应式网页设计(RWD)技术进行页面交付。

其次,Google 建议在桌面和移动网站上使用相同的图像 URL。

目前,许多电商平台会将同一张图片压缩裁剪成多个版本,适用于桌面、移动甚至不同的浏览器。

这些图像将被放置在不同的文件夹和路径中。

使用相同的图像 URL 来服务桌面和移动网站并不容易。

跨境电商平台可以依赖基于CDN的自动网站图像优化解决方案,例如Akamai Image Manager。

第三,Google 建议确保移动网站的图像质量得到优化。

为了节省字节并提高移动网站性能,一些电子商务平台在创建移动网站图像时可能会将图像压缩得过于模糊,这最终会适得其反,影响移动用户体验。

而且,在移动优先索引的背景下,移动网站是搜索引擎流量的主要入口,与“门面”相关的移动图像质量也不容小觑。

跨境电商平台可以使用一些较新的图像格式如WebP、AVIF等,在保证图像质量的同时减小图像尺寸。

积极探索新形势、新规则、新举措,是我国跨境电商发展的必然,也是生存的需要。

在全球在线消费和电子商务的大趋势下,抓住核心网Vitals和移动优先索引的重点并进行相应优化,将成为中国跨境电商培育新机遇的新契机。

危机中求变,形势变局中开新局。

《掘金的秘密》。

作为全球领先的智能边缘平台,Akamai 已为众多全球领先的跨境电商平台提供了核心 Web 和移动优先索引时代的 Web 性能优化解决方案。

其中,Akamai mPulse可以帮助跨境电商平台监控真实用户的LCP、FID、CLS指标,并提供针对性的优化方向;而Akamai EdgeWorkers边缘计算服务可以实现网站的自适应交付,并统一移动和桌面上的域名。