在 eBay.com 上追求速度

通过集合保持井井有条 根据您的偏好保存内容并进行分类。

优化 eBay 网站和应用程序的性能，以获得更快的用户体验。

速度是 2019 年 eBay 的一项公司范围内的倡议，许多团队决心尽可能提高网站和应用程序的用户速度。事实上，搜索页面加载时间每缩短 100 毫秒，eBay 的“添加到购物车”次数就会增加 0.5%。

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

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

前方还有更多工作要做，但以下是 eBay 到目前为止的学习成果。

Web 性能“削减”

eBay 所做的改进之所以成为可能，是因为参与用户旅程的各种实体的大小和时间减少或“削减”。这篇文章涵盖了与广大 Web 开发者社区相关的主题，而不是 eBay 特有的主题。

减少所有文本资源的有效负载

使网站快速的一种方法是简单地加载更少的代码。eBay 通过删除所有发送给用户的 JavaScript、CSS、HTML 和 JSON 响应中未使用和不必要的字节，减少了文本有效负载。以前，每增加一项新功能，eBay 都会不断增加响应的有效负载，而没有清理未使用的内容。随着时间的推移，这逐渐累积起来，成为性能瓶颈。团队通常会拖延这项清理活动，但您会惊讶于 eBay 节省了多少。

这里的“削减”是指响应有效负载中浪费的字节。

首屏内容的关键路径优化

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

这里的“削减”是服务显示相关内容所花费的时间。

图像优化

图像是页面膨胀的最大因素之一。即使是小的优化也能产生很大的作用。eBay 对图像进行了两项优化。

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

其次，虽然 eBay 的商品列表图像已经过高度优化（在大小和格式方面），但同样的严格性并不适用于精选图像（例如，主页上的顶部模块）。eBay 有很多手动精选的图像，这些图像通过各种工具上传。以前，优化取决于上传者，但现在 eBay 在工具中强制执行规则，因此所有上传的图像都将得到适当的优化。

这里的“削减”是发送给用户的浪费的图像字节。

静态资源的预测性预取

用户在 eBay 上的会话不仅仅是一个页面。它是一个流程。例如，流程可以是homepage到搜索页面再到商品页面的导航。那么，为什么流程中的页面不互相帮助呢？这就是预测性预取的想法，即一个页面预取下一个可能页面所需的静态资源。

通过预测性预取，当用户导航到预测页面时，资源已在浏览器缓存中。这适用于 CSS 和 JavaScript 资源，这些资源的 URL 可以提前检索。这里需要注意的一点是，它仅在首次导航时有效。在后续导航中，静态资源将已在缓存中。

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

预取热门搜索结果

当用户搜索 eBay 时，eBay 的分析数据表明，用户很可能会导航到搜索结果前 10 名中的商品。因此，eBay 现在预取搜索中的商品，并将其准备好以供用户导航时使用。预取发生在两个级别。

第一个级别发生在服务器端，商品服务在服务器端缓存搜索结果中的前 10 个商品。当用户转到其中一个商品时，eBay 现在可以节省服务器处理时间。服务器端缓存被特定于平台的应用程序利用，并在全球范围内推广。

另一个级别发生在浏览器缓存中，这在澳大利亚可用。由于商品的动态性，商品预取是一项高级优化。其中还有许多细微之处：页面展示次数、容量、拍卖商品等等。您可以在 LinkedIn 的性能工程聚会演示文稿中了解更多信息，或者继续关注 eBay 工程师关于该主题的详细博客文章。

这里的“削减”可能是服务器处理时间或网络时间，具体取决于商品缓存的位置。

积极下载搜索图片

在搜索结果页面中，当发出高级查询时，会发生两件事。一是召回/排名步骤，其中返回与查询匹配的最相关商品。第二步是用额外的用户上下文相关信息（如运费）扩充召回的商品。eBay 现在立即将前 10 个商品图像与标头一起分块发送到浏览器，以便在其余标记到达之前开始下载。因此，图像现在将更快地显示。此更改已在全球范围内为 Web 平台推广。

这里的“削减”是搜索结果图像的下载开始时间。

自动建议数据的边缘缓存

当用户在搜索框中键入字母时，会弹出建议。这些建议对于字母组合至少一天内不会更改。它们是从 CDN（最多 24 小时）缓存和服务的理想候选对象，而不是请求一直到达数据中心。国际市场尤其受益于 CDN 缓存。

不过，有一个问题。eBay 在建议弹出窗口中加入了一些个性化元素，这些元素无法有效地缓存。幸运的是，这在特定于平台的应用程序中不是问题，因为个性化和建议的用户界面可以分离。对于 Web 而言，在国际市场中，延迟比个性化的小好处更重要。解决了这个问题后，eBay 现在在全球范围内为特定于平台的应用程序和非美国市场的 eBay.com 提供来自 CDN 缓存的自动建议。

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

未识别主页用户的边缘缓存

对于 Web 平台，未识别用户的主页内容对于特定区域是相同的。这些用户要么是第一次使用 eBay，要么是开始新的会话，因此没有个性化设置。虽然主页素材不断变化，但仍然有缓存的空间。

eBay 决定在其边缘网络 (PoP) 上缓存未识别用户的内容 (HTML) 一段时间。首次用户现在可以从附近的服务器而不是遥远的数据中心获取主页内容。eBay 仍在国际市场对此进行实验，这将在那里产生更大的影响。

这里的“削减”再次是未识别用户的网络延迟和服务器处理时间。

其他平台的优化

iOS/Android 应用程序解析改进

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

用户现在可以更快地看到内容。此外，对于 Android 应用程序，eBay 在用户开始在搜索框中键入内容后立即开始初始化搜索视图控制器（iOS 已经进行了此优化）。以前，这仅在用户按下搜索按钮后才会发生。现在，用户可以更快地获得搜索结果。这里的“削减”是设备显示相关内容所花费的时间。

Android 应用程序启动时间改进

这适用于 Android 应用程序的冷启动时间优化。当应用程序冷启动时，会在操作系统级别和应用程序级别发生大量初始化。减少应用程序级别的初始化时间有助于用户更快地看到主屏幕。eBay 进行了一些性能分析，并注意到并非所有初始化都是显示内容所必需的，并且有些可以延迟执行。

更重要的是，eBay 观察到有一个阻止性的第三方分析调用延迟了屏幕上的渲染。删除阻止性调用并使其异步进一步缩短了冷启动时间。这里的“削减”是 Android 应用程序不必要的启动时间。

结论

eBay 所做的所有性能“削减”共同促成了目标的实现，并且这是在一段时间内发生的。这些发布在全年分阶段进行，每次发布都减少了数十毫秒，最终达到了 eBay 现在的水平

性能是一项功能和竞争优势。优化的体验可以提高用户参与度、转化率和投资回报率。在 eBay 的案例中，这些优化措施的难度各不相同，从低成本的工作到一些高级的工作都有。

查看“积少成多提速法”以了解更多信息，并留意 eBay 工程师在不久的将来发布的关于其性能工作的更详细文章。