AMP

使用 AMP 构建更快的移动网络体验

未分类

作为拥有数十亿个图钉的发现引擎,Pinterest 在内容相关、快速且易于访问时效果最佳。超过 80% 的图钉用户在移动设备上使用 Pinterest,我们很高兴与 Google、WordPress、Twitter 和开源社区合作,致力于在整个行业范围内采用一种更轻量、更快速的移动网页版本——加速移动页面 (AMP)

AMP旨在解决移动网络上所有人的痛点——速度。AMP 是一种针对快速移动优化内容的开源架构。它基于 AMP HTML(HTML 的一个受限子集)和一组定义良好的自定义元素和基于 JavaScript 的组件。结果是令人难以置信的快速浏览体验,它通过网络加载最少的数据。

在早期测试中,我们发现 AMP 页面加载速度提高了四倍,使用的数据比传统的移动优化页面减少了八倍。更好、更快的移动网络对每个人都有好处,包括用户、Pinterest 等平台和发布商。

Pinterest 放大

没有 AMP 的 Pinterest

提供 AMP 内容

Pinterest 上的每个图钉都是一个可视书签,链接回其原始网站。我们定期使用 Aragog,我们的 URL 获取系统访问这些网站。然后,我们使用我们称之为 Atlas 的内部系统(我们将在未来对此进行撰写)解析获取的 HTML 内容。除了收集我们包含在 丰富图钉中的元数据之外,我们还了解有关页面本身的有用信息,例如其规范链接、主要语言以及它是否提供其内容的 AMP HTML 版本。发布者可以使用我们的 URL 调试器查看页面是如何解析的。

页面使用 <link> 关系宣传其 AMP HTML 等价项

<link rel="amphtml" href="http://www.example.com/news/article.amp.html">

我们将所有这些信息记录为 Aragog 的 URLStore 中链接条目的一部分。我们使用此元数据以及我们收集的其他信号来选择我们在应用程序中使用的最高质量链接。每当图钉者点击图钉以了解有关其更多信息时,这会为他们提供最佳的浏览体验。

Pinterest 小组件

我们还开发了一个 AMP 组件,允许发布者将 Pin It 按钮嵌入式图钉添加到他们的 AMP HTML 页面。

<amp-pinterest> 扩展被开发为充分利用 AMP 的 JavaScript 运行时。从性能的角度来看,这是非常棒的,并且它让发布者可以非常轻松地将 Pinterest 元素添加到他们的页面中。

这里我们有一个 Pin It 按钮

<amp-pinterest height=20 width=40 
data-do="buttonPin" 
data-url="http://www.flickr.com/photos/kentbrew/6851755809/" 
data-media="http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg" 
data-description="Next stop: Pinterest">
</amp-pinterest>

这里有一个嵌入式 图钉

 

你可以使用我们的 小组件生成器为你的 AMP 页面创建自己的按钮和小组件。

展望未来

我们目前正在与一小部分合作伙伴测试 AMP 页面。我们将继续致力于 AMP 项目并为其做出贡献,我们鼓励您为您的网站了解 AMP,以便我们共同改善移动网络。

由 Pinterest 产品平台团队的软件工程师 Jon Parise 发布