编辑注：我们在 康泰纳仕技术博客 上找到了这篇 很棒的帖子。将反馈发送至 @oscrperez，如需了解有关康泰纳仕技术的更多信息，请关注 @CondeNastTech。
作者：奥斯卡·佩雷斯，康泰纳仕
Google 主导的 AMP 项目是什么？
加速移动页面是一组针对 HTML、CSS 和 JavaScript 的性能重点限制和局限，它们最大程度地提高了性能，并允许 Google 使用其 CDN 分发经过优化的内容。简而言之，AMP 强制使用 AMP Web 组件来代替某些 HTML 标签，限制会对性能产生负面影响的 CSS 选择器，并禁止在沙盒 iframe 外部使用非 AMP JavaScript。要详细了解 AMP 格式、其工作原理以及它如何融入 Google 搜索，请参阅官方概述、技术说明和AMP by Example门户。
我们为什么要在 AMP 上发布？
康泰纳仕是世界上最负盛名的出版商之一。您可能认识我们的某些品牌，包括 Ars Technica、Bon Appétit、Golf Digest、GQ、Pitchfork、The New Yorker、Vanity Fair、Vogue、Wired，以及其他。作为出版商，实施 AMP 毫无疑问。AMP 在性能、一致性和体验方面为我们的移动用户提供了许多好处。从 Google 到达的用户会从搜索到我们的内容中经历一个不间断的流程。由于 Google 的 CDN 和 AMP HTML 强制执行的性能准则，AMP 内容加载速度很快。AMP 布局系统通过防止页面在第三方内容加载时四处跳动，确保了出色的阅读体验。我们的常规网站绝不慢，我们不断击败竞争对手的加载和渲染时间，但是 Google 可以向其用户提供某些性能保证（例如预取），当内容在其 CDN 上时。
让我们退一步，想想作为出版商，什么激励了我们。为了产生收入，我们需要我们的内容具有影响力，并且尽可能多的受众可以发现。让这些受众通过我们各个品牌的高质量内容保持参与有助于我们最大化收入。AMP 帮助我们满足这些需求。AMP 通过允许将我们的内容包含在 Google 的头条新闻轮播中，以及改善常规 Google 搜索结果的体验，来提高我们内容的可见性和可发现性。AMP 确保我们的内容在世界任何地方都能始终快速加载，从 Google 搜索到通过其集成的 AMP 查看器，体验无缝。这种无缝体验带来了更高的参与度和更低的跳出率。变现收益不太确定，有待对我们当前实施的进一步分析。我们最初的 AMP 发布只投放了具有较低 CPM（每千次展示费用，即发布商每千次广告展示获得的金额）的上下文定位广告，低于我们在支持上下文和受众定位的常规移动网站上投放的广告。随着我们改进定位并增加对其他收入合作伙伴的支持，我们看到 AMP 的 CPM 保持不变或根据品牌而增加。
我们在大约一年前在名利场上线了 AMP。发布后，流量和搜索排名结果非常积极：来自 Google 搜索的点击率从 5.9%（常规）上升到 10.3%（AMP），平均搜索位置从 5.9（常规）上升到 1.7（AMP）。从那时起，我们在十五个品牌中部署了 AMP，并且我们对结果非常满意。如今，AMP 占我们移动搜索流量的 79%，占我们移动总访问量的 36%。我们能够将我们的 AMP 实施从一个品牌扩展到十五个品牌，而我们的品牌几乎没有中断和工程投入。
我们如何实施 AMP？
我们品牌的 AMP 内容通过在常规页面的头部部分包含 link rel="amphtml" 标签来发现，该标签指向页面的 AMP 版本的 URL。在我们的架构中，我们将 AMP URL 的流量代理到我们的内部 AMP 服务，该服务负责生成请求内容的 AMP 版本。下图是我们内容创建和 AMP 分发架构的概述
康泰纳仕 AMP 服务架构
我们所有的品牌都使用 Copilot，这是我们的内部内容管理系统 (CMS)。我们的 CMS 将内容存储在名为 Copilot Markdown 的自定义版本中。Copilot Markdown 只是 CommonMark 规范上的一组扩展，它为我们的编辑使用的嵌入、标注、部分和其他功能添加了特殊语法。
当 Google 用户为我们的某个品牌打开 AMP 结果时，Google AMP CDN 会快速提供其最新的缓存副本。在后台，Google AMP CDN 会触发对我们品牌域中 AMP 文档 URL 的请求。我们的所有品牌都由 Fastly CDN 提供支持，它提供了另一层缓存。当请求到达 Fastly 时，品牌清漆控制语言中的逻辑 ([VCL) 配置会确定请求是否针对 AMP 内容。如果是，Fastly 会将请求的后端设置为 AMP 服务，然后该服务会接管并为请求的内容生成 AMP HTML。
为了让我们的 AMP 服务呈现内容，我们必须从 CMS 中获取内容，然后对其进行解析并将其转换为 React 组件，这些组件会被呈现为有效的 AMP HTML。下图显示了 AMP 服务内部的此呈现管道
AMP 服务呈现管道
在 Condé Nast，我们的技术堆栈对我们大多数品牌常规网站使用 Node.js 和 React。对我们来说，将 React 与 服务器端呈现 结合使用来生成 AMP 内容非常有意义。此选择允许我们的品牌工程师轻松为我们的 AMP 代码库做出贡献。使用 Node.js 和 React 还允许我们在常规网站和 AMP 服务中重复使用组件和帮助器代码。
在通过 AMP 提供服务时确保品牌保持其外观和感觉是创建 AMP 服务时的一个重要优先事项。AMP 服务通过允许品牌提供自己的配置和自己的 Sass 文件来实现这一目标，这些文件可以覆盖我们的明智默认设置。如果提供了配置和 SCSS 文件，则它们分别控制输出的 AMP HTML 标记和 CSS。通过这种方法，品牌能够切换功能并自定义其设计。未来，我们将进一步利用 React 组件的可扩展性，以允许对品牌的 AMP HTML 标记输出进行更深入的自定义。拥有能够为我们所有品牌执行此操作的服务已被证明非常有价值，并且大幅减少了重复工作。要开始提供 AMP 流量，品牌只需添加一个配置文件并修改其 Fastly VCL 配置。随着我们扩展 AMP 实现的功能集并加入更多品牌，此架构已被证明是一个非常可扩展的解决方案。
我们学到了什么？
我们的集中式内容管理系统和面向服务的架构使得将新品牌加入 AMP 变得几乎毫不费力。情况并非总是如此。当我们加入我们的第一个品牌时，我们没有使用服务架构，而是采用插件架构，其中每个品牌都必须依赖 AMP 插件。随着我们加入其他品牌，此插件架构导致代码重复，并且还使得跨所有品牌推出新插件版本变得具有挑战性。当我们切换到共享 AMP 服务时，这些问题就消失了。面向服务的架构的力量和可扩展性已经很明显。AMP 服务验证了在整个康泰纳仕使用跨品牌共享服务。此外，为我们所有品牌以共享工具、API 和工作量存储数据在通用格式（副驾驶 Markdown）中的好处从未如此明显。
总体而言，AMP 在流量方面对业务产生了积极影响，在体验方面对我们的 Google 用户产生了积极影响。如今，AMP 占我们移动总流量的 36%，并且我们正在不断添加功能，为业务创造获利机会并改善我们 AMP 用户的体验。我们非常高兴看到未来，因为 Google 以外的其他平台决定 提供 AMP 内容，并且更多组织开始为 AMP 开源项目 做出贡献。
向作者发送反馈和评论： @oscrperez。有关更多关于康泰纳仕技术的信息，请关注 @CondeNastTech。