Home 操作方法 确保您的电子商务网站的次秒级负载
Applications

确保您的电子商务网站的次秒级负载

About The Author

Outline

确保您的电子商务网站的次秒加载时间是一项艰巨的工作。 在Layer0,我们努力使这一过程变得简单得多,Layer0将帮助您实现这一里程碑。 我们在这里所做的是创建一个清单,您可以遵循该清单,以确保您的生产站点速度快得惊人,并且您花费的时间最少。

首先,我们来讨论一下如何测量速度:

衡量绩效

**我们在本例中使用了SpeedCurve (SC),但您可以使用WebPageTest或任何其他产品
我们将重点放在用于测量的LCP指标上。 我们的目标是:

  • 首页 < 1.5秒
  • PLP至PDP导航:0.5秒

请记住以下3种情况也很重要,因为这会影响消费者的体验 (一)透过自然搜寻交通,直接前往计划推行者╱计划推行者;及 (B)在导航至购物车/结账页面时-从业务角度看对我们的客户至关重要:

  • PLP作为登录页面
  • PDP作为登录页面
  • PWA -> 原产地/传统(例如到购物车/结账)

让我们从一些基本检查开始,这些检查可以帮助我们获得一些重大的速度提升

  • 确保使用骨骼,且布局稳定。
  • ‘等待… (或类似)消息(SC使用的WebPageTest中的一个已知问题):检查瀑布图像以查看这是否是指标下降的唯一原因。
  • 低分辨率图像转换为高分辨率图像还可能导致SC中的指标下降–检查瀑布图像以查看这是否是唯一的原因。
  • 来自自定义组件的伪影(与按照最佳做法构建的本机RSF组件相比)–导致组件过度重新渲染的样式/元素。 再次检查瀑布图像,查看是否存在可见伪影(例如,低分辨率图像- PLP-> PDP转换上的图像传送带>)

PLP至PDP导航

从PLP (搜索结果或类别/品牌页面)导航至PDP页面是整个消费者旅程中最重要的导航元素。 对于每次购买,平均用户导航至8.8 PDP页面。 即使在如此高的频率下出现较小的页面速度减慢,也会对用户体验产生很大的不利影响。 以下是您可以遵循的一些事项,以确保完美的PLP至PDP用户体验:

  • 将框架用于折叠页面上方,并确保布局稳定性
  • 确保折页上方的内容与用户设备屏幕的高度相匹配。
  • 确保缓存配置正确。 这意味着缓存通用页面数据,而不是缓存用户特定的数据点。 (有关更多详细信息,请参阅我们的缓存指南)
  • 使用预取(查看我们的预取指南以了解更多详细信息)
  • 在任何地方使用相同的缩略图实例,以避免与ForwardThumbnail组件发生闪烁
  • 在页面道具中将尽可能多的信息从PLP传递到PDP,以便在PDP上显示该信息

主页加载

主页通常是用户与网站的第一次交互。 确保旅程有一个良好的开端,是让用户顺利完成结账和下单流程的关键。 以下是您可以遵循的一些事项,以确保获得出色的主页体验:

  • 确保缓存配置正确。 这意味着缓存通用页面数据,而不缓存任何特定于用户的数据点。
  • 在折页内容下方缓慢加载
  • 使用预连接标签
  • 优化图像
  • 延迟补水,直到页面加载完成
  • 其他改进

PDP页面加载

如果用户对PDP页面本身没有很好的体验,则花费时间优化主页和PLP到PDP导航将毫无价值。 确保用户尽快获得最重要的信息,延迟不能立即看到或无法操作的对象是优化PDP页面加载的关键。 以下是优化PDP页面时需要记住的一些事项:

  • 缓存通用资产和数据(包括API响应),以确保即时数据检索并减少后端系统上的瓶颈。
  • 在折页下方缓慢加载内容
  • 使用优化的第一个图像以缩短加载时间。
  • 使用单独的缩略图和捏合缩放图像,并且仅在请求时加载图像。

PLP页面加载

  • 预加载PDP图像以获得折页以上的结果。
  • 在折页下方缓慢加载内容
  • 减少或避免确定PLP页面更改的请求,例如背景颜色更改或其他视觉元素。

更多的指针

上述方法涵盖了用户在整个过程中与之交互的大部分内容。 但平台比可见内容更重要。 确保平台的内部运作得到优化是我们需要采取的下一步。 以下是要检查的一些事项,以获取性能方面的其他增益:

  • TTL:使用Analyze=True NPM运行构建来检查分发包大小
  • FCP:如果客户选择使用WebFont,LH分数会下降。
  • 速度索引:屏幕上有弹出窗口会降低页面的速度索引
  • 避免在模块范围(即客户端)中执行较长的任务。
  • React钩子容易出现不必要的重新渲染。 虽然不太可能影响指标,但他们做了一个缓慢的感觉网站.
  • 使用 PSI 分数了解代码更改的影响,而不是本地机器的LH分数和/或SpeedCurve结果。 在生产构建中使用4G模式以获得真实的LH分数。

Tags

Just For You