确保您的电子商务网站的加载时间达到次秒级是一项艰巨的工作。 在Layer0，我们尝试使其变得简单得多，Layer0可以帮助您实现这一里程碑。 我们在这里所做的是创建一个清单，您可以遵循该清单，以确保您的生产站点快速运行，并且您花费的时间最少。
首先，我们来谈谈我们如何衡量速度：
衡量绩效
**我们在本例中使用SpeedCurve (SC),但您可以使用WebPageTest或任何其他产品
我们重点关注用于测量的LCP指标。 我们的目标是：
- 主页<1.5s
- PLP至PDP导航：0.5秒
此外，请务必记住以下3种情况，因为这会在什么时候影响顾客体验 (a)由于有机搜索流量而直接前往PPLS/PDP，以及 (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得分。
