AMP: Two years of user-first webpages

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.

scratch-amp_export-e1508431558335.png
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.

scratch-amp_export-2-e1508431720311.png

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. Last week Stone Temple, a marketing consulting firm, noted an increase in traffic, CPMs, and/or increase mobile revenue across the majority of publishers and e-commerce sites they spoke to. Chartbeat also found readers engage with AMP content for 35% longer than standard mobile web content, in a report released back in June.

ampconf1          ampconf2

Recent data from the DoubleClick Ad Exchange indicates that advertisers are seeing better performance on AMP pages as well. 85% of publishers are seeing higher viewability and higher click-through rates on AMP pages compared to non-AMP pages. As a result, advertisers are willing to pay more for these ad placements, with 62% of AMP publishers seeing higher eCPMs on their monetized AMP pages.¹ We’re excited to see this trend continue to grow as the AMP Project makes additional investments in bringing the speed of AMP to building and serving ads on the web. Support for publisher’s existing business models is also a key aspect of the project, and since early 2016 AMP has supported paywalls for publishers on their own sites, in order to grow their subscriber base.

Powered by the community

We had the pleasure of seeing many of you at AMP Conf earlier this year in NYC. Building on that success, AMP Conf is coming to Amsterdam in early 2018. Sharing the latest developments in AMP and the chance to engage one-on-one with core contributors working on the project should make it worth the trip (even in the cold!). We’ll share the exact dates and how to register next month. And in the meantime, be sure to check if the AMP Roadshow is coming to a city near you. We’re headed to Europe in November and China in December.

The success of AMP is completely dependent on those who have contributed to the project. Whether it’s the over 400 of you who have committed code directly, or the 10,500 others who have engaged with the project on Github, AMP is what it is today thanks to everyone’s contributions. We’re also seeing other organizations take an increasingly proactive role in supporting AMP. Automattic, for example, has been working with us to improve the quality of the WordPress plug-in over the past several months. In addition to strong adoption across the community, WordPress.com VIP clients like The New York Post and PMC have seen great results with their implementations.

The future of AMP

The future is bright for AMP. Beyond the success of publishers and e-commerce websites, we’ve seen a growing number of ways for websites to utilize AMP, including the combination of AMP & Progressive Web Apps (PWA), and building an entire site across devices, with AMP. Websites like Mynet have built PWAs which utilize AMP pages to streamline development and ensure fast load times on their pages. Others, such as Spiegel Daily built their entire site using AMP to ensure a great user experience across all devices.

To make it easier to build great looking AMP pages we created AMP Start, a source for fully designed ready-to-use AMP templates and components. Last week AMP Start released new e-commerce templates supporting both in-depth product showcase sites and retail experiences. More templates are set to be launched soon for use cases including local business and digital magazines.

ampstart_home@2x

With that, thank you to everyone who has made AMP successful, especially the over 400 of you who have contributed code directly to the project. We’re excited to see what the future of the project brings as we continue to improve the quality of the user experience across the web. We look forward to seeing many of you in Amsterdam in February. Onwards!

Posted by David Besbris, VP Google Search, AMP Project Lead at Google

¹Lift may depend on ad implementation.

AMP_Infographic_2017_Full

 

AMP: Two years of user-first webpages

Start fast with new AMP Start templates

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.

Once you’ve selected a template, you can download the full code for the site, containing all the HTML, JavaScript and CSS needed to render all the pages within the site. AMP Start is built using Basscss, a low level CSS toolkit that provides lots of CSS utility classes to avoid needing any custom CSS. This way you can quickly create responsive, lightning-fast AMP pages with your own content, without needing to build page elements from scratch.
ampstart_home@2x.png
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.

ampstart_templates@2x.jpg

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. This includes new templates like Lune, which highlights a single product line with seamless scrolling animations and parallax effects. Lune is designed with a modern feel to showcase details of a specific item and give visitors descriptions and information for the products of a brick and mortar store.

Lune_template.gifTemplates on AMP Start are fully interactive and built entirely with AMP so they’re fast across all devices. To get started building dynamic retail experiences, also check out the new Bike Shop template, which allows you showcase a product library with features like product sorting, image galleries, and checkout flows.

ezgif.com-video-to-gif
Because of the way these templates were designed, any specific element of a template, such as a hero image or a sidebar menu, can also be downloaded and customized to fit your brand. This is intended to make it easier to create well-designed pages even if you already have the bulk of your site completed.

What’s Next?

Additional templates will to be added to AMP Start over the coming months, including a site for showcasing a creative portfolio, news sites with content tagging and digital magazines, as well as a local business site. In order to really push the limits of what is possible with AMP, we worked with a community of design shops including North Kingdom, MetaLab and Grain & Mortar to produce these templates. Our goal was to showcase the interactive and dynamic possibilities when using components like amp-bind and amp-animation.


We hope these improvements to AMP Start will make it simple to get started with AMP, whether you are building a new site or utilizing one of the stylized components for an existing page. As always, we welcome your comments, feedback, and contributions. As with the rest of the AMP Project, the code for AMP Start is entirely on GitHub and
accessible for everyone here.

Posted by Abby Beck, AMP Project UX lead, Google
& Matt Ludwig, AMP Project marketing lead, Google

Start fast with new AMP Start templates

The Argument for AMP: Lessons from 10 Case Studies

Editor’s note: The following is an excerpt from an independent study done by Stone Temple, a digital marketing agency, posted with their permission. Read the full study here

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.

Summary

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.

Read Stone Temple’s full study here.

The Argument for AMP: Lessons from 10 Case Studies

New in AMP: Position observers, fluid ads and improved analytics for video & beyond

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>

scrollable

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.

<amp-sidebar> can now power your responsive design

sidebar

With easy-to-use responsive layout and features like srcset, AMP is responsive by design. We’ve now made it even easier to make responsive pages by releasing improvements to amp-sidebar that enable changing display format based on the width of the viewport. For example, users can have a toggle-able sidebar on mobile that changes into a fixed-position header on desktop.

Native video analytics in AMP

video_snippet

We’ve added native AMP support for video analytics with the launch of several of new video triggers and video variables that you can use within amp-analytics to collect engagement data with an amp-video. Check out the documentation to learn more.

Note that support is currently limited to the amp-video component, but video player vendors can integrate support with their video player implementations in AMP using the video interface. Get in touch with us on GitHub if you’re a video player vendor interested in doing this.

Get insight about user journeys between AMP and non-AMP with improved Client IDs

We recently introduced the ability for AMP viewers to more directly manage Client IDs. In terms of changes to AMP, this means that AMP viewers can now accept vendor identifiers and/or API keys included in pages by developers so that the AMP viewer can identify the party that is requesting Client ID information.

These improvements can be used to do things like provide consistent IDs between AMP and non-AMP pages. Google recently announced updates for its Google Analytics product that takes advantage of these changes to provide their customers with enhanced understanding of AMP traffic; check it out if you’re using Google Analytics for your AMP pages.

Fluid ads allow publishers to request sizeless ads

fluid_ad

With AMP’s content reflow policy in place, we’ve heard from publishers that they are unable to request ads whose size is unknown at request time. To solve this, we are launching fluid ad support. The feature is currently available for testing in open alpha.

The best of the rest: Extension tracking, <amp-ima-video>, improved data freshness

The roadmap ahead

We’re also targeting a set of features mentioned in our last update for launch in Q4—this includes:

Looking ahead for analytics, some areas we are focusing on are:

  • Error logging: We are planning to add a trigger that will enable you to log errors.This should help provide increased visibility on the kinds of problems users might be encountering as they interact with your AMP pages.
  • Batched analytics: In several contexts, it’s helpful to collect many analytics pings and be able to transmit them at one moment, so this feature will add support for batching in AMP.

Last but not least, many publishers have the need to enhance ad requests with targeting or other cookie level information before making the ad request. We are making this easy with what we are calling RTC (Real Time Config). With RTC, publishers will be able to define up to 5 end points to enhance the ad request before making the ad request to the primary ad server. The intent to implement has been posted on Github and we look forward to your feedback on it.

* * *

Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests on GitHub.

Posted by Lisa Wang, Product Manager, AMP Project

New in AMP: Position observers, fluid ads and improved analytics for video & beyond

The Why and How of Accelerated Mobile Pages at Condé Nast

Editor’s note: We found this awesome post on the Condé Nast Technology blog. Send feedback to @oscrperez and for more information about Condé Nast Technology, follow @CondeNastTech.

Written by Oscar Perez, Condé Nast

What is the Google led AMP Project?

Accelerated Mobile Pages are a set of performance focused restrictions and limitations on HTML, CSS, and JavaScript that maximize performance and allow Google to distribute optimized content using their CDN. In a nutshell, AMP enforces the usage of AMP web components in place of certain HTML tags, restricts CSS selectors that can negatively impact performance, and forbids the usage of non AMP JavaScript outside sandboxed iframes. To learn more about the AMP format, how it works, and how it fits into Google search, take a look at the official overviewtechnical description, and the AMP by Example portal.

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:

Condé Nast AMP Service 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:

AMP Service Render Pipeline

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.

Send feedback and comments to the author: @oscrperez. For more about Condé Nast Technology follow @CondeNastTech.

The Why and How of Accelerated Mobile Pages at Condé Nast

Faster AMP ad landing page support from AdWords

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

Faster AMP ad landing page support from AdWords

E-commerce at the speed of AMP

Early results for e-commerce companies that are investing in Accelerated Mobile Pages (AMP) are showing that the format is paying off in terms of conversions, speed, bounce rates and mobile acquisition costs.

  • Brazil-based Fastcommerce’s clients are seeing a 15% lift in conversions on mobile as compared to non-AMP pages across their 2M AMP pages 
  • WompMobile creates effective mobile experiences for e-commerce websites and saw a 105% increase in conversion rates and a 31% decrease in bounce rates with AMP pages. 
  • Wego.com, the largest travel marketplace in the Middle East and Asia Pacific, saw a 95% increase in partner conversion rates and a 3x increase in ad conversions after creating AMP versions of key landing pages. 
  • AMP drives close to half the mobile traffic of French organic retailer Greenweez and from January to March 2017, they saw an 80% increase in mobile conversion rates and 66% decrease in mobile acquisition costs.  

We’ve seen that AMP brings an almost-instant page load that makes it ideal for the first user interaction with your site. But there’s much more to an e-commerce experience than speed, and AMP is your ideal partner in this journey. For those of you that want to see similar success to Greenweez or Fastcommerce, we’d like to share an overview of all that is possible for e-commerce with AMP.

The Basics

Let’s start with the basics of your e-commerce site. Check out AMP for E-commerce Getting Started on the AMPbyExample website. There you can find sandbox examples to start building product pages, product category pages, and checkout/payment flows. Provide your customers with everything they need to make a decision – reviews, photos, product customization, and more.

Myntra, the largest online fashion player in India, saw a 60% improvement in speed and 40% reduction in bounce rates across their most important landing pages. By using amp-bind they also implemented sorting and filtering, and size selection on these pages to give their users a rich experience.

Some highlights of what AMP supports are:

  • Dynamic content: To ensure your customers are always seeing the freshest information, amp-list and amp-bind can be used to fetch and render up-to-date content on your pages.
  • Checkout/payments: You can implement a shopping cart and initiate check-out flows directly from within your AMP pages. Whether you want to use the Payment Request API, use amp-form, or redirect users to a non-AMP page on your website is up to you. WompMobile shared their payment implementation at this year’s AMP Conf, which you can check out in the linked video.
  • Personalization/log-in: amp-list can be used to provide personalized content to your customers – whether in the form of recommended products or saving the state of their shopping cart.
  • A/B Testing: To learn what works best for your users, you can use amp-experiment to conduct user experience experiments on your AMP pages.

For features that aren’t supported natively, you can use amp-iframe to embed content and incorporate features like chat applications, maps, or other third party features. Or if you prefer, you can also hand off to a non-AMP page on your website.

amp-bind

Many of these engaging and useful e-commerce experiences are made possible with amp-bind, an interactivity model which allows you to link user actions with different document states. Back in July, we detailed many examples of the new opportunities amp-bind brings – here are some more of the key ones for e-commerce.

In the example we built below, you can see filtering and sorting in action:

sort_filter

And as we’ve mentioned, you will probably discover more capabilities than what we’ve identified. Explore the possibilities and share with the community what you find.

AMP + PWA

When Wego, the largest travel marketplace in the Middle East, rebuilt their landing pages with AMP and their more interactive pages with PWA, they saw tremendous improvements in site performance. Their AMP pages saw more than a 10x increase in page speeds and a 12% increase in organic page visits.

While PWAs support engaging, app-like features, the Service Worker necessary for the PWA is unavailable the first time a user loads your site. AMP provides an ideal entry point to your site that allows the PWA to load behind the scenes. With their AMP + PWA implementation, Wego saw 95% more conversions and 26% more visitors to their site.

As you can see, e-commerce sites in particular can benefit from this combination: AMP dramatically speeds up the first page on your site and PWAs speed up the loading time for each subsequent click. This is especially useful when the conversion funnel spans multiple pages.

And as an added bonus, PWAs also support engaging, app-like features, such as add-to-homescreen buttons, push notifications, reliability in poor network conditions, and functionality even when the user is completely offline.

To learn more about how to implement an AMP + PWA site, check out our this video tutorial and  guide.

Analytics

amp-analytics supports both third-party analytics tools and your own in-house analytics solutions. You can find a list of all the third-party tools that have built in configurations for use with the amp-analytics component here – including Adobe Analytics, Google Analytics, Clicky Web Analytics, and more. For in-house implementations, check out our AMP By Example on Analytics. At AMP Conf earlier this year, companies like eBay and Pinterest also went into more details about how they incorporated analytics for AMP, so check out the linked videos to learn more.

* * *

The AMP Project is committed to helping sites utilize the format’s lightening fast speeds for e-commerce. You can expect to see additional resources, like new e-commerce templates on AMPstart.com in the coming months. Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests.

Posted by Lisa Wang, Product Manager, AMP Project

E-commerce at the speed of AMP