AMP’s evolution beyond web pages

This is a talk Yuxuan and I gave at Google I/O 2018 (Video version). We discuss how AMP has evolved beyond just plain web pages and is helping build great user experiences beyond a developer’s own domain.

The web used to look like this. It was made of destinations. Destinations that people remembered and went to.

However, the web is transitioning to a post-destination era. User’s browsing patterns have changed on the web because of the shift to mobile, social and search. Which means that users are finding your content across all sort of devices and destinations like aggregators, social websites, chat apps, search and many others.

With AMP, we saw an opportunity to help publishers deliver a superior experience on the web in this post-destination era.

For those of you that haven’t heard of AMP, it’s an open source web development framework that makes it easy to build excellent web pages. With AMP, it’s hard to make web pages that are slow. Not impossible, but hard. You can make websites that are even more performant than AMP if put a lot of effort into it, but AMP really streamlines the process.

When we launched AMP, it was important for us to ensure that the developers had full control over the brand. So we provided support for custom CSS. We also wanted to ensure that publishers were able to earn revenue on AMP pages. So we added support for over 100+ ad networks and robust paywall support.

And since it’s launch more than 3 years ago, AMP has fully transitioned from a framework that was meant for loading mostly static content to giving developers full flexibility to build interactive and dynamic experiences. Developers can build a page with wishlists, interactive product customizations, filters, sorting and much more! Therefore, a number of e-commerce publishers, like AliExpress have ported their entire website to AMP.

While adding all of this new capability, the AMP team works really hard to ensure that performance is still great. For example, the median speed of an AMP pages is less than 1 second across the Google Search corpus compared to average on the web which is about 15 seconds.

But this talk is not about performance.

This talk is about how AMP can help content and experience creators build for the post-destination era. So how do you build for the post-destination era?

You ensure that your content and experiences work well when embedded within a host like aggregators, social websites, chat apps search and many others. Spoiler alert, we think you should build those experiences with AMP because the principles that AMP is built on top of lends itself really well for embedding.

But before we look at those principles, I’d like to give you a preview of product features that AMP has fueled that were previously no possible in the context of embeddability.

With AMP for Email, we’ll see how AMP is fundamentally changing email to make it real time and interactive. No more leaving email to get something done.

With AMPHTML ads, we’ll see how AMP is making all ads on the web secure and performant.

With Actions, we’ll see how AMP is helping users get things done on the web with just a few taps.

With Zero-Click AMP, we’ll see how AMP can help users get to content even before they ask for it.

Before we dive into each of these product, lets first look at issues with the way embeds work today.

Issues with the way embeds work today

Current embed technologies like iframes and webviews have 3 major issues. They are not performant, not secure and/ or not functional.

First, performance. There is no guarantee that the embedded page would be performant. Therefore, a host is less likely to aggressively pre-render embedded content to deliver a fast user experience especially since JavaScript is single-threaded. Not to mention the privacy implications of leaking user information in such scenarios.

Second, embedded pages may cause security issues to the host. Cross-site scripts introduce all kinds of security holes at various levels of the stack. Even if content is properly sandboxed within iframes, custom JavaScript can still install malware or mine bitcoin without user permission in the background. The page can of course claim that it’s safe but there is no guarantee of safeness.

Finally, since there is no communication interface between the host and the embed, the host has to treat the embed as essentially a black box. This severely restricts the product experiences that are possible with communication based on a standardized protocol. For example, the embedded page won’t be able tot know when it’s visible to users, not even with browser’s native intersection observer API because the embedded page is typically inside of a cross domain iframe. Because of this many basic features like auto play, or viewability tracking are no longer available.

AMP’s principles for embeddability

Privacy Preserved Prerendering

Aside from the performance benefits one gets by using the AMP library, hosts can further optimize and provide instant loading experiences by prerendering AMP documents. Prerendering here means that the host downloads and renders a document before the user expresses explicit interest in the document. Therefore the page appears in an instant as soon as the user taps on, say, a link.

Despite the great user experience pre-rendering provides, it can end up using a lot of bandwidth and CPU. That’s one reason why hosts normally don’t just go ahead and prerender many embedded documents. AMP documents on the other hand are optimized to only load a) resources that are light in weight and b) those resources that are above the fold which would be user visible.

As a result, this allows a host to prerender more number of AMPHTML documents much more aggressively than if it could otherwise. Therefore, there is a higher chance of the users receiving an instant loading experience in cases where there is more than a single page.

There is still one privacy challenge we must address. Prerendering requires downloading resources before the user clicks. Which means, on regular pages, the page can set a cookie which could later be used to target ads even though the user never explicitly went to the page. Apart from that, rendering documents ahead of time might cause firing a pageview pixel even before a page visit which screws up analytics.

Luckily, AMP documents come with privacy preserving prerendering built in since day 1.

To protect user privacy, all analytics and pixels are never loaded when in “pre-render mode”. In addition, the AMP cache also adds an additional privacy protection. With prefetched requests going to AMP cache, page owners won’t be able to set cookies before a user expresses their interest.

Security

Let’s talk about why hosts can safely embed AMP pages. There are two ways you can think of security. One from the perspective of embedded content itself and the other from the perspective of the host when content is being embedded. We will be looking at the latter, today.

So, what is the mechanism that makes a host to be able to trust an embedded AMP page? The AMP Validator. The AMP validator makes it possible for a host to verify that an embedded page is guaranteed AMP and has no security vulnerabilities.

The validator creates a common agreement that both the content creator and the host can agree upon for secure embedding.

But there is one more problem. Real-time validation can be very expensive and not practical. Hosts need a better way to verify the validity of an AMP document much faster.

Open Source Host Interface APIs

AMP has an open communication interface between hosts and embeds that allows better communication that leads to some new product experiences.

Say we want to build a carousel product like the one above.

To provide a seamless swipe experience, the host embeds a number of AMP documents by placing each inside a fullscreen iframe. Since the iframe consumes all user interaction within. How can user swipe and navigate between different documents?

AMP documents will propagate unused touch events up to the host which allows the host to intercept things like a swipe.

But the communication also must be two way. The host needs to be able to let the document know when it comes into view. This is necessary to fire page view pixels at the right time and begin rendering resources that are just below the fold. Since this communication interface API is open sourced and well documented many AMP documents and hosts and reuse these contracts instead of establishing new ones to build new product experiences in non-destinations.

Let’s switch back to look at some of the product experiences AMP has made possible in the context of embeddability, in more detail.

AMP for Email

Little has changed in the email spec over the past 25 years. It’s a wonderful piece of technology that is critical to how people receive information from people, tools, businesses or favorite services. But if you are an email sender, there is little the email receiver can do other than treat email as a notification. Email is not actionable today. The web is much more dynamic than this as you know.

This type of dynamism and real-timeness on the web is provided by JavaScript but JavaScript isn’t allowed in email because of the inherent security threats that it poses.

To tackle this, the Gmail team at Google worked with the AMP team to create an open, backwards compatible spec called AMP for email to make email richer and more powerful. It’s a subset of the main AMP spec with particular focus on security.

It’s also important to note that there is an easy transition path from the way email works today. Email senders already create two version of their email. A plain text and HTML version. Senders can now create an optional third version — the AMP version type. This allows senders to design the AMP part of the emails independent of the HTML versions. If a mail provider supports AMP for email, they will render the AMP version. If not, the mail provider would change nothing and show the HTML version of the email.

Let’s dig into the spec a little bit.

The real-time nature of the spec is enabled by an AMP component called amp-list which allows email authors to fetch real-time information from an endpoint. For e.g. nobody wants to see outdated prices of a product in their inbox. Amp-list allows fetching the most real-time prices when the receiver opens their email.

The interactive nature of the spec is brought you by an AMP component called amp-bind which allows email creators to build interactive experiences using rich JS like expressions. For example, this enables features like being able to respond to an invitation with a single click. Let’s take a look at a few examples of these emails in action

Let’s look at an example. Zillow’s goal is to help shoppers find their dream home which of course is easier when shoppers specify what they are looking for. With AMP for Email, a shopper can get from answering a series of questions to looking at a range of personalized results without ever leaving their email.

Here we are in Gmail where I’ve received an email from Zillow. You’ll notice how I’m able to answer a few questions. And once I’m done, I can ask to see a personalized list of houses too. I can browse around to look at images of homes and even save them for viewing later. All without ever leaving their email. It turns email from a notification to application.

The next demo is from Pinterest. AMP for Email gives Pinterest the ability to send emails that allow users to explore and interact with content without ever having to leave email. They can also pin to a pinboard from right within email, without ever needing to log-in again. This is great for the user because they are able to discover new things right from within email. And great for Pinterest because this allows them to deliver a much better experience to their users.

It’s no exaggeration that AMP for email is bringing a new era of email.

If you are a mail provider or a mail client, reach out to us on GitHub and we’d love to help you integrate with the spec. If you are an email sender, you can sign up for dev preview access at the link on the slide.

AMHTML ads

The second product I want to talk to you about is ads. Ads are a thing that get embedded more number of times than anything else in the world. Aside from the way ads are being implemented today, it’s a wonderful piece of technology. It allows the ad creator’s content to flow all across the web while being embedded in hosts.

Here is the problem. With ads, when it comes to performance, there is an issue of misaligned incentives. If the ad creator is not careful, they can impact the performance of the web page. Bad behavior of an ad doesn’t impact the ad creator, it shifts the blame to the publisher and impacts the user experience.

We wanted to fix this problem, so we created AMPHTML ads. The way AMPHTML ads are implemented, they are guaranteed to be fast, secure and performant. AMPHTML ads are entirely written in AMPHTML — which means they can’t have arbitrary JS and they are cryptographically verified before being delivered to the page. I won’t go into all of the mechanics of the ad verification & delivery but I will share a link so you can learn more details about it. These ads work on both AMP and non-AMP pages and soon will also be supported in mobile apps. Let’s take a look at what a simple AMPHTML ad looks like.

Include the handy AMPHTML ad top level tag. Include the ads specific AMP runtime which is a thinner AMP runtime specific for ads.

Finally, wrap a simple <amp-img> tag within an anchor link. That’s it, you have a simple AMPHTML image ad. But that’s a simple ad. Can AMPHTML be used to create beautiful timeline based animation ads? Yes, you can but we are taking it one step further with the help of tooling companies.

I’m very happy to announce our partnership with the Adobe Animate CC team — one of the most popular ad creation tools. The power of a tool like Adobe animate is that it allows you do WSYWIG timeline based animations instead of having to manually hardcode clipping and masking features in JavaScript.

The issue with the creating complicated ads manually is 1) It takes forever to get the layering and positioning right 2) the end result is that it also has pretty bad performance. I’d like to show you a quick demo of how easy it is to build great looking ads that are also performant.

It’s super easy to create a pretty complicated ad in AMPHTML. It also shows how easy it is to adjust the timeline scrubber to get the positioning and timing of assets just right. And just to prove that it’s valid AMPHTML, we’ll grab and source and validate it in the online AMP validator.

Some publishers are also choosing to use AMPHTML ads in ad campaigns they execute. For example, El Pais, a publisher from Spain saw a 90% decrease in ad latency and an increase of 32% in click through rate. If you are in the ads business, we think AMPHTML ads can help you achieve your business results while ensuring that your ads are fast, performant and secure on the web.

For an overview of AMPHTML ads, see the ampproject.org/ads site. For a deeper dive, see the AMPHTML ad tutorial.

Actions

The next product is called Actions.

It’s still way too hard to get things done on the web, especially those things which involve a credit card. The beauty of the web is in the diversity of merchants that can fulfill a user’s need. But for a user that discovers a merchant site from Google.com, the user needs to introduce themselves to the merchant with their identity and payment information. This creates friction.

For example, 54% of users abandon account registration flows when you show them a registration form 33% of the users abandon purchase at the credit card entry stage. Nobody likes filling out a form. Especially on mobile.

To solve this problem, the Actions team at Google worked with a few merchants to provide a seamless transaction experience with AMP Pages, Google Sign-in and gPay for sessions starting from Google Search or the Google Assistant.

AMP’s tight security, performance and open host communication APIs allowed Google to offer transaction primitives like Identity, Payments, Receipts as one integrated package.

Actions can also integrate with other Google services in the future. For e.g. say you are trying to make lunch reservations. Actions can overlay your calendar on top of the booking flow to pick a time that’s free, without needing to share your entire calendar with the merchant. Such guarantees are really hard to implement without AMP.

Let’s look at a few demos.

The first one is from Fandango who built their entire checkout experience in AMP using Actions. Note that I never had to pick a form field, type in my email, or pick a payment method. From the time I decide to watch a movie to the time I have tickets on my phone — it takes under 30 seconds.

Next, let’s look how Doordash makes it really easy to order food using AMP pages and Actions in the Google Assistant.

Getting things done using Actions and AMP with just a few taps.

It’s a win-win situation for users and merchants. Users get a fast checkout experience because they are Google optimized. And since the pages are written in AMP, they are guaranteed to be fast. Users almost never needs to fill out a form or enter credit card information. And there is a single place for all your receipts, in case you want to track where your order is or track your expenses.

Merchants are able to retain full control of the UI with their AMP pages so they can build relationships with their customers and acquire them over the long term. Merchants get higher conversions because of the streamlined checkout experience. We’ve seen greater than 20% sign-in uplift from Google Sign in and greater than 2x conversion uplift from Google Pay. Merchants spend less time implementing transaction primitives and focus on things that offer unique value.

Stay tuned to hear more details from the Google team for updates on Actions later this summer.

Zero-click experiences

The last product I’d like to talk about is how AMP is enabling some powerful new features. Features we are calling “zero-click experiences”.

Which means that if a developer has pretty good confidence that a user would be interested in the next page, why not have it ready even before they ask for it?

Let’s look at one such example. Google Images is building frictionless visual search that helps users go beyond the image to your site.

But here is the problem. An average web page loads in 15 seconds and more than half the users leave a web page if it takes more than 3 seconds to load the page. But what if we reduced the cost of a click down to zero. Remember this is possible with AMP because it can do privacy preserving prerendering. Here is one way the Google Image team is planning to solve that using AMP. Let’s say I’m in the market for renovating my kitchen, so I go to Google Images and search for Kitchen Ideas.

I find an image that’s interesting to me, so I click on it. With AMP’s privacy preserving prerendering, Google images can prerender the webpage where the image is from and make it readily available for the user to explore as you can see in the bottom webview where it says elledecor.com

If the user taps on the preview, it loads instantly.

When users internalize that the cost to click on a link is zero, it intuitively helps them to explore the rich content beyond the image. Ultimately, it’s great for the users because they are able to get inspired by looking at multiple ideas on the web and it’s great for publishers because they now receive more page views.

The last thing I want to talk about is called ‘AMP as foundation’. It basically means that no matter where your experiences live, you can use AMP to power that experience. Including your own destination sites! So let’s dig into what an existing setup for most publishers looks like.

A lot of publishers have already produced paired AMP pages which are being surfaced on various platforms like Google, Twitter, Bing and many others. The way they know to surface the AMP version is by following the rel = “amphtml” link on the non-AMP page. And if you haven’t already started to produce your AMP pages, I hope today we’ve given you enough reasons for why you should.

Separately, a number of publishers are rebuilding their website to Progressive Web Apps or PWAs to take advantage of things like push notifications and offline capabilities on the web. So how does AMP fit it in? You know how we talked about AMP being great for embeddability. You can take the same AMP pages and embed them inside your PWA!

This can be done using a technology called Shadow DOM. So you can have some really powerful features in the PWA shell and have the AMP content layer function independent of the shell. This pattern works great overall but there are some outstanding issues we continue to fix, so I wanted to call that out in the link on the slide.

YoongvMATT, a really well known creative firm from Germany built a super compelling experience using AMP inside of PWA pattern for BMW. I’d like to show you a quick video featuring the site they just built for bmw.com by embedding AMP inside of PWAs. The site is live at bmw.com, so you can play with it right away.

And today, we saw a number of different use cases of products where AMP is the core layer that powers those features.

And who knows, there are probably other future cases we haven’t even thought of. AMP in car dashboards? AMP in Virtual Reality? It’s really yours to explore.

If there is one thing to take away from the talk, it is this: The web is moving towards a post destination era. If you are a developer producing content or experiences in this new era, you need a technology that works well everywhere, not just at your destination.

AMP delivers superior performance, security and best practices which enables features that are just not possible with regular pages.

We can’t wait to see what you build with it!