It’s hard to believe it’s been two years since publishers and platforms came together to launch the open source Accelerated Mobile Pages (AMP) Project. Speed and user experience remain more important than ever across the web, with 53% of mobile site visits abandoned for pages taking longer than 3 seconds to load. In two years we’ve seen the project grow from a few launch partners to over 25 million website domains that have published more than 4 billion AMP pages. And not only has the number of pages built with AMP grown, their speed has too. The median time it takes an AMP page to load from Google search is less than half a second. And while we’re thrilled with the impact of AMP so far, there’s more work to be done together.
More users, more engagement, more revenue
After two years of websites creating over 4 billion AMP pages, we now have a concrete understanding of their effect on speed, engagement and revenue. A soon to be published Forrester Consulting Total Economic Impact™ study (commissioned by Google) found that AMP leads to a 10% increase in website traffic with a 2x increase in time spent on page. For e-commerce websites using AMP, the study also found a 20% increase in sales conversions compared to non-AMP pages.
The full study will be published in the coming weeks, but it marks the third independent research study that has found that publishers and e-commerce websites are driving more engagement and revenue with AMP.
Two of the core pillars of the Accelerated Mobile Pages (AMP) Project are speed and a great user experience on the web. That said, the AMP Project also cares about making the process of building webpages faster and easier. That’s why we created AMP Start, a library of fully-featured templates and common page elements built with AMP.
We announced AMP Start in March, and over the past few months we’ve been working with the design community to create additional templates in more verticals, such as retail and travel.
New e-commerce templates 😎
Today we are launching the redesigned AMP Start, to help you easily find the templates or components you need to get started with AMP.
We conducted interviews of more than 10 companies that have invested heavily in AMP, to see if we could learn how hard it was to implement, the challenges people faced, the solutions they found to those challenges, and the benefits they believed they got as a result. We decided to pursue this because we’ve worked with several clients on AMP, and so many people we discussed AMP with were confused by one or myths, and we wanted to help set the record straight. In addition, we thought it would be helpful to the industry to have a study that was done independently of Google, so any potential bias would be minimized.
In this study, you will see the results of a large-scale investigation we did into AMP. I set out to learn as much as I could by speaking with 10 different companies about their experiences with AMP. These were all companies that had released an AMP implementation on a major section, or nearly all, of their pages.
The TL;DR, for those of you who want to avoid diving into all the details, is that for companies that followed through with a complete implementation of AMP, pretty much all had good to very strong results. However, how I’m defining a “complete implementation” might not be what you expect (you’ll have to read on to see what I’m talking about).
In our study, each participant shared a lot of details about their experiences with AMP, including implementation issues, and the resulting metrics. As a result, this study should help you understand:
The potential benefits from implementing AMP
How much effort it will require
Solutions to some of the challenges
What your potential ROI might look like.
Overall, I believe that AMP will offer very strong benefits to everyone who takes the time to truly do it right. And if your implementation is done with care, it can be made pretty scalable. As you’ll see in the study, the parties involved really did not spend a tremendous amount of engineering effort on AMP. Most of you who are reading this probably won’t require a ton of effort either.
We’re trying out something new in the place of our regular AMP Roadmap updates. This new “New in AMP” format focuses on actionable updates. We’re also continuing to update the AMP Roadmap to reflect progress, and we will keep a section in this post dedicated to talking about where we’re heading next. But now, on to the updates:
Flexible, scroll-bound animations with <amp-position-observer>
amp-position-observer brings flexible and performant scroll-bound animations to AMP. You can use this component to build a range of features, including parallax effects, subtle zoom or fade in of images, and starting or stopping animations as they pass through the viewport. Check out the documentation to learn more, and stay tuned for examples and templates.
TL;DR: The AMP team is traveling around the world to bring the AMP Roadshow, a free one-day developer conference, to you. Register for a city near you.
We’ve been hard at work these last few months at improving AMP’s web components and making AMP work for even more use-cases like e-commerce, and we’ve launched numerous components and features that make it possible to build quite interactive experiences with AMP. In fact, we think the time has come to give AMP a try as a general library to build content and landing pages for the web.
To share the latest and greatest and connect with web developers worldwide, we, the AMP team, are going on the road. The AMP Roadshow, as we call it, is a free, one-day developer conference with a packed agenda to get you up to speed and ready to start building with AMP if you haven’t already.
Where is the AMP Roadshow headed?
We’ve just come back from our first roadshow in Toronto, and we’re making stops in 9 more cities until the end of the year! Registration links are already up for:
In addition to these, we’re visiting Paris in November, and Taipei in December. The registration links for these are coming shortly – the best way to be notified is by following us on Twitter.
Why should I attend?
Come because you care about creating a great user experience, and are curious about how AMP can help.
At the roadshow, we’ll focus deeply on using AMP to build beautiful, interactive and responsive sites. Yes, sites, not pages! We’ll tackle forms, sidebars, complex animations, monetization, and all the other bits required to build a full web experience.
We also want to use this opportunity to learn from you, and hear what your challenges are. We’re very excited to collaborate with every one of you, and maybe convince some of you to become contributors to the AMP open source project in the future.
I really hope you can join us. It’ll be fun! And if your city is not on the list, worry not – we’re planning on adding more cities in the near future.
Why do we publish on AMP?
Condé Nast is one of the world’s most prestigious publishers. You may recognize some of our brands which include Ars Technica, Bon Appétit, Golf Digest, GQ, Pitchfork, The New Yorker, Vanity Fair, Vogue, Wired, and others. As a publisher, implementing AMP was a no-brainer. AMP delivers many benefits in terms of performance, consistency, and experience for our mobile users. Users arriving from Google undergo an uninterrupted flow from search into our content. AMP content loads quickly thanks to Google’s CDN and AMP HTML enforced performance guidelines. The AMP Layout System ensures a great reading experience by preventing pages from jumping around as third-party content loads. Our regular sites are not by any means slow, we constantly beat our competitors’ load and render times, but there are certain performance guarantees that Google can deliver to their users (e.g. prefetching) when content is on their CDN.
Let’s take a step back and think about what incentivizes us as a publisher. To generate revenue, we need our content to be impactful and discoverable by the largest possible audience. Keeping this audience engaged with quality content across our brands helps us maximize our revenue. AMP helps us satisfy these needs. AMP increases the visibility and discoverability of our content by allowing it to be included in Google’s Top News Carousel, as well as improving the experience of regular Google search results. AMP ensures our content consistently loads quickly anywhere in the world with a seamless experience from Google search through their integrated AMP viewer. This seamless experience leads to increased engagement and decreased bounce. Monetization benefits are less decisive and pending further analysis of our current implementation. Our initial AMP launch only served ads with contextual targeting which have a lower CPM (cost-per-mille, the amount a publisher makes for a thousand impressions of an ad) than the ads we serve on our regular mobile sites which support both contextual and audience targeting. As we’ve improved targeting and added support for other revenue partners, we see that CPM for AMP has either stayed the same or increased depending on the brand.
We went live with AMP on Vanity Fair a little over a year ago. Post-launch, the traffic and search rank results were very positive: click through rate from Google search went from 5.9% (Regular) to 10.3% (AMP), and average search position went from 5.9 (Regular) to 1.7 (AMP). Since then, we have deployed AMP across fifteen of our brands and we have been very pleased with the results. Today, AMP accounts for 79% of our mobile search traffic and 36% of our total mobile visits. We were able to scale our AMP implementation at Condé Nast from one to fifteen brands with minimal disruption and engineering effort from our brands.
How have we implemented AMP?
Our brand’s AMP content gets discovered by having the regular page include a link rel="amphtml" tag in their head section pointing to the URL for the AMP version of the page. In our architecture, we proxy traffic for AMP URLs to our internal AMP service which is in charge of generating the AMP version of the requested content. The following diagram is an overview of our content creation and AMP distribution architecture:
All of our brands use Copilot, our internal Content Management System (CMS). Our CMS stores content in a customized version of markdown called Copilot Markdown. Copilot Markdown is simply a set of extensions on the CommonMark specification which adds special syntax for embeds, callouts, sections, and other features used by our editors.
When a Google user opens an AMP result for one of our brands, the Google AMP CDN quickly delivers its latest cached copy. Behind the scenes, the Google AMP CDN triggers a request to the URL of the AMP document on our brand’s domain. All of our brands are fronted by the Fastly CDN which provides another layer of caching. When the request hits Fastly, logic in the brand’s varnish control language ([VCL) configuration determines if the request is for AMP content. If so, Fastly sets the backend for the request to be the AMP Service which then takes over and generates AMP HTML for the requested content.
In order for our AMP service to render a piece of content, we have to fetch the content from our CMS, then parse and transform it into React components which get rendered into valid AMP HTML. The following diagram shows this rendering pipeline which is internal to the AMP service:
At Condé Nast, our tech stack uses Node.js and React for most of our brands’ regular websites. Using React with server side rendering to generate AMP content makes perfect sense for us. This choice allows our brand engineers to easily contribute to our AMP codebase. The use of Node.js and React also allows us to reuse components and helper code across our regular sites and AMP service.
Ensuring that brands maintain their look and feel when served over AMP was an important priority when creating the AMP service. The AMP service enables this by allowing brands to provide their own configuration and their own Sass files that override our sane defaults. If provided, the configuration and SCSS files control the output AMP HTML markup and CSS respectively. Through this approach, brands are able to toggle features and customize their design. In the future, we will take further advantage of React components extensibility to allow much deeper customization of brands’ AMP HTML markup output. Having a service that’s able to do this for all of our brands has proven very valuable and drastically reduced duplication of effort. To start serving AMP traffic, a brand just needs to add a single configuration file and modify their Fastly VCL configuration. As we’ve grown the feature set of our AMP implementation and onboarded more brands, this architecture has proven to be a very scalable solution.
What did we learn?
Our centralized content management system and service-oriented architecture makes it nearly effortless to onboard new brands onto AMP. This wasn’t always the case. When we onboarded our first brand we were not using a service architecture, instead we had a plugin architecture where each brand had to depend on the AMP plugin. This plugin architecture resulted in duplication of code as we onboarded other brands, it also made it challenging to roll out new plugin versions across all brands. These problems went away when we switched to the shared AMP service. The power and scalability of a service-oriented architecture have been clear. The AMP service validates the use of cross-brand shared services throughout Condé Nast. Furthermore, the benefits of having our data stored in a common format (Copilot Markdown) for all our brands, with shared tooling, APIs, and effort have never been more evident.
Overall, AMP has had a positive impact to the business in terms of traffic and to our Google users in terms of experience. Today, AMP accounts for 36% of our total mobile traffic and we are continuously adding features that create monetization opportunities for the business and improve the experience for our AMP users. We are very excited to see what the future holds as other platforms outside of Google decide to deliver AMP content and more organizations start contributing to the AMP Open Source Project.
Today, AdWords announced support for AMP page delivery from the Google AMP Cache. As a result, advertisers who use AMP pages as ad landing pages in Adwords can expect those landing pages to load near-instantly.
This launch, along with all the other recently launched features in AMP like forms, dynamic content and robust analytics support, makes AMP the perfect tool for advertisers. This allows advertisers to give their users a faster, better experience which correlates with higher conversion rates (1).
Learn more about the AdWords AMP announcement here.
Posted by Vamsee Jasti, Product Manager, AMP Project (1) SOASTA, The State of Online Retail Performance, April 2017