AMP

Announcing AMP Toolbox 1.0

Developer Experience, Websites

AMP Toolbox has been around for a while now, but I thought it’s a good idea to make a proper introduction now that we’ve reached the 1.0 milestone. In short, AMP Toolbox is a collection of command line tools and JS APIs to make it easier to successfully publish AMP pages. Each tool can be downloaded and used separately.

The 1.0 release includes two big updates:

  1. 1. A linter for AMP documents: AMP Linter reports errors and suspicious constructions such as missing or incorrectly sized images, missing CORS headers, or invalid metadata.
  2. Valid optimized AMP Support: the AMP Optimizer will now produce valid AMP, making it a lot easier to host optimized AMP pages. See the previous blog post on this for more details.

But there’s more cool stuff! Let’s take a closer look at what else is in AMP Toolbox.

AMP CLI

First of all, there’s a command line interface available for most features included in AMP Toolbox. You can install it globally via NPM:

$ npm install @ampproject/toolbox-cli
$ amp help

or you can run a one off command using NPM’s built-in `npx` tool:

$ npx @ampproject/toolbox-cli help

AMP Linter

The brand-new toolbox-linter checks your AMP documents for common mistakes and best practices:

$ amp lint https://amp.dev

PASS 1x1 images are specified by <amp-pixel>
WARN All <amp-img> have reasonable width and height
> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]
> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]
PASS Videos are under 4MB
PASS <amp-video><source/></amp-video> syntax is used for video
PASS Endpoints are accessible from cache
PASS Endpoints are accessible from origin
FAIL <meta charset> is the first <meta> tag
> <meta charset> not the first <meta> tag
PASS Runtime is preloaded

Or without installation:

$ npx @ampproject/toolbox-cli lint https://amp.dev

AMP Linter’s SXG mode is invaluable when adding SXG support to your site:

$ amp lint -f sxg https://amp.dev

PASS /amppkg/ is forwarded correctly
PASS application/signed-exchange content negotiation is correct
PASS dump-signedexchange -verify does not report errors
PASS vary header is correct

AMP Optimizer

AMP Optimizer is a tool to server-side enhance the rendering performance of AMP pages. AMP Optimizer implements AMP performance best practices and supports AMP server-side-rendering. These optimizations can result in up to 50% faster FCP times. 

You can play around with it via the CLI:

$ amp optimize https://amp.dev
$ amp optimize file.html

However, for production, it’s better to integrate toolbox-optimizer as part of your build or rendering chain. There’s also an Express middleware available: amp-optimizer-express that will apply AMP server-side-rendering on the fly.

AMP Cache URLs

For testing, it’s a good idea to check whether an AMP page works on all AMP caches. Use toolbox-cache-url for translating origin URLs to the AMP Cache URL format.

$ amp curls https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev
https://amp-dev.amp.cloudflare.com/c/s/amp.dev
https://amp-dev.bing-amp.com/c/s/amp.dev

Or for a specific cache:

$ amp curls --cache=google https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP Cache List

There’s also an API available to get a list of all official AMP Caches. This can be useful when implementing CORS in your backend:

const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);

Sometimes it’s necessary to quickly update or remove AMP documents from an AMP Cache. Using the CLI version of the AMP Update Cache API this becomes very easy: 

$ amp update-cache https://www.example.com/ --privateKey /path/to/private-key.pem

Of course, there’s also an API version available as part of the toolbox-update-cache package.

AMP CORS

Speaking of CORS, many AMP components, such as amp-list or amp-state, take advantage of remote endpoints by using CORS requests. Part of AMP toolbox is a connect/express middleware which will automatically add all CORS headers required by your AMP pages. Simply add the toolbox-cors middleware to your express application and you can forget about CORS when serving your AMP pages:

const express = require('express');
const ampCors = require('@ampproject/toolbox-cors');

const app = express();

// That's it!
app.use(ampCors())

AMP Validation Rules

In case you want to implement AMP specific code completion for your favorite text editor, take a look at amp-validator-rules: a javascript library for querying AMP validator rules. Here is a sample that will list all valid attributes for the amp-img element:

import validatorRules from '@ampproject/toolbox-validator-rules';
 
validatorRules.fetch().then(rules => {
  // Get all website specific tag rules ...
  const tags = rules.getTagsForFormat('AMP');
  // ...find the definition of the amp-img tag...
  const ampImg = tags.find(e => e.tagName === 'AMP-IMG');
 
  const ampImgAttrs = ampImg.attrs
    // ...filter global, layout and amp-bind attributes...
    .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)
    // ...extract the name...
    .map(e => e.name)
    // ...sort alphabetically...
    .sort();
 
  // ...and display result in the console.
  console.log(ampImgAttrs);
});

Summary

AMP Toolbox aims to simplify common tasks either via command line or APIs. If you think there’s a piece of functionality missing please let us know!

Posted by Sebastian Benz, Developer Advocate, Google

Faster AMP on the origin: AMP + SSR =

Cache, Developer Experience

AMP now officially supports a technique called server-side rendering (SSR) which you can apply to your AMP pages to make them load even faster. Our tests show increases of up to a whopping 50% on the popular FCP metric. The Google AMP Cache has utilized this technique for a while, but now you can also use it on your own domain! Installing this extra optimization is especially important if you are using AMP for delivering your main site experience. Even if you are using what is called the “paired AMP setup” where you have AMP and non-AMP pages, this technique ensures optimal performance for your user if the AMP Cache isn’t used, such as by users using the Twitter app.

SSR is a technique for improving first-contentful-paint times (FCP) for frameworks rendering the page client-side such as React or Vue.js. The downside of client-side rendering is that all Javascript necessary to render the page needs to be downloaded first. This delays the time until users can see the actual content of the page. To alleviate this, both React and Vue.js support pre-rendering the DOM on the server on navigation requests. Rendering is then picked up by the client-side Javascript, a process called (re)hydration. Users will be able to see content much faster as a result. 

AMP SSR works by removing the AMP boilerplate code and rendering the page layout on the server. The AMP boilerplate code exists to prevent content jumps on page load. It hides the page content until the AMP framework has been downloaded and the page layout is established. As a consequence, AMP pages suffer from the same problem as other client-side frameworks: rendering is blocked until the Javascript has been downloaded. By removing the boilerplate code, AMP SSR results in 50% faster FCP times. Here is a diff comparing an AMP file with it’s SSR’d version (for a detailed explanation check out the official guide):

You can identify server-side rendered AMP pages via the transformed attribute in the html element:

<html amp transformed="self;v=1">

Sidenote: AMP caches set their own flag, for example, the Google AMP Cache adds:

<html amp transformed="google;v=1">

With this attribute being set, the validator treats SSR’d AMP as valid AMP. SSR’d AMP optimizations break the rules of the AMP spec, hence making the document invalid, which is why it’s necessary to indicate this case with this new flag. With the flag and the optimizations both being in place, the document is considered valid and you’re good to go.

If you want to learn more about AMP SSR, checkout the explainer video on the AMP channel or read the AMP SSR guide.

How to SSR AMP?

It doesn’t make sense to hand-write SSR’d AMP. Instead, use a tool to automatically transform your AMP files into a SSR’d version, like a compiler would. Ideally, this transformation takes place ahead of time, before a user requests a document. However you can also run it on demand (make sure to cache the result to avoid running the transformation over and over again). 

Currently, there are two tools available for AMP SSR:

  1. AMP Optimizer: a NodeJs library for producing optimized AMP. If your site is powered by Express, you may also be interested in the express middleware
  2. AMP Packager: a go command-line tool, usable in conjunction with serving signed exchanges.

Sidenote: these tools will not only perform SSR, but will also perform other optimizations such as preloading the AMP framework and re-ordering the head.

Next.js support

We are super excited that the latest Next.js 9 release supports AMP SSR out-of-the-box. Next.js 9 now renders optimized AMP by default for AMP-first and hybrid AMP pages. This makes Next.js a great choice for building AMP pages. 

What’s next?

We have two big things planned for the future:

1. The option to self-host the AMP framework (v0.js). Yes, you got that right, you’ll no longer have to download AMP from cdn.ampproject.org. This will have two advantages: 

  • Faster time-to-interactive: downloading the AMP framework no longer requires establishing a second HTTPS connection to cdn.ampproject.org.
  • Easier QA: you can control when you want to switch to a new AMP release.

It’s important to note though: for privacy reasons, AMP caches will re-write AMP script URLs to match the cache origin when serving a cached AMP page. 

2. WordPress integration: v1.3 of the official AMP plugin will support AMP SSR out-of-the-box. 

AMP SSR is for everyone

If you publish AMP pages, you should publish server-side-rendered AMP pages. Similar to minifying your HTML or CSS, running AMP Optimizer or the Go transformers should be a normal part of your build / rendering chain. The improved rendering performance makes a big difference in FCP times, but more importantly, in the user experience.

Posted by Sebastian Benz, Developer Advocate, Google

AMP Advisory Committee midterm election

Governance

Update: the results are in!

In September 2018, Malte Ubl—then AMP’s tech lead—announced a new open governance model for AMP built around a series of working groups and two committees: the Technical Steering Committee (TSC), responsible for the direction of the AMP project and day to day operations, and the Advisory Committee (AC), which provides perspective and advice to the TSC.

An important goal of this governance change was to ensure that the voices of those who do not contribute code to AMP, but are nonetheless impacted by it, get heard. This responsibility is shared across all contributors but falls particularly on the shoulders of the AC, which has a duty to ensure its membership is as representative and diverse as possible.

Despite spanning nine(!) time zones, representing a wide variety of constituencies, and being fairly diverse, the AC’s membership is still predominantly US-based, white, and male. This is one of the main reasons why the AC has decided to expand its membership by about four members and is running a midterm election (terms are a year and are renewable).

All candidates are welcomed and encouraged to apply, but preference will be given to those who bring an underrepresented perspective to the AC and help broaden its horizon.

For a better understanding of what the AC’s work consists of, you may have a look at its GitHub repository and in particular its working mode document, the minutes of past meetings, its issue tracker, and its project board. The AC is fully distributed. It works asynchronously over email and GitHub issues (although its work isn’t technical), meets every other week over video conference, and roughly every six months face to face.

Financial support for travel expenses is provided to members for whom the position isn’t relevant to their day job, who are self-employed or unemployed, or who are working for structures for which such expenses wouldn’t be possible.

If you have questions, feel free to reach out to Tobie Langel, the AC’s facilitator.

Else, if you’re interested in joining the AC, please apply by filling in this form.

We will be collecting new applications until Friday, August 23 at 23:59 UTC. The AC will elect its new members through the consensus based process and will announce the result on Monday, September 2.

Posted by Levi Durfee, AMP Advisory Committee member, and Tobie Langel, AMP Advisory Committee facilitator.

AMP Roadshow: It’s Everywhere!

Events

In June, we held an AMP Roadshow in Berlin in conjunction with JS Conf EU. We held another in Atlanta as an adjunct to refactr.tech, a new conference devoted to diversity and inclusion in tech.

This year, we’ll continue bringing the AMP Roadshow to new places and new people in several ways:

  1. Tech conferences. In August, we’ll be running an AMP Roadshow / learning event at BrazilJS, where we’ll also be giving two talks. We’ll have more AMP learning events at Brazil JS on the road.

  2. New locations around the world. We’ll hold AMP Roadshows in Sydney, Melbourne, Auckland, Tel Aviv, Istanbul, Dubai, Karachi, Warsaw, Kiev, Busan, Seoul, Hong Kong, and Dhaka (stay tuned for links to other locations on amp.dev).

  3. Do it yourself. Get in touch with us via the forms on our Roadshows page. Ask us to visit your city. Or sign up to run your very own AMP Roadshow! We’ll give you all the materials you need.

  4. AMP Study Jams. All around the world, Google Developer Groups will be running AMP learning events. There are about 1000 GDGs worldwide. Find one near you!

Finally, we’ve updated all the talks with information about all the exciting new things in the ever-expanding world of AMP, including the latest on Email, Stories, JavaScript in AMP, Analytics, the WordPress plugin, and so much more!

Check here for more information and to sign up. We can’t wait to meet you!

AMP Roadshow Shanghai

Posted by Ben Morss, Developer Advocate, Google

AMP Contributor Summit 2019 Applications Now Open

Developer Experience, Events

Applications for the AMP Contributor Summit 2019 are now open!  If you have contributed to the AMP open source project–or want to start–please apply to attend today.

This year’s summit will take place in New York City on October 9 & 10, with an optional New Contributor Workshop / Hackathon Day on October 8.

The AMP Contributor Summit is our annual opportunity for the AMP open source community to meet face-to-face to discuss the latest in AMP and where AMP is going.  This technical summit consists of a mix of different formats, including talks, breakout sessions and many opportunities for informal conversations.

The day before the main summit kicks off, we’ll have an optional New Contributor Workshop / Hackathon day, with two different tracks depending on your experience:

  • If you haven’t contributed to AMP before or want a refresher, we’ll have a New Contributor Workshop with talks and codelabs to get you up to speed on how to contribute to AMP.
  • If you already have some experience contributing to AMP, we’ll have a Hackathon for people who want to have a fun, concentrated day of coding with others in the community to make AMP better.

100% of those who responded to a post-summit survey for last year’s AMP Contributor Summit said they’d recommend the event, and our goal is to make this summit even better.

Apply to attend the AMP Contributor Summit by July 22, 2019.  We’ll get back to all applicants soon after that.

All of the content for the summit comes from the community, including the talks!  Please help us craft the summit agenda by proposing a talk or letting us know what topics/speakers you’d suggest by August 15, 2019.  

If you have any questions, please reach out to ampcs2019-support at amp.dev.

We’re looking forward to seeing you in NYC in October!

Posted by Joey Rozier, member of AMP’s Outreach Working Group and Engineering Manager, Google

Learn web development with AMP!

Developer Experience, Websites

We’re excited to announce the release of our new courses that teach AMP. Appropriately, they’re called Web Development with AMP!

We think AMP is an excellent starting point for aspiring web developers. After all, AMP lets you create interactive websites without having to use JavaScript. If you know a bit of HTML and CSS, but haven’t yet learned JavaScript, you can use AMP to create interactive websites.

On the other hand, if you’re an experienced web developer, and you’re seeking a simpler way to build performant, well-behaved websites, these courses are for you too.

Finally, if you teach web development, these courses are free to use. For beginners, these AMP courses bridge the gap in a curriculum between HTML/CSS and JavaScript. Others can use the courses to pick up the principles of AMP quickly.

Web Development with AMP is divided into beginning, intermediate, and advanced courses. These are available in many forms:

What’s coming next?

  • Videos for the other two courses will appear later this summer.
  • We’ll also be providing compressed versions of these courses for developers who are either more experienced or impatient.

Enjoy!

Posted by Ben Morss, Developer Advocate at Google

Introducing Cloudflare AMP Real URL

Developer Experience, Signed Exchanges

The following post was written by Zack Bloom, Director of Product and John Graham-Cumming, CTO at Cloudflare

Join us for a free webinar this week where we will cover how Cloudflare is helping its customers drive better results with AMP, and increasing conversions.

The promise of the AMP project was that it would make the web, and, in particular, the mobile web, much more pleasant to surf. The AMP framework was designed to make web pages load quickly, and place the focus on the user experience.

Initially, it was particularly aimed at publishers (such as news organizations) that wanted to provide the best, fastest web experience for readers catching up on news stories and in-depth articles while on the move. It later became valuable for any site which values their mobile performance including e-commerce stores, job boards, and media sites.

As well as the AMP HTML framework, AMP also made use of caches that store copies of AMP content close to end users so that they load as quickly as possible. Although this cache makes loading web pages much, much faster they introduce a problem: An AMP page served from Google’s cache has a URL starting with https://google.com/amp/. This can be confusing for end users.

Users have become used to looking at the navigation bar in a web browser to see what web site they are visiting. The AMP cache breaks that experience. By serving the page from Google’s cache they may be confused by the ‘google.com’ URL they see in the address bar.

Last November we at Cloudflare announced a technical solution to these problems that would allow AMP pages to be served from a cache while retaining the original page URL and all its benefits. The in-depth technical blog post by Gabbi Fisher and Avery Harnish gives the full details. The solution makes use of Web Packaging (which incorporates some clever use of cryptography) to allow the cache (run by Google, Cloudflare or others) to keep a copy of an AMP page and serve it quickly to the end user, but to also contain cryptographic proof of where the page originally came from.

In cooperation with a browser that understands Web Packaging, this means that a page can be stored in an AMP cache and served quickly from it while showing the original site URL in the browser’s navigation bar. A major win all round!

We’re calling this “AMP Real URL” and it’s free to all Cloudflare customers.

How It Works

Google’s AMP Crawler downloads the content of your website and stores it in the AMP Cache many times a day. If your site has AMP Real URL enabled Cloudflare will digitally sign the content we provide to that crawler, cryptographically proving it was generated by you. That signature is all a modern browser (currently just Chrome on Android) needs to show the correct URL in the address bar when a visitor arrives at your AMP content from Google’s search results.

More importantly, your site is still being served from Google’s AMP cache just as before; all of this comes without any cost to your SEO or web performance.

Want to Learn More?

We will be hosting a webinar on Wednesday, June 19th at 10:00 am PDT “Building AMP Experiences that Drive Results” that will feature a broader understanding of AMP architecture and how AMP Real URL leverages Cloudflare’s serverless platforms to deliver signed exchanges. U.S. Xpress will also share insights and results that they’ve experienced having deployed Cloudflare AMP Real URL for their AMP content.

Register today!

Innovation in navigation on the web platform

Web Standards

In this third post in our series on contributing back lessons learned from AMP to the whole web, we’ll dive into the topic of innovating on the concept of navigation for web content. Additionally, we’re taking a look at how new primitives in the web platform are helping to make AMP simpler and “less of a thing”.

If you haven’t read the first or second post, we’d suggest to hop over there before reading this.

For as long as the web has existed, navigation meant that when the user clicked a link, the browser would paint white, and eventually it would paint the new page and update the URL bar. While this is an amazing model, more sophisticated interaction patterns have emerged on mobile. So far it has only been possible to implement these on the web using complicated “single-page app” patterns that use iframes for third-party content. Iframes are a great asset to the web platform. They enable composability, one of the SLICE special powers of the web. Unfortunately, the composability enabled by iframes inherently results in restrained user experiences. An iframe is like a fixed window: it lets you see into another world, but since it can’t be opened it doesn’t let you cross to the other side. The Chrome team took notice of an early exploration called iframe promotion which was designed to give iframes the ability to be navigated to. After a few rounds of discussion to build on this idea, the Chrome team identified a way to avoid the architectural complexity of a solution based on iframes and proposed a similar approach called Portals which allows for unfettered composability.

https://blog.amp.dev/wp-content/uploads/2019/06/portals_h264.mp4
Portals demo

We’ve seen a lot of interest about Portals from the web community, if only because they’ll allow for applications with the simplicity and robustness of having single pages per URL with the interaction fidelity of single-page apps.

With Portals we hope to be able to implement experiences like Google’s Top Stories carousel without having to rely on application layer solutions like AMP. Beyond that there are a lot of exciting use cases for Portals such as payment or single-sign-on solutions that are visually integrated into a website, but when activated show the user the true origin they are interacting with such as their payment provider.

Simplifying AMP

Putting all the things we introduced in this and previous posts together, one cool side-effect of the web platform getting more powerful is that we are getting ready to make large chunk of AMP literally go away and be replaced by simple platform primitives.

One example that is within arm’s reach is the removal of amp-img as a web component. With lazy loading, priority hints, and intrinsic sizing being implemented in browsers, it is possible to see a future in which there is no longer a need for the custom component–and while it’ll stick around for backward compatibility, it makes us incredibly happy to make AMP less complicated and instead focus even more on providing high level components in an easy to use framework, as opposed to the platform magic on top to make it all work.

Summary

A lot of progress has been made over the last year in advancing web standards along various dimensions. Above we highlighted the areas that the AMP team together with our friends from Chrome and Igalia have invested the most time on, but we also want to recognize that lots of other folks in the entire web community are doing awesome work on web standards which are helping make the web better every day. The AMP team is learning a lot from the web community and is currently most excited about isInputPending, display locking, and Animation Worklet.
Concrete proposals for privacy-preserving instant loading, innovative navigation, performance assessment, and development guardrails are now on the table and in varying stages of implementation. We hope that these projects are a step in the right direction to help all web developers create more delightful experiences regardless of implementation choices. We are eager to hear your feedback and can’t wait for the progress that will be made in the next year!

Posted by Malte Ubl, Member of the AMP Technical Steering Committee, Software Engineer at Google 

Save the Date – AMP Contributor Summit 2019

Developer Experience, Governance

This year’s AMP Contributor Summit will be held October 8-10, 2019 in New York City, and we need your help to help make it happen!

The AMP Contributor Summit is a technical summit for AMP’s open source contributors.  At the first AMP Contributor Summit last year more than 80 members of the community got together to meet face-to-face, talk about the latest developments in AMP and discuss where AMP should head into the future.  At the end of the summit 100% of those who responded to a post-summit survey said they’d recommend the summit to members of the community.

Starting this year the AMP Contributor Summit will be organized by the community with guidance from the Outreach Working Group.  We’re looking for volunteers to help with all of the aspects of planning a successful summit–everything from setting a theme to vetting talks to dealing with schedule logistics.

If you’re excited about bringing the AMP community together and would like to get involved in planning the summit, please let us know by Tuesday, June 11.  We’re planning on having an organizational kickoff meeting on June 12 and it would be great to have you there!

If you have any questions, reach out to mrjoro on Slack or GitHub.

For everyone in the community, please save the dates of October 8-10, 2019, and keep an eye out for details on applying to attend the summit soon!

Posted by Joey Rozier, member of AMP’s Outreach Working Group and Engineering Manager at Google


Debunking Common AMP Myths

Ecommerce, Websites

AMP is a great and easy way to build very fast sites. Since its launch in 2015, AMP has grown to power billions of pages across the web from tens of millions of domains. We’ve seen many examples of businesses in both the publishing and e-commerce spaces see success with implementing AMP on their websites. As the AMP project has grown, we have noticed a number of misconceptions & myths have arisen — so we thought we would take this opportunity to bust some of the most common myths about AMP.



MYTH: AMP is exclusively a Google project.
FACT: AMP is an open source initiative led by Google along with other companies and members of the web community.

AMP developers, companies and individual contributors participate in the development of this project: Over the last 3 years, AMP received contributions from 850+ contributors, 78% of whom were employed by companies other than Google, such as Twitter, Pinterest, Yahoo, Bing, and eBay. AMP moved to a new governance model that explicitly gives a voice to all constituents of the community, including those who cannot contribute code themselves, such as end-users, and representation from companies such as Twitter, Microsoft, Pinterest, The NY Times, Washington Post, AliExpress and many others.

MYTH: AMP only works from Google.com.
FACT: AMP pages are accessible across the web including any distribution platform and device.

Users can access AMP pages via links on distribution platforms (e.g., search engines) or sites. Some platforms (e.g., Google, Bing, LinkedIn, Twitter, Yahoo JP, Baidu and more ) will always serve AMP pages by default on mobile, when available. Some platforms (e.g., google.com, bing.com) take an extra step to cache your content for a much faster user experience.

MYTH: AMP is only for mobile.
FACT: AMP is designed with responsiveness in mind, to work across all screen sizes.

AMP is now just AMP, and does not stand for Accelerated Mobile Pages anymore. AMP isn’t just for mobile, it not only works across many device types including desktop and tablet but comes with super handy responsive design features. AMP is designed to be mobile friendly, and with slow hardware and high latency connections, the boost you get with AMP on smartphones is going to be felt a lot stronger than on desktops. It should also be understood that some features for third-party platforms (e.g., Google’s Top Stories carousel) may only be designed for the mobile experience. For more information, see this article.

MYTH: Every AMP page has to also have a non-AMP version.
FACT: An AMP page can be associated with a non-AMP version, but it’s not a requirement.

In some cases, you might want to have both a non-AMP and an AMP version of the same page, especially during the early phases of your AMP migration when you might want to also support testing AMP and non-AMP. But this is not a requirement and you don’t need to maintain two versions of the same content if you think AMP is the right solution for your business. You can choose to have one page, and that page could be an AMP page. This means lower maintenance costs to build, maintain, and monitor a single version of each document (as opposed to building both a non-AMP and paired AMP page). More details here.

MYTH: AMP landing pages are usually difficult to build.
FACT: It typically takes less than a week to build AMP landing pages for the majority of page types and use cases.

80% of development teams we contacted said they built AMP Landing Pages in less than a week. Having said that, AMP development effort varies on the page type. Some AMP pages can be built within a day, others take longer. Check out amp.dev for some free AMP templates to reduce your development time even further.

MYTH: AMP is only for publishers or static websites.
FACT: More than 60% of Google Search clicks to AMP pages go to non-news sites.

AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. When AMP first launched, it was initially adopted by publishers but now advertisers and e-commerce companies are also leveraging AMP to gain speed benefits. Read some of the success stories on our site.

MYTH: AMP doesn’t support interactive experiences.
FACT: AMP components now enable design customization and interactive experiences.

When AMP first launched, it had limitations to visual design. As the AMP project has grown thanks to the collaboration of the open source community, new components have been built that allow companies to do design customization and create interactivity. Today, most interactive experiences are supported:

  • Rich Media: there are ever increasing AMP components and anyone can contribute if something is missing.
  • Third-Party (3P) integrations: there are many available now and growing.

Companies such as BMWAliExpress and Rep from La Repubblica have been able to build great interactive experiences on AMP, with some using AMP for the majority of their site pages.

MYTH: AMP is not capable of supporting e-commerce websites.
FACT: AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.

When AMP first launched, it was initially adopted by publishers. As the AMP project has grown, new components have been built that allow brands to create interactive experiences. We are excited by the speed with which the internet is adopting and extending the AMP platform, and AMP can be used to build a fast, beautiful e-commerce experiences. For more details, check “Getting started with AMP for e-commerce” and “E-commerce At The Speed of AMP” blog posts.  

MYTH: It’s not possible to serve fresh content on AMP Pages.
FACT: There are many options to keep content on AMP pages up to date.

You can serve fresh content on AMP either relying on the default AMP Cache mechanism (stale-while-revalidate), using the update cache functionality, or using dynamic components (like amp-list). Many big e-commerce companies have demonstrated great success when implementation is planned properly.

MYTH: AMP is not secure/private enough.
FACT: The AMP framework is built to preserve privacy and ensure data security.

AMP landing pages are often served from the Google AMP Cache, which simply caches a version of your AMP landing page for purposes of validating AMP documents and for providing reliable, fast delivery. The Google AMP Cache as well as AMP JavaScript are served from cookieless domains that do not track users in any way. Additionally, AMP has a security review process that is routinely used when launching new AMP components. For further reading we recommend this blog post “Privacy and user choice in AMP’s software architecture”.

MYTH: AMP pages don’t convert as well as non-AMP pages.
FACT: Properly optimized AMP pages often perform better than their non-AMP equivalents.

Many advertisers and publishers have seen success with AMP as documented on amp.dev. A study from Forrester found that a site implementing AMP could expect 20% increase in sales conversion rate on AMP pages, 10% year-over-year increase in AMP site traffic, and 60% increase in pages per visit. There are a few reasons why an AMP page might appear to perform less well than an non-AMP page. If you are seeing poor performance, these are a few areas to explore:

  • Measurement and tracking issues: Make sure you’ve setup analytics on your AMP page using the following two setup guides.
  • Inconsistent landing pages: If AMP page looks different from non-AMP page, it can affect conversion rates. Landing pages should be identical both in appearance and in function in order to accurately assess AMP performance. Also make sure you offer user-friendly landing pages.

You can check this blog post for the things to keep in mind when testing and evaluating AMP.

Posted by Cemal Buyukgokcesu, Global Product Lead, Mobile Web, Google