当前位置: 首页 > 科技观察

Core Web Vitals和Mobile-First Indexing来袭,中国跨境电商平台的Web性能优化之道

时间:2023-03-13 07:38:48 科技观察

CoreWebVitals和Mobile-FirstIndexing来了,中国跨境电商平台Web性能优化之道狂轰滥炸”,标志着618电商购物节正式拉开序幕。疫情催生的“宅经济”让消费者转向网络购物,“全球买全球卖”的跨境电商正成为习惯“出海”的消费者青睐的消费模式购物”。Finaria数据显示,在疫情影响下,2020年全球电商用户将超过34亿,预计2021年将同比增长10%至38亿。此外为抢占上半年最大消费旺季6.18,今年天猫国际入驻了来自全球87个国家和地区的29000多个海外品牌。在此趋势下,在刚刚结束的今年全国两会政府工作报告中,明确提出发展跨境电子商务等新业态新模式。跨境电子商务正在成为我国拉动经济增长的新渠道和融入“双循环”格局的重要推动力。其释放出的积极政策信号,将为跨境电商产业链各方带来更多机遇。如何把握机遇?建设一个Web性能更好的在线平台是跨境电商的重中之重。Akamai研究表明,网页加载速度每降低100毫秒,销售额就会下降7%。更重要的是,随着谷歌最近推出了衡量Web性能并与搜索引擎排名相关的指标CoreWebVitals,今年中国跨境电商平台必须顺势而为,适当优化其网站的Web性能。平台和直观的用户体验,否则你将在搜索引擎排名中寸步难行,最终错失流量,影响收入。CoreWebVitals:影响跨境电商网站性能和搜索排名的关键因素。自网站诞生以来,响应速度或响应时间一直是人们关注的焦点,而速度慢是网站的“杀手”。因此,在过去很长一段时间里,A站点的响应时间和页面加载时间都是衡量网页性能的关键指标。随着页面元素的不断增加和新技术的引入,更加注重真实用户体验的“用户感知”指标逐渐成为主流。但是,对于这个指标,业内并没有达成共识。不仅国内电商和欧美电商使用的指标不同,国内电商使用的指标也不同。直到去年,谷歌提出了“CoreWebVitals”——一种从页面加载、交互性和视觉稳定性三个维度来评估页面用户体验的新一代Web性能体验和质量指标,业界才走向了统一和可接受的指标。定义方法和维度。图1.新的用户体验指标CoreWebVitals而且,谷歌今年肯定会将CoreWebVitals作为谷歌搜索排名的影响因素之一。CoreWebVitals由三个指标组成:LargestContentfulPaint(LCP),衡量页面渲染和视觉加载的性能。Google要求LCP在页面首次开始加载后的2.5秒内发生;FirstInputDelay(FID),衡量的是页面的交互性和流畅性,Google要求页面的FID要小于100毫秒;CumulativeLayoutShift(CLS),衡量页面的视觉稳定性,谷歌要求页面的CLS要保持小于0.1。在这三个指标中,“页面稳定性”是一个比较新的角度,对电商行业极为重要。电子商务网站内容丰富。消费者在访问时,经常会“弹出”促销信息等内容,而这些弹窗会影响页面的稳定性。例如,突然出现的促销窗口会将整个页面下移,这可能会导致本想点击“取消”按钮的消费者不小心点击了“确认订单”(如图2所示)。图2.突然出现的弹窗导致页面下移。符合CoreWebVitals标准的跨境电商网站优化措施与旧Web性能的关键指标相同。CoreWebVitals与性能直接相关,事实证明,根据CoreWebVitals,优化网站对收入有巨大的好处。例如,Vodafone在将LCP优化31%后,其销售额增长了8%,用户访问网站的转化率和购物车转化率分别提升了15%和11%。雅虎日本新闻网站(Yahoo!JAPANNews)降低了CLS,单用户页面浏览量增加了15%,用户平均浏览时间增加了13.3%,页面跳出率降低了1.72%。那么跨境电商平台如何优化才能达到Google推荐的CoreWebVitals的良好价值,最终跻身搜索引擎排名前列呢?Akamai有很多针对性的解决方案和优化建议,帮助用户将这三项指标提升到谷歌推荐的好值。对于LCP,跨境电商平台应该尽可能快地发送HTML,因为浏览器只有在收到HTML文件后才会开始渲染页面。HTML传递速度涉及到很多优化维度,比如DNS时间、首包时间、TCP时间、全局路由优化等。另外,由于页面渲染离不开关键的CSS和JS,因此JS和CSS的传输优化也很重要。跨境电商平台可以使用最新的Brotli算法压缩客户端CSS和JS,相比GZIP可以节省15%到20%的字节。服务器推送技术(ServerPush)还可以在用户请求HTML时主动将关键的JS和CSS文件推送到用户的浏览器,从而更快地加载这两个关键元素。其他优化方式包括使用原生延迟加载技术加载图片、预加载页面字体、使用CDN、HTTP/2提升连接性能等。对于FID,跨境电商平台可以延迟加载一些非关键或慢速的内容执行JavaScript文件,去除一些不必要的第三方代码,或者密切监控第三方代码,判断其是否影响用户交互性能,达到及时发现,及时优化的目的。此外,跨境电商平台还可以使用最新的JavaScript函数来提高交互性能;通过压缩减小JavaScript文件的大小;检查JavaScript代码的使用率,去除没有被调用的逻辑。对于CLS,跨境电商平台可以预先设置页面图片和视频的宽高参数。预先定义它们在页面上的渲染尺寸,避免尺寸变化导致页面加载时发生位移。此外,跨境电商平台可以为广告等动态元素预留一些空间,避免上述“弹窗”问题。最后,跨境电商平台可以使用字体预加载功能,避免JavaScript改变页面布局。值得注意的是,谷歌预计将在今年6月以“用户体验”相关指标作为其搜索排名的依据。因此,符合谷歌推荐的CoreWebVitals“Good”(见图1)的同类型网站将被列入搜索排名。直到前面。需要注意的是,谷歌要求这三个指标都为“Good”才能提高网站的搜索排名。换言之,如果跨境电商平台仅在LCP中获得“Good”,而在FID或CLS中获得“NeedsImprovement”或“Poor”,则无法获得排名红利。Mobile-FirstIndexing时代的跨境电商网站优化措施过去几年,Google一直在同时对网站的桌面站点和移动站点进行索引。随着“Mobile-FirstIndexing”的推出,从今年4月开始,谷歌的搜索引擎在抓取、索引和排名方面将优先参考移动版网站,这意味着谷歌将以抓取和索引为主移动页面。针对这一重大变化,Akamai的一些电子商务客户发现,如果不采取应对措施,他们20%的Google搜索流量可能会受到影响。针对手机版,从以下几个方面对页面进行优化。首先是能见度。实施Mobile-FirstIndexing后,谷歌搜索引擎主要模拟移动端爬虫来爬取网站。跨境电商平台要了解谷歌爬虫爬取行为的变化,知道自己的移动端站点是否被正确爬取。其次是性能。移动网站的性能变得越来越重要。跨境电商平台需要了解自己手机网站的性能和谷歌爬虫抓取网站的性能。另外,在手机站基础设施资源紧张的情况下,跨境电商平台还需要了解只抓取手机站的谷歌爬虫是否会为其源站带来额外的压力,进而有针对性地进行优化。此外,谷歌还为网站管理员提出了一些最佳实践,包括电子商务。首先,谷歌建议网站不再使用单独的手机M站域名。例如,很多跨境电商平台都有两个域名:桌面端的“www.xxx.com”和移动??端的“m.xxx.com”。环境电商平台通过前端服务器或CDN自动识别访问者设备来源,然后返回相应的桌面或移动端内容,或采用响应式网页设计(RWD)技术进行页面投放。其次,谷歌建议对桌面和移动网站使用相同的图片URL。目前很多电商平台都会将同一张图片压缩裁剪成多个版本,用于桌面端、移动端甚至不同的浏览器。这些图片将放在不同的文件夹和路径中。使用相同的图像URL为桌面和移动网站提供服务并不容易。跨境电商平台可依托AkamaiImageManager等基于CDN的自动化网站图片优化解决方案。第三,谷歌建议确保优化移动网站的图像质量。为了节省字节和提高移动站点的性能,一些电子商务平台在制作移动站点图片时可能会将图片压缩得过于模糊,最终适得其反,影响移动用户体验。而且,在Mobile-FirstIndexing的背景下,手机网站是搜索引擎流量的主要入口,与“门面”相关的手机图片质量也不容小觑。跨境电商平台可以使用WebP、AVIF等一些较新的图片格式,在保证图片质量的同时减小图片尺寸。积极探索新情况、新规则、新举措,是我国跨境电子商务发展的关键,更是生存的需要。在世界在线消费和电子商务的大趋势下,抓住CoreWebVitals和Mobile-FirstIndexing的关键点并做出相应的优化,将成为中国跨境电商培育新机遇的新契机。在风云变幻的危机中开启全新游戏《掘金秘籍》。作为全球领先的智能边缘平台,Akamai在CoreWebVitals和Mobile-FirstIndexing时代为众多全球知名跨境电商平台提供了Web性能优化解决方案。其中,AkamaimPulse可以帮助跨境电商平台监测真实用户的LCP、FID、CLS指标,并提供针对性的优化方向;而AkamaiEdgeWorkers边缘计算服务可以实现网站的自适应交付,统一移动和桌面域名。欲了解更多信息,请访问:https://www.akamai.com/us/zh/products/performance/mpulse-real-user-monitoring.jsp。