AMP

Building a Faster Mobile Web Experience with AMP

Uncategorized

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.

AMP is all about solving a pain point for everyone on the mobile web — speed. AMP is an open-source architecture for fast mobile-optimized content. It’s based on AMP HTML, a restricted subset of HTML, and a well-defined set of custom elements and JavaScript-based components. The result is an incredibly fast browsing experience that loads minimal data over the network.

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 Amplified

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.

Pinterest widgets

We’ve also developed an AMP component that allows publishers to add Pin It buttons and embedded Pins to their AMP HTML pages.

The <amp-pinterest> extension was developed to take full advantage of AMP’s JavaScript runtime. This is great from a performance perspective, and it makes it incredibly easy for publishers to add Pinterest elements to their pages.

Here we have a Pin It button:

<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>

And here’s an embedded Pin:

 

You can create your own buttons and widgets for your AMP pages using our Widget Builder.

Looking ahead

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.

Posted by Jon Parise, a software engineer on the Pinterest Product Platform team