Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向

让顾客满意是零售业成功的秘诀。事实证明，提供快速、一致的在线体验可以显著提高零售商关心的每项指标——从转化率和收入到留存率和品牌认知度。

本文大纲：

• 页面速度影响在线零售业务数据

• 如何将您的网站速度与竞争对手进行比较

• 性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施

页面速度影响在线零售业务数据

对于大多数在线零售商而言，页面速度对利润有着可衡量的影响。即使是很小的改进也可以显著提高转化率等指标。比如

如何分析网站性能和业务转化数据关系

但是您的网站呢？要了解页面速度改进对您自己的网站的影响，您需要查看您自己的真实用户监控 (RUM) 数据。关联图 是向企业中的每个人传达绩效的好方法。您可以使用 RUM 创建这些可视化效果，让即使是最不懂技术的利益相关者也可以轻松看到绩效与用户参与度和业务指标（例如跳出率和转化率）之间的关联。

关联图表为您提供所有用户流量的直方图视图，这些流量根据性能指标（例如开始渲染、最大内容绘制和下次绘制前的互动次数）细分为不同的群组。该图表包含一个叠加层，向您显示与每个群组相关的用户参与度指标或业务指标（例如跳出率或转化率）。这样您就可以一目了然地了解性能、用户参与度和业务之间的关系。

在此关联图中可以看到，在最大内容绘制 (LCP) 时间为 1.1 秒时，转化率峰值略高于 6%。随着 LCP 变慢，转化率迅速下降，并在 2 秒时降至 3% 以下。通过上述可以看出，优化网站性能降低 LCP 时间可以带来总体更高的转化次数以及更多的收入。

您的网站与竞争对手相比如何？

借助 SpeedCurve Synthetic等综合性能监控，您可以像在自己的网站上一样在任何其他网站上运行页面速度测试。这意味着您可以获得所有相同、丰富、出色的数据、屏幕截图和幻灯片以供比较。

您的竞争性基准测试仪表板还可以让您深入研究并关注页面构建等内容。那个页面的渲染速度是您的两倍……他们做了什么不同的事情？他们有更多的 JavaScript 吗？更少？您是否发出了 400 个请求，而他们只发出了 80 个？这里就是找出答案的地方。

Page Speed Benchmarks 是一个面向公众的仪表板，可向您显示美国、欧盟、英国和日本领先零售商的当前绩效快照。

性能优化入门

要提供出色、快速的在线体验，首先要问自己两个问题：

• 什么原因导致我的页面对于用户来说显得比较慢？

• 我能做什么呢？

好消息是，导致购物者页面速度变慢的大多数问题都发生在您的页面上，这意味着您可以控制它们。以下是零售网站上最常见的性能问题的概述，以及如何跟踪和修复这些问题。

什么原因导致你的网页速度变慢？绝大多数性能问题都是由四个原因引起的：

• 第三方，例如追踪器和分析器

• 样式表

• 自定义字体

• 页面大小，特别是图像大小

第三方脚本

如今，典型的零售网页可以包含多达 75 个第三方脚本，例如跟踪器和分析信标。

第三方通过增加转化率（通过定位信标）和以前所未有的方式帮助您了解用户（通过分析标签）增加了大量价值，因此它们不会很快消失。但它们可以显著影响您的页面呈现方式（甚至是否呈现！）。

你可以做什么：监控第三方的表现

首先采取积极主动的方式了解第三方可能造成的任何潜在性能损害。

您无法修复未测量的内容。这就是我们在 SpeedCurve 中创建 专用第三方仪表板的原因 ，这样您就可以一目了然地了解第三方的表现，跟踪单个脚本并 为其设置性能预算。

在您了解第三方脚本的性能后，您可以使用历史数据与供应商制定 SLA。

案例研究： 玛莎百货通过关注第三方内容彻底改变了业绩

图像和页面大小

虽然页面大小并不总是与较慢的用户体验相关，但通常情况下确实如此。未经优化的大型图像往往是罪魁祸首。

除了优化图像（以确保您不会向用户提供 1MB 的资源！）之外，您还应确保最重要的图像（例如主要产品图像）尽早呈现。

您可以做什么：为与图片相关的指标创建性能预算

性能预算和警报是应对性能下降的好方法。性能预算始于您的团队（每个人：营销人员、设计师和开发人员）就用户体验和网站速度的原则达成一致。首先，您需要确定要跟踪哪些指标，然后根据过去的表现设置阈值。

对于图像，需要考虑以下一些指标：

• 最大内容绘制 – 这是视口中最大视觉元素（图像或视频）的大小。LCP 是 Google 的 核心网络指标之一，它是 Google 搜索排名算法的一组指标，因此跟踪它是个好主意。

• 图片大小 – 页面上所有图片的总大小。这是一种一目了然地查看页面中是否添加了未优化的大型图片的好方法。

• 图像请求——页面上的图像总数。

案例研究： Zillow 如何在预算有限的情况下变得更大、更快、更具吸引力

样式表

样式表是现代网页的一大福音。它们解决了从浏览器兼容性到设计维护和更新等大量设计问题。如果没有样式表，我们就不会拥有响应式设计等伟大的东西。

然而，执行不当的样式表可能会造成一系列性能问题。这些问题包括 CSS 下载和解析时间过长，以及样式表放置不当导致页面其余部分无法呈现。

你可以做什么：了解哪些样式表可能会阻止你的页面渲染

再次强调，你无法修复你没有测量的东西。你的综合监测工具可以告诉你：

• 我的页面中有多少个样式表，其中有多少个阻止页面呈现？

• 这个数字是上升了还是下降了？

• CSS 请求有多大？

• 样式表对我的每个第三方的表现如何？

自定义字体

自定义字体让设计师能够前所未有地控制设计中使用的字体。这种控制欲望是自定义字体流行度飙升的原因。但这种流行度的背后是性能的代价。

有些字体需要大量的 CSS 代码，而其他字体则需要大量 JavaScript 或外部托管 - 所有这些都会大大减慢页面渲染速度。

你可以做什么：跟踪字体的大小和渲染速度

除了跟踪字体大小和请求数量之外，您还可以使用 SpeedCurve 来测量第一个 H1 元素何时完成渲染。（在 SpeedCurve 中，我们将此指标称为 Hero H1。它是我们捕获的三个 Hero 渲染时间之一 。）如果您的网站使用自定义字体，则这些字体很可能会应用于 H1 副本，这使得此指标成为衡量自定义字体渲染速度的有效方法。

与我们为您跟踪的所有其他指标一样，您可以 为任何与字体相关的指标创建性能预算，并在它们超出阈值时收到警报。

案例研究： NerdWallet 使用 H1 Render 指标帮助将字体加载速度提高了 30%