编辑注:以下内容最初由 eBay 的首席工程师 Senthil Padmanabhan 发布在 eBay 的 博客 上。
eBay 继续利用 AMP 技术来加速和改善移动体验。
三个月前,我们宣布我们将如何转变 eBay 的购物体验,让我们的用户能够以时尚而快速的方式浏览。我们的目标是不仅为 eBay 网站内的用户提供引人入胜的体验,还为从 Google 和 Twitter 等外部平台访问 eBay 的移动用户提供此类体验。这就是AMP技术发挥作用的地方。我们为新的产品浏览体验实施了 AMP 版本,以及常规的移动网页,并于 6 月份发布了它们。当时我们并未向 Google 公开我们的 AMP 内容可发现,因为我们还有几个待完成的任务。此外,AMP 链接仅在 Google 搜索结果中显示基于发布商的内容,而不显示电子商务内容。
现在情况已经发生了变化。Google 宣布他们正在将 AMP 从新闻行业扩展到包括电子商务、旅游等。从我们的角度来看,我们完成了待办事项,并将非 AMP 页面中的 AMP 页面链接起来,使其可被发现。今天,我们很高兴地宣布,全球用户将在 Google 搜索结果中开始看到 eBay AMP 链接,并体验闪电般的即时加载。我们有近 1500 万个基于 AMP 的产品浏览页面,但并非所有页面都会立即显示为 AMP。此功能正在逐步提升,最终将浮出水面。在移动浏览器中查看一些热门查询——“iPhone 6 无合约”和“佳能数码相机”,例如。AMP 闪电图标显示在链接旁边作为指示。电子商务的 AMP 现在已成为现实。
继 6 月份首次发布之后,我们做了几件事让 AMP 为黄金时段做好准备。我们在此概述了其中一些工作。
强大的分析系统
了解用户如何与我们的页面互动对于我们提供最优化的体验至关重要。为新的产品浏览体验提供支持的后端系统设计为持续收集用户的屏幕活动、从中学习,并优化后续访问的体验。例如,如果用户更频繁地与出现在屏幕中 折叠线以下 的模块互动,那么在将来访问同一浏览页面时,该模块将开始出现在 折叠线以上。我们的非 AMP 页面有一个自定义分析库,负责向后端进行报告。
AMP 有一个组件 (amp-analytics) 用于执行此操作。在我们最初的 AMP 发布中,我们仅使用此组件来跟踪页面展示次数。它提供了一个相当详尽的跟踪机制。但我们想要的是在元素级别进行更精细的控制,其中每个元素决定要跟踪的内容。我们开始与 AMP 团队合作,并提出了一份 规范。我们继续实施规范并 贡献 回开源项目。通过实施,我们能够实现一个强大且先进的分析系统,该系统会向我们的后端报告点击、滚动和可见性等用户互动,而后端会优化后续访问。
功能对等
我们在之前的 博客 中提到,AMP 和非 AMP 页面之间共享了大部分代码。即使有此代码共享,两个版本之间仍然存在细微的功能不一致。我们弥合了这些差距,修复了不一致,并制定了一个流程来确保它们不会出现。话虽如此,由于限制,我们无法在 AMP 版本中实现某些 UI 组件和行为。其中一些组件是针对电子商务的。我们正在与 AMP 团队合作,将它们添加到组件列表中,以便每个人都能受益。一个很好的例子是标签式 UI 组件,并且已经有一个功能 请求 来实现此功能。
简化的构建流程
在最初启动时,我们在 AMP 和非 AMP 版本之间管理资产(CSS 和 JavaScript)时投入了大量精力。在 AMP 版本中,不应该有 JavaScript,并且所有 CSS 应该内联,而在非 AMP 版本中,CSS 和 JavaScript 都应该捆绑并外置。手动执行此操作并不理想。我们的资产管道工具 Lasso 为此提供了一个解决方案——条件依赖项。我们创建了一个 AMP 标志,如果请求是 AMP,则将其初始化为 true,然后将其设置为 Lasso 标志。管道可以访问它,并根据条件自动捆绑、外置或内联资源。这是一个巨大的节省时间的方法,并且最终非常高效。
未来的道路
我们还没有完成;事实上,我们才刚刚开始。我们有一堆任务排队等候。
- 超越 AMP——我们知道 AMP 页面很快。但是用户访问的后续页面呢?目前,当用户点击 AMP 页面中的链接时,将打开一个新标签页,并且目标页面将加载在那里。在我们的案例中,将加载目标页面的移动网络版本。我们希望该体验也像 AMP 体验一样快速且一致。有一个 AMP 组件 (amp-install-serviceworker) 可以实现此目标,我们的首要任务是利用此实用程序并创建从 AMP 到目标页面的无缝过渡。我们还正在与 Google 团队讨论如何避免新标签页并在同一窗口中继续体验。
- 缓存新鲜度——AMP 内容由 Google AMP 缓存提供,并且可以 在此处 找到缓存更新策略。这对 eBay 来说意味着,对于热门产品查询,用户始终会看到最新内容。但是对于某些极其罕见的查询,一些用户最终可能会看到过时内容。虽然这不是常见的情况,但有一个 AMP 组件 (amp-fresh) 正在开发中以解决此问题。我们将在其准备就绪后立即集成此组件。与此同时,我们有一个脚本,我们手动运行它以更新缓存中的 AMP 内容,以供一些产品 更新。
- 统一版本——目前,我们有两个版本的新浏览页面——AMP 和非 AMP。AMP 版本会显示给在 Google 中搜索的用户,而非 AMP 版本会显示给在 eBay 中搜索的用户。尽管两者都经过高度优化,看起来相同,并且共享大部分代码,但更新这两个版本仍然是维护开销。此外,我们始终需要留意功能奇偶校验。将来,根据 AMP 页面的表现,我们可能会选择一个移动版本(AMP)并将其提供给所有平台。
我们非常高兴为来自 Google 的移动用户提供 AMP 体验。我们已经玩了一段时间,它确实快如闪电。移动浏览速度可能很慢,有时会令人沮丧,而 AMP 正是为此而来,并保证了一致且快速的体验。我们希望我们的用户受益于这项新技术。
发布者:Senthil Padmanabhan,首席工程师