Building a faster mobile web experience with AMP
Jon Parise | Pinterest technical architecture lead, Core Experience
As a discovery engine with billions of Pins, Pinterest works best when content is relevant, fast and easy to access. With more than 80 percent of Pinners using Pinterest on mobile devices, we’re excited to work on an industry-wide approach to a lighter-weight, speedier version of mobile web pages — Accelerated Mobile Pages (AMP) — with Google, Wordpress, Twitter and the open-source community.
In early tests, we found that AMP pages load four times faster and use eight times less data than traditional mobile-optimized pages. A better, faster mobile web is better for everyone, including users, platforms like Pinterest and publishers.
Pinterest without AMP
Delivering AMP content
Every Pin on Pinterest is a visual bookmark that links back to its original website. We periodically visits these sites using Aragog, our URL fetching system. We then parse the fetched HTML content using an internal system we call Atlas (which we’ll write about in the future). In addition to gathering metadata we include on Rich Pins, we also learn useful information about the page itself, such as its canonical link, primary language and whether it offers an AMP HTML version of its content. Publishers can use our URL Debugger to see how a page was parsed.
A page advertises its AMP HTML equivalent using a <link> relationship:
<link rel="amphtml" href="http://www.example.com/news/article.amp.html">
We record all of this information as part of the link’s entry within Aragog’s URLStore. We use this metadata, along with additional signals we’ve gathered to select the highest quality links we use within our applications. This provides Pinners with the best possible browsing experience whenever they click through on a Pin to learn more about it.
We’ve also developed an AMP component that allows publishers to add Pin It buttons and embedded Pins to their AMP HTML pages.
Here we have a Pin It button:
<amp-pinterest height=20 width=40
data-description="Next stop: Pinterest">
And here’s an embedded Pin:
You can create your own buttons and widgets for your AMP pages using our Widget Builder.
We’re currently testing AMP pages with a small group of partners. We’ll continue working on and contributing to the AMP Project, and we encourage you to take a look at AMP for your site so we can make the mobile web better together.
Acknowledgments: Thanks to Kent Brewster for his work on the Pinterest AMP component, and to Xuan Li, who taught Atlas to identify AMP content.