Introducing the AMP Roadshow: Bringing the AMP team to you

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.

Hopefully see you soon!

Paul

Introducing the AMP Roadshow: Bringing the AMP team to you

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.

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

Even Faster Loading Ads in AMP

As we’ve talked about before, we can’t improve the web for all if we don’t address how ads behave on web pages. At Google I/O earlier this year, we hosted a session on ads in AMP where we talked about the journey needed to get from supporting basic functionality of ads on AMP pages to enabling a truly excellent advertising experience on AMP pages for users, publishers and advertisers. As we described in the talk, our vision to accomplish this involved three phases:

The first phase was completed when the AMP Project originally launched nearly two years ago and as of last week, we have hit another milestone in this roadmap by completing phase 2. The rest of this post explains what we accomplished in phase 2.

Major ad networks like AdZerk, DoubleClick, AdSense and TripleLift are already serving AMP Ads, taking advantage of the infrastructure built in phase 2. This launch not only makes AMP Ads render faster, but also makes regular ads on AMP pages faster.

Launching Fast Fetch

The biggest addition in phase 2 is ‘Fast Fetch.’ With Fast Fetch, we separate when the ad request is made from when the ad response is rendered. This allows us to make an ad request very early in the lifecycle of the page for all ad slots and only render the ads before the user is about to view them.

This is in contrast to what we call ‘Delayed Fetch,’ the legacy mechanism of requesting ads. In Delayed Fetch, ad request and rendering are done in one action which results in the user seeing a ‘loading indicator’ waiting for the ad to load. Delayed Fetch also has an additional constraint: the runtime does not request the next ad slot on the page for at least one more second to avoid conflicts with regular page content being able to load.

With Fast Fetch, ads are requested much earlier in the lifecycle of the page, allowing page rendering and creative selection in the ad server to happen in parallel.

Fast Fetch is 850ms faster at the 50th percentile and 2.7s faster at the 90th percentile as compared to Delayed Fetch.

Collaborative rendering for AMP Ads

When the ad response is in AMP format (AMP Ads), the AMP runtime renders it immediately. If the response is a regular ad, the runtime needs to wait until the rest of the content on the page is loaded. This is possible because we can be sure that the AMP Ad is performant, but no such guarantees exist with non-AMP ads.

Based on DoubleClick and AdSense experiments, AMP Ads load up to 1.6 seconds faster at the 50th percentile and up to 5s faster at the 90th percentile.

The faster an ad appears on screen, the higher the viewability of the ad. This is beneficial for brand advertisers because this exposes the brand to a wider audience. This is also beneficial for performance-based advertisers because higher viewability increases the chances that a user will interact with the ad.

Launching new features for Fast Fetch

A number of publishers are experimenting with AMP as the format for serving their content on their primary website. To support publishers in these efforts, Fast Fetch will bring additional advanced ad capabilities to AMP in the future, such as:

  • Competitive exclusions and roadblocks for AMP pages
  • Ability to refresh ads at a configurable frequency
  • Support for enhancing ad requests with targeting information to the ad server in real-time

If you’re a publisher (or an advertiser):

Thanks to DoubleClick and AdSense, eligible ads are automatically converted to AMP when the ad request is from an AMP page. You can expect this volume to increase as more formats are AMP convertible and as a result, benefit from higher viewability and click through rates of the ads served to your pages, without you making any changes.

If you’re an advertiser (or publisher) who develops the creative:

If you develop ads (whether you are a publisher or an advertiser), consider switching to AMP Ads to benefit from faster ads with high viewability and a great user experience. To get started, refer your in-house creative developers to this AMP Ads developer FAQ.

If you outsource development of your creative assets, you can work with an agency like JoyStick Interactive, who specialize in making AMP creatives. If you’re used to building assets using ad development tools, consider using Celtra’s Ad Creator to generate AMP Ads. AMP Ad support for other tools like Google Web Designer is also coming soon.

If you’re an ad tech platform: :

DoubleClick and Adsense ad tags are using Fast Fetch and seeing a tremendous decrease in latency. We’d like all ad networks to transition to Fast Fetch. Here’s a guide to help you transition. For AMP Ad signing, you can either work with Cloudflare to use their Firebolt service or, if you’re interested in signing AMP Ads yourself, reach out to us on Github.

“Cloudflare Firebolt makes it easy for any ad network to sign and serve ads globally with almost no additional development work required,” says Dane Knecht, head of product strategy at Cloudflare. “As part of our mission to help build a better Internet, Firebolt further enhances the global AMP ad experience, making it faster and more secure and resulting in better conversion rates.”

AMP Ads are also supported now on DoubleClick Ad Exchange (via Real Time Bidding) and DSPs can start supporting delivering their AMP ads over RTB.

We’ve come a long way with advertising in AMP, and we’re excited to head into phase 3. This includes:

  • Empowering ad networks to auto-convert and deliver AMP Ads.
  • Having ad servers support uploading and delivering custom made AMP Ads.
  • Building functionality that helps creative developers build AMP Ads.
  • Partnering with more ad creation tools to output AMP Ads by default.

As always, we look forward to hearing your feedback or opportunities on any of the above to partner for a better web.

Posted by Vamsee Jasti, Product Manager, AMP Project

Image

Putting the AMP in Progressive Web AMPs: Meet the ShadowReader

We’ve previously written plenty about combining AMP & PWA, short for Progressive Web Apps. While the idea of preloading your PWA while the reader is reading your AMP page is fairly straightforward, the other combination pattern, where AMP is used as data-source to power your PWA, is less understood.

In my recent Google I/O talk, I claimed that you could get an AMP page to render within your PWA within a few minutes of writing code, and while that might be true, it doesn’t reflect all the work to be done in a production app. It was time to eat our own dogfood and build a production-ready PWAMP from scratch. Meet the Shadow Reader:

 


Contrary to our simpler previously released
React-based sample app, The ShadowReader demo app is is so-called ‘vanilla JS’ (with the exception of AMP, of course) – built from scratch to demonstrate all steps required to create the experience – and uses real-world feeds and AMP pages from The Guardian. You can experience it yourself on your phone (or via emulation) at https://amp.cards.

So what’s special about this app? For once, it demonstrates how quickly you can spin up a so-called “app shell” if you already have a corpus of AMP pages. Instead of a giant app that includes all templating logic to display articles, this app simply reads the Guardian’s RSS feeds, then delegates to AMP for rendering an existing AMP page inline when you click a card. This makes the engineering effort and app itself incredibly lightweight. More highlights:

  • Pulling in real-world data means solving real-world challenges
  • Weighs less than 10kb (~200kb if you include Guardian web fonts and AMP)
  • Smooth card transitions and skeleton UI’s to further accelerate perceived performance
  • Supports full URL-based navigation, sharing

If you’re a developer, dive through the source code and head over to my own blog to learn exactly how I’ve built each feature and element of the app, including the FLIP-based animations and the article views that seamlessly reconnect with lazy-loaded cards.

The Shadow Reader is half inspiration, half tutorial. Use it to evaluate whether the PWAMP route makes sense for your use-case, and don’t hesitate to reach out if you need help getting started. Now PWAMP all the things!

Paul Bakaus
AMP Developer Advocate, Google

Putting the AMP in Progressive Web AMPs: Meet the ShadowReader

AMP Roadmap update for end of Q2

We’ve updated the AMP Roadmap to reflect progress on existing priorities as well as several new projects. You can see the highlights below:

Format

amp-bind, a flexible event binding system supporting more interactivity in AMP is now fully available in production. To find out more about the range of capabilities this feature brings to AMP, read our blog post. Recently we’ve also launched support for validating form inputs via AJAX (experimental but launching soon – example) and the building blocks to compose search-autosuggest using amp-bind.

We are also working on a set of features geared toward engaging experiences in AMP. Specifically, we’re planning to improve amp-image-lightbox this quarter, so developers can easily implement an immersive lightbox experience synced with amp-carousel. Scroll-bound animations are also slated to launch in the next couple months. Once that’s in place, we’ll re-purpose the general solution for parallax scrolling and contextually-displayed headers. Video will also get a new scroll-bound feature: the ability to minimize to the corner of the viewport after the inline video is scrolled away. This will enable users to seamlessly engage with other content on the page at the same time as a featured video.

In addition, we will soon make available new templates for AMP Start to help developers in more verticals make great-looking AMP pages. We’re also making it easier to configure AMP Start pages without having to edit code directly by developing an AMP Start template configurator.

Finally, we’ve started work on some longer-term features to support even more interactivity.

  • E-commerce websites in particular will benefit from dedicated client-side sorting & filtering components, as well as a date picker.
  • Those of you building responsive pages will benefit from a revamped sidebar component that has the ability to change 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.
  • We’re expanding the capabilities of embedded content in AMP by supporting messaging between amp-iframe and other elements in the parent document.

Analytics

As Q2 ended, we have begun to focus on supporting video analytics natively in amp-analytics, starting with amp-video. Available experimentally now and coming to production next week, publishers will be able to capture video-specific data that’s associated with video events like play and pause. The spec is available at the link above, so please give us any feedback on how the proposal matches up with your needs.

On other fronts, we are wrapping up work from the previous quarter to allow AMP extensions to collect data using amp-analytics, we plan to start work to support filters soon, and we expect to have various projects that add further ways to customize amp-analytics, like the reportWhen feature listed in the roadmap.

Ads

We’ve been working on helping publishers enhance ad request information for better targeting and therefore better monetization using a new feature called Real Time Config (RTC). RTC helps publishers earn more from their AMP inventory by enhancing the ad request with things like cookie-based targeting information or more broadly any audience related information in a safe and performant manner without negative consequences to the user experience. We want to ensure all targeting based use cases can be implemented using RTC. We look forward to your input on the Github Issue.

We are also addressing a long standing ask to enable sponsorship campaigns where advertisers require competitive exclusions or roadblocks in AMP pages. We’ve begun work on the ability to correlate all ad requests on an AMP page to achieve this functionality and will soon open it up for testing in experimental. Please let us know on Github if you’d like to test drive this feature.

As a reminder, we have a number of innovative AMP Ads (e.g. Lightbox ads created in AMP format) available on AMP By Example to modify and use for your own campaigns for free. With the launch of amp-animation, scroll bound animation based ads are also easy to incorporate in your direct sold campaigns.

* * *

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 Vamsee Jasti, Product Manager, AMP Project

AMP Roadmap update for end of Q2