Home 技术文章 如何优化电子商务网站的核心Web虚拟现实
Applications

如何优化电子商务网站的核心Web虚拟现实

About The Author

Outline

Google即将推出的页面体验更新将源自Core Web Vitals (CWV)的信号引入官方排名算法。 核心Web虚拟数据是一组度量标准,用于衡量页面加载速度,交互速度以及与页面交互的真实用户的视觉稳定性。 未通过核心Web虚拟现实测试的网站排名将低于2021年初的排名。

CWV由3速度量标准组成,这些指标对用户的感知体验有重大影响。 其中包括最大的Contentful Paint (LCP)(用于测量加载时间),First Input Delay (首次输入延迟)(FID)(用于测量交互性和响应性)和Cumulative Layout Shift (CLS)(用于测量视觉稳定性)。 虽然网站速度一直是许多电子商务公司的最前沿,它即将成为在线环境中最重要的因素之一。 以下是您必须关注的指标以及如何提高每项指标的速度。

什么是核心Web生命体征

在网上留下良好的第一印象至关重要。 购物者希望立即查看产品,快速浏览和轻松结账,不会受到任何干扰。 如果他们的期望没有得到满足,他们会反弹,永远不会回来。 Core Web Vitals通过在移动购物者实时浏览网站时评估提供给他们的体验页面来帮助解决此问题。

大多数Google工具都依赖于模拟环境中的综合测试(称为实验室数据),而核心Web虚拟数据则是使用从Google Chrome用户体验(Crux )(一个真实的Chrome用户数据数据库)中收集的现场数据来测量的。 现场数据捕获实际用户变量(如设备,网络条件和/或设置)的显著影响。 根据用户的情况,站点的性能可能会有很大差异,并影响您的核心Web重要分数。

每个CWV指标都有不同的阈值,可被视为”良好”,”中等”或”差”。 但是,它们都有一个共同点:Google在将页面分类到这些组时使用第75百分位数—如果页面达到阈值,在页面加载量达到75%或以上时被认为速度较快,这是一种很好的体验。

您无法优化您不知道的内容,因此我们来了解组成核心Web虚拟数据的三个指标中的每一个。

资料来源: https://web.dev/vitals/

最大内容绘制 (LCP)

用户通常认为,当最大的内容元素在屏幕上完全可见时,页面已加载,即通过最大的内容画图(LCP)的速度加载。 内容元素可以包括块级元素,图像(包括SVG文件中的图像)和视频。 对于电子商务,NCP通常会测量商品图片/英雄图片加载的速度。 如果速度较慢,用户会认为整个体验将相似,这会导致他们前往竞争对手的网站。

2.5秒或更短的NCP被认为速度较快,具有2.6到4.0秒的NCP需要改进,超过4.0秒的NCP速度较慢。

TheTieBar.com在Layer0 (Edgio)上以800毫秒的时间加载LCP。

在上例中,当主图像完全刷漆时,拉杆的LCP标记为900ms。 Tie Bar始终如一地为移动购物者提供次秒级的页面加载,同时为Edgio上的数千个页面提供自定义,实时库存查找和动态定价。

通常,LCP受以下其中一项影响:

  • 服务器响应时间较慢
  • JavaScript 和 CSS 的渲染阻塞
  • 资源加载时间长
  • 客户端呈现问题

要优化LCP,请考虑以下事项:

  1. 通过将流量路由到最近的可用CDN POP,缓存资产,使用服务人员以及使用”rel=” preconnect”尽早建立第三方连接,优化服务器响应时间。”
  2. 通过减少代码(例如,删除空格),使用Broti或gzip等工具压缩数据,拆分捆绑包并在开始时仅发送所需内容,以及使用Babel等工具使用较新的语法来提供代码,从而减少JavaScript阻止时间 。 通过删除任何未使用的CSS或不必要的字符(如间距,缩进或批注),并通过直接在页面顶部插入关键CSS来减少CSS。
  3. 为了减少资源加载时间,优化和压缩图像和文本文件,预加载基本资源以及使用服务人员根据网络连接和缓存资产提供不同的资产。
  4. 使用服务器端渲染(SSR)和预渲染,通过减少JavaScript阻塞时间(请参见#2来优化)来优化客户端渲染。

首次输入延迟 (FID)

虽然用户的第一印象受到最大图像渲染速度的影响,但当用户尝试与网站交互时,网站的响应速度同样重要。 首次输入延迟(FID)测量从用户首次与页面交互(单击,点击或按键)到浏览器可以响应该交互的时间。

通常,由于JavaScript在主线程上执行,因此会发生输入延迟,默认情况下,所有JavaScript都是渲染阻止。 这意味着当浏览器遇到JavaScript文件时,它必须暂停正在进行的下载,解析,编译和执行该JavaScript的操作。 这需要的时间越长,用户体验的延迟就越长,Google将会认为该页面可用的次数也就越少。

Google认为100毫秒或更短的FID速度同样快,1.1到3.0秒之间需要改进,3.0秒以上的FID速度同样慢。 虽然努力使所有核心Web虚拟数据达到第75百分位很重要,但Google建议查看移动设备和桌面上FID的第95至第99百分位,因为这将代表最糟糕的用户体验,并验证最需要改进的领域 (因为它将重点关注95%以上页面加载的FID)。

还需要注意的是,与LCP和CLS不同,FID只能在现场测量(不会在实验室数据中找到),因为它需要真实的用户交互。

FIDS运行缓慢的常见原因包括:

  1. 主线程受阻达 50 毫秒或更长时间的长任务
  2. 第一方脚本执行延迟交互准备
  3. JavaScript执行时间过长

‍How至FID的Optime:

  1. 将长期运行的代码分解为更小的异步任务并利用代码拆分。
  2. 将非必要组件的大量脚本加载(和执行)从关键路径上移开,并尽量减少级联数据提取以及客户端需要后处理的数据量。
  3. 使用Web工作程序,例如 ComlinkWorkwayWorkerize,这样就可以在后台线程上运行JavaScript,将JavaScript捆绑包代码拆分为多个块(也称为延迟加载),以及使用defer或async加载所有第三方脚本。

累计布局偏移 (CLS)

页面的视觉稳定性是另一个影响用户体验的因素,可能会阻止购物者继续购买。 核心Web虚拟数据中的第三个也是最后一个指标是累积版式偏移(CLS),它衡量用户遇到意外版式偏移的频率。

您已经经历了这些情况:您即将点击链接或产品图片,但在您触摸屏幕之前,页面移动,并BAM,您无意中点击 了其他东西。 在最好的情况下,这些情况是一个轻微的烦恼,但最坏的情况下,你送购物者寻找一个更流畅,更少的janky体验在网络上.

Google计算这些页面移动的方法是:将影响分数或视口中可见内容移动的量乘以 距离分数,或将不稳定元素在帧中移动的距离除以屏幕最大尺寸(高度或宽度)。 购物者浏览页面时出现的每个意外布局偏移的所有单个得分(影响分数x距离分数)的总和 ,将生成页面的CLS。

谷歌认为小于0.1的CLS是好的,介于0.1和0.25之间是中等的,大于0.25是差的。

如果您发现一个较差的CLS,可能是由于以下原因之一:

  1. 图像或视频会自动调整大小
  2. 调整广告大小
  3. 加载较晚且显示大于或小于预期的字体

要改进此指标,请考虑以下事项:

  1. 包括图像和视频元素的准确尺寸。
  2. 避免弹出广告或横幅广告。 而是静态地为AD插槽保留一个大空间。
  3. 使用字体显示和字体加载API等工具,可避免无样式或不可见文本(FOIT/FOUT)的闪烁

Layer0如何帮助优化每个核心Web虚拟指标的速度

大型,复杂的电子商务网站拥有数百万页,1000多个SKU,A/B测试和个性化,动态定价和实时库存查找,可通过Layer0实现亚秒级的速度 事实上,Layer0是市场上唯一一个保证-500中位数LCs的平台。

在Layer0上,内容会立即在页面上渲染或绘制,并由于我们的应用程序感知型JavaScript可配置CDN (称为CDN-as-JavaScript)而立即可地图化 。 它利用高级预测预取和边缘计算将动态内容(JSON/SSR/HTML)从边缘流式传输到用户的浏览器,甚至在收到请求之前。 这使网站始终领先于购物者的点击次数5秒。

Layer0网站的边缘HTML和JSON数据的缓存命中率超过95%,而传统CDN上的网站的平均命中率为6%。 这在交付通常会使网站速度变慢的内容方面是一个巨大的差异。

底线

快速页面加载区分了取悦购物者和吓跑购物者的竞争对手网站。 Core Web Vitals通过测量最大内容画图,首次输入延迟和累积布局偏移来考虑用户对速度,交互性和视觉稳定性的第一印象。 如果LCP的速度超过2.5秒,FID的速度超过100毫秒或CLS的速度超过.1,您可以假设用户和Google都认为您的网站速度较慢。 谷歌将降低你的排名,消费者将反弹,永远不会回来.

在短短几个月内,糟糕的页面体验将会损害您的品牌声誉并影响您的SEO排名。 使用上面提供的优化策略来保护您来之不易的SEO,或立即使用Layer0 (现为Edgio)。

Layer0是您开发,部署,预览,实验,监视, 并运行你的前端。 鞋子狂欢节,Revolve和1 -800花,只是提供亚秒级速度并从中获益的电子商务网站的几个示例。 如果您对页面体验更新或如何加快网站速度有任何疑问,我们很乐意立即与网站速度专家联系。

Google即将推出的页面体验更新将源自Core Web Vitals (CWV)的信号引入官方排名算法。 核心Web虚拟数据是一组度量标准,用于衡量页面加载速度,交互速度以及与页面交互的真实用户的视觉稳定性。 未通过核心Web虚拟现实测试的网站排名将低于2021年初的排名。