绩效审计：利用 Live Core Web Vitals 分析 Namshi 的移动网站

如果您不熟悉 Live Core Web Vitals，请查看我之前的帖子：

我们要做什么？

Namshi 是阿联酋最大的电子商务网站之一。我之前在 Namshi 工作过，因此很想测试一下他们的移动网站的核心网页指标得分，并评估一下用户体验。

我从他们访问量最大的网页开始：

Namshi：女装时尚

使用高速 Wi-Fi 网络和 M3 Pro MacBook，我在没有任何网络或 CPU 限制的情况下进行了测试。LCP（最大内容绘制）得分为 2.84 秒，表明还有改进空间。LCP 指标主要指向轮播中的横幅图像。

**改进建议：**

使用较小的占位符图像作为横幅。

预加载横幅图像（使用链接预加载指令）。

当我与该页面交互时，其他指标看起来令人满意。

Namshi 的网站严重依赖模态组件来实现排序、过滤和搜索等功能。虽然大多数模态组件都能快速打开和关闭，但我注意到偶尔会出现缓慢的情况。INP（与下一次绘制的交互）得分在 60-100 毫秒之间波动，这通常是可以接受的。

然而，我在切换“新品到货”模式并尝试关闭它时发现了主线程阻塞代码。这直接影响了 INP 分数。您可以在下面的视频中看到这种行为：

**更糟糕的版本？**

是的，我发现了更糟糕的情况，INP 分数完全变成红色。

当我打开“筛选”模式，应用一些筛选条件，然后点击“重置筛选条件”时，就出现了这种情况。页面瞬间冻结，导致用户体验不佳。

**改进建议：**

避免在用户交互期间阻塞主线程，尤其是在应用过滤器时。

使用 Web Workers 执行计算密集型任务

**另一个观察**

通过记录性能配置文件，问题在火焰图中清晰可见。此方法对于识别和解决性能瓶颈非常有用。