在 eBay.com 上选购快速商品

优化 eBay 网站和应用的性能，以提升用户体验。

Addy Osmani

速度是 eBay 在 2019 年开展的一项公司级计划，许多团队都决心为用户提供尽可能快速的网站和应用。事实上，搜索页加载时间每加快 100 毫秒，eBay 中“加入购物车”的商品数量就会增加 0.5%。

通过采用性能预算（通过使用 Chrome 用户体验报告进行竞争力研究后得出）并专注于关键的以用户为中心的性能指标，eBay 能够显著提升网站速度。

…而他们的 Chrome 用户体验报告数据也突出显示了这些改进。

我们仍有许多工作要做，但下面是 eBay 迄今为止的收获。

网络性能“切割”

eBay 之所以能够取得这些改进，是因为他们减少了用户体验历程中涉及的各种实体（在大小和时间方面），本文将介绍与整个 Web 开发者社区相关的主题，而不是 eBay 特有的主题。

减少所有文本资源的载荷

提高网站速度的一个方法是减少加载的代码。eBay 通过修剪向用户提供的 JavaScript、CSS、HTML 和 JSON 响应的所有未使用的和不必要的字节，缩减了文本载荷。以前，每推出一项新功能，eBay 都会不断增加响应的载荷，而不会清理未使用的载荷。这些问题日积月累，最终成为性能瓶颈。团队通常会拖延执行此清理活动，但您会惊讶地发现 eBay 节省了多少资源。

这里的“切割”是指响应载荷中浪费的字节。

针对首屏内容的关键路径优化

屏幕上的每个像素都具有不同的重要性。可见区域的内容比不可见区域的内容更重要。iOS/Android/桌面版和 Web 应用都知道这一点，但服务呢？eBay 的服务架构有一个名为体验服务的层，前端（平台专用应用和 Web 服务器）与之通信。此层专为基于视图或设备（而非商品、用户或订单等实体）而设计。然后，eBay 引入了体验服务关键路径的概念。当这些服务收到请求时，它们会通过并行调用其他上游服务，立即获取可见内容的数据。数据准备就绪后，系统会立即刷新数据。折叠下的数据会在稍后的分块中发送或延迟加载。成效：用户可以更快地看到上翻页内容。

此处的“切换”是指服务显示相关内容所花费的时间。

图片优化

图片是导致网页膨胀的主要原因之一。即使是小小的优化也能起到很大的作用。eBay 对图片进行了两项优化。

首先，eBay 在所有平台（包括 iOS、Android 和受支持的浏览器）上为搜索结果采用了 WebP 图片格式。搜索结果页是 eBay 上图片最多的页面，他们已经在使用 WebP，但使用方式并不一致。

其次，虽然 eBay 的商品详情图片在大小和格式方面经过了大量优化，但精选图片（例如首页上的顶部模块）并未采用同样严格的标准。eBay 有很多精选图片，这些图片是通过各种工具上传的。以前，优化工作由上传者负责，但现在 eBay 会强制执行工具中的规则，因此上传的所有图片都会得到适当优化。

这里的“剪裁”是指向用户发送的浪费的图片字节。

对静态资源进行预测性预提取

eBay 上的用户会话不仅仅是指单个网页。这是一个流程。例如，流程可以是从首页导航到搜索页面，再到商品页面。那么，为什么流程中的页面不能相互帮助？这就是预测性预提取的概念，其中一个网页会预提取下一个可能访问的网页所需的静态资源。

借助预测性预提取功能，当用户导航到预测的网页时，资源已位于浏览器缓存中。这适用于 CSS 和 JavaScript 资源，其中可以提前检索网址。需要注意的是，此功能仅在首次导航时有效。在后续导航中，静态资源将已在缓存中。

这里的“缩减”是指首次导航时 CSS 和 JavaScript 静态资源的网络时间。

预提取热门搜索结果

当用户在 eBay 上搜索时，eBay 的分析数据表明，用户很可能会前往搜索结果前 10 名中的商品。因此，eBay 现在会预提取搜索结果中的商品，并在用户导航时将其保持就绪状态。预加载发生在两个级别。

第一级缓存发生在服务器端，商品服务会缓存搜索结果中的前 10 个商品。现在，当用户前往其中一个商品时，eBay 可以节省服务器处理时间。服务器端缓存由平台专用应用利用，并在全球范围内推出。

另一级缓存发生在浏览器缓存中，此功能在澳大利亚推出。由于项具有动态特性，项预提取是一项高级优化。其中还有很多细微之处：网页展示次数、容量、竞价项等。您可以参阅 LinkedIn 性能工程 Meetup 演示文稿，详细了解该工具；也可以期待 eBay 工程师就此主题撰写的详细博文。

此处的“切割”可以是服务器处理时间或网络时间，具体取决于内容的缓存位置。

提前下载搜索图片

在搜索结果页中，当您发出高级查询时，会发生以下两件事。第一步是召回/排名步骤，系统会在此步骤中返回与查询最相关的项。第二步是向重新调用的项添加与用户情境相关的其他信息，例如运费。现在，eBay 会立即将前 10 张商品图片连同标头一起发送到浏览器，以便在其余标记到达之前开始下载。因此，图片现在会更快地显示。这项变更已在全球范围内面向网站平台发布。

此处的“截断时间”是指搜索结果图片的下载开始时间。

自动补全数据的边缘缓存

当用户在搜索框中输入字母时，系统会弹出建议。这些建议至少会在一天内针对字母组合保持不变。这类请求非常适合从 CDN 缓存和传送（最长 24 小时），而不是让请求一直到达数据中心。CDN 缓存对国际市场尤其有益。

不过，有一个问题。eBay 的建议弹出式窗口中包含一些个性化元素，这些元素无法高效地缓存。幸运的是，在特定平台的应用中，这不是一个问题，因为用于个性化和建议的界面可以分开。对于国际市场上的网站，延迟时间比个性化带来的小优势更重要。解决了这个问题后，eBay 现在可以通过 CDN 缓存向全球范围内平台专用应用和 eBay.com 的非美国市场提供自动建议。

这里的“切换”是指自动建议的网络延迟时间和服务器处理时间。

针对无法识别的首页用户的边缘缓存

对于网站平台，特定地区无法识别的用户看到的首页内容是相同的。这些用户是首次使用 eBay 或刚开始新的会话，因此不会获得个性化体验。虽然首页广告素材会频繁更改，但仍有缓存空间。

eBay 决定在其边缘网络 (PoPs) 上暂时缓存无法识别的用户内容 (HTML)。首次访问的用户现在可以从距离他们较近的服务器获取首页内容，而不是从遥远的数据中心获取。eBay 仍在国际市场上对此进行实验，因为在这些市场上，此功能的影响更大。

这里的“截断时间”是指无法识别的用户的网络延迟时间和服务器处理时间。

针对其他平台的优化

改进了 iOS/Android 应用解析

iOS/Android 应用与后端服务通信，后端服务的响应格式通常为 JSON。这些 JSON 载荷可能很大。eBay 引入了一种高效的解析算法，该算法会针对需要立即显示的内容进行优化，而不是解析整个 JSON 以在屏幕上呈现内容。

用户现在可以更快地看到内容。此外，对于 Android 应用，只要用户开始在搜索框中输入内容，eBay 就会立即开始初始化搜索视图控制器（iOS 已进行此优化）。以前，只有在用户按下搜索按钮后，才会出现这种情况。现在，用户可以更快地看到搜索结果。这里的“切换时间”是指设备显示相关内容所花费的时间。

缩短 Android 应用启动时间

这适用于 Android 应用的冷启动时间优化。当应用冷启动时，操作系统级别和应用级别都会发生大量初始化。缩短应用级初始化时间有助于用户更快地看到主屏幕。eBay 进行了一些性能分析，发现并非所有初始化都必须完成才能显示内容，有些初始化可以延迟执行。

更重要的是，eBay 发现有一个阻塞的第三方分析调用延迟了屏幕上的渲染。移除阻塞调用并将其设为异步进一步缩短了冷启动时间。这里所说的“缩减”是指 Android 应用的启动时间。

总结

eBay 所做的所有效果“削减”措施都共同促成了这一变化，而且这是一个长期的过程。这些版本在整个一年中分阶段发布，每次发布都会缩短几十毫秒，最终达到了 eBay 目前的水平：

效果是一项功能，也是一项竞争优势。优化后的体验可提高用户互动度、转化次数和投资回报率。在 eBay 的案例中，这些优化措施既包括费力较少的措施，也包括一些高级措施。

如需了解详情，请参阅千刀万剐，提升速度。此外，请密切关注 eBay 工程师近期发表的有关性能工作的更详细文章。