# Accelerated Mobile Pages

## Summary


To acquire and retain consumers, publishers have realized that content alone is not enough. To deliver rich user experiences, publishers therefore serve content along with interesting animations and engaging interactions. This might work on desktops but not on mobile devices where processing is limited and network connections are slower. Advertisements used for monetization might also worsen the experience. This is where AMP fits.  

Accelerated Mobile Pages (AMP) is a library to create web pages that load almost instantaneously. AMP pages are web pages built using HTML but with some constraints. It's supported by multiple platforms and browsers. Developers can reuse their web skills to create AMP pages. 

AMP is an open-source project started by Google. It's in active development and adoption is growing. There's also criticism that Google is trying to control the way the web evolves.

## Discussion

### What's the problem that AMP aims to solve?

In 2015, Facebook launched *Instant Articles*. Apple launched *Apple News*. Google followed by launching *AMP* later that year. These developments pointed to the fact that more and more users are accessing content from mobile devices but their experience is marred by the complexity of web technologies and developers using them inefficiently.

Pages load slowly. Content jumps around the page when big images arrive later, forcing rendering engines to recalculate the positioning of page elements. Annoying ads distract users from the main content. When users leave such pages, publishers miss out on readers and ad revenues.

Later research from 2016 also brought some insights about mobile web. 53% of users will leave a page that takes longer than 3 seconds to load. On a 3G connection, the average load time is 19 seconds. Each page makes on average 214 server requests, half of which are ad related. 

While the proprietary approaches of Facebook and Apple use native apps, AMP is a mobile web approach. AMP leverages the maturity of the web and its standards.


### If AMP is for mobile, is it irrelevant for desktop users?

AMP was designed with mobile web in mind but it could just as well be used for desktops. It's good to think of AMP as *mobile first* rather than *mobile only*. This means it's easier to develop responsive web apps across devices using AMP. 

In the early days of AMP, it made sense to have two versions of your site: non-AMP for desktops and the AMP for mobiles. While this might have enabled initial faster adoption, this had the drawback of sharing links across AMP and non-AMP pages, or showing a mobile-only AMP page to desktop users. The current suggestion is to have a single canonical AMP site that can be served to any device. 

As of October 2018, Google Search does not serve pages from AMP Cache when accessed by desktop users.


### Does adopting AMP improve Google search engine ranking?

Google will not rank a page higher just because it's AMP. At best, it will show a lighting-bolt icon next to the search result to indicate that it's AMP and will be served fast from AMP Cache for mobile web users. 

However, Google does rank pages higher up because they load faster on mobiles. This implies that having AMP is a good thing. In fact, WompMobile have noted 12% better ranking. 


### Could you point me to some example sites using AMP?

The official AMP site has published some case studies. These show that AMP has been adopted by news publishers, advertisers and e-commerce sites. Some of these include Readwhere CMS, Jagran New Media, CNBC, Wired, Gizmodo, The Washington Post, U.S. Xpress, Teads, Tokopedia, Carved, Wego, and Events Ticket Center. Other noteworthy sites using AMP include Vox and Tencent for news; Myntra and Magebit for e-commerce; Tasty.co for food and recipes; Iene for entertainment. 

In February 2018, AliExpress launched AMP-first mobile site. Mynet has built a *Progressive Web App (PWA)* that uses AMP pages. Spiegel Daily and Tasty.co have built their entire site using AMP, rather than have separate pages for mobiles and desktops. 

A number of platforms (content, ads, analytics) and vendors support AMP by providing custom AMP components or integrating AMP pages to their platforms. Examples are Facebook Pixel, Parsely, Flipboard, Medium, Twitter, Reddit, Pinterest, Weibo, Drupal, Wordpress, Soundcloud, Vimeo, YouTube, and Dailymotion. The biggest ones include Wordpress, Reddit, Bing, Ebay, Pinterest and Google. 


### What are the results after implementing AMP?

Washington Post reported +23% mobile search users who return within 7 days. Gizmodo reported 80% of traffic from AMP pages is new traffic and +50% impressions. Wired reported +25% click through rates from search results. Visitors to The Miami Herald spend 10% more time when coming via AMP pages. 

At Events Ticket Center, page load times dropped from 5-6 seconds to less than a second. At Myntra, India's largest online fashion retailer, bounce rate reduced by 40%. At AliExpress, load times reduced by 36%, orders increased by 10.5% and conversion rates by 27%. 

On the contrary, a Chartbeat study showed that only a third of publishers see increase in traffic. Rockstar Coders has said that AMP decreased conversions by 70%. It's also been noted that results depend on how well AMP is implemented. 


### What are the essential AMP components?

AMP consists of three core components: 

    + **AMP HTML**: This is HTML with restrictions. Basic HTML is extended with custom properties and elements. Custom elements are also called *AMP HTML components*. With these, we can implement common patterns easily without losing performance.
    + **AMP JS**: This is the AMP runtime in JavaScript. It renders AMP HTML fast. It optimizes resource loading, including asynchronous loading of external resources. Custom JavaScript is not allowed. It does prerendering for resources above the fold. It precalculates layout even before resources are loaded. It minimized style recalculations. It disables slow CSS selectors. CSS must be inline and limited to 50KB. Only animations capable of GPU acceleration are allowed.
    + **AMP Cache**: To get content to users quickly, they are served using Google AMP Cache, a proxy-based content delivery network (CDN). Cache also does page validation. This cache can be proactively updated via an API if original content changes.These components help AMP achieve its goals in areas of content, distribution and advertising. 


### What's the data flow for client-server interactions with AMP pages?

When AMP pages are published, search engines and platforms will crawl and index them as usual. For example, Google will identify these pages and caches them in its CDN. When visitors search on Google, Google will mark these AMP pages on the search results page. Meanwhile, Google will also download content in advance above the fold and prerender the page in anticipation of user click. "Above the fold" means that only content visible on the device's viewport on first load will be downloaded. When user finally clicks on the link in the search results page, the loading is fast.

Subsequent clicks on links shown on the served page will be served from the original domain. They do not go via the AMP Cache, that is, the CDN. However, Google Analytics has mechanisms in place to treat the session as the same one. 


### Could you list some AMP HTML components?

AMP HTML components start with the prefix `amp-`. For example, to include an image use `amp-img`. Some of them are built into the base library. Others are extensions and must be explicitly included. There are also experimental ones. 

Without being exhaustive, we mention a few components: 

    + **Ads & Analytics**: amp-analytics, amp-experiment, amp-pixel
    + **Dynamic Content**: amp-access, amp-bind, amp-form, amp-list
    + **Layout**: amp-accordion, amp-carousel, amp-iframe, amp-layout, amp-sidebar
    + **Media**: amp-audio, amp-img, amp-video, amp-youtube
    + **Presentation**: amp-date-countdown, amp-fit-text, amp-font, amp-story
    + **Social**: amp-facebook, amp-reddit

### What are the common criticisms of AMP?

The main criticism is that Google is doing this to increase its ad revenues and get around ad blockers that 16% of Americans use. Caching and pre-loading are not exclusive to AMP. 

It's been said that all AMP pages look the same. Cross-domain analytics is hard across AMP and non-AMP pages. When served from AMP Cache, the URL that visitors see is Google's, not the original domain URL. There's disagreement about the effectiveness of ad monetization via AMP pages. Because ad formats are limited on AMP, monetization has been slow. Despite this, publishers are sticking to AMP because they seem to have little choice: Google seems to rank AMP pages higher. 

Some see AMP as further fragmenting the web. Content must be formatted for the regular web, for Facebook Instant Articles, for AMP, and so on. However, there's been a change of mindset in which AMP can be served across all devices. 

AMP does not respect the platform on which pages are rendered. For example, scrolling on iOS is unnatural or search on Safari browser doesn't work. Hence, Google is really breaking the open web. 


### I already have a full-fledged site. How should I adopt AMP?

Creating an AMP page isn't about removing some things from the original page to make it faster. It's about serving the same content but in a manner that conforms to the rules of AMP. Among the errors that new developers make are using disallowed tags/attributes, and invalid/missing URLs. 

In sites such as WordPress, there are plugins to convert existing pages to AMP. By applying suitable customizations to the plugins, this can be an easy route to adopting AMP. Hand-coded AMP pages will give better user engagement. Do this first for important pages that are reached via search engines or other platforms.

When users are navigating within your domain, target pages will not benefit from the AMP Cache. This is where the use of **Service Workers** and **Progressive Web Apps (PWA)** can help. In fact, AMP can work nicely with PWA. Developers can choose from a few options.  


### What are some AMP resources for beginners?

The main AMP website is a good starting point for documentation, tutorials, guides and case studies. It also has the AMP Validator. To learn AMP via code samples, AMP By Example is a useful resource. To quickstart your project by reusing AMP templates, AMP Start is the place to find them. AMP Blog is the place to track latest news and updates. 

Since the project is open source, AMP code is available on GitHub.

Guides are available to help you integrate your AMP pages across various Google products.

## Milestones

Oct  
2015

Google announces **Accelerated Mobile Pages (AMP)** as an open source initiative to load content and ads faster on the mobile web. Google Search has integrated with AMP pages, with Google News to follow soon. About 30 publishers are partnering with Google to integrate AMP HTML pages. 

Feb  
2016

AMP brings in support for paywalls and subscriptions. Publishers retain control of the sign up and login process. This also the time when AMP pages are highlighted by Google Search as Top Stories carousel. 

Sep  
2016

Google Search results page now starts to surface AMP pages in standard search results. This means that these results link to validated AMP pages rather than to the original domain. 

Mar  
2017

Baidu, Sogou and Yahoo Japan launch AMP support. Cloudflare launches an AMP cache. 

May  
2017

Google Analytics enhances AMP support so that user sessions can be correctly tracked across AMP and non-AMP pages when served from the original domain. Meanwhile, Facebook announces that Facebook Instant Articles can also be published as AMP pages. This is to address publishers' frustration of having to format content for different platforms. 

Sep  
2017

Google introduces **AMP Client ID API**. Using this, Google can determine if a user arriving at the original domain is coming from an AMP page served by Google from AMP cache. This gives more accurate analytics in terms of unique users, session time, bounced rate, etc. In September 2018, this is further enhanced using **AMP Linker**. 

Oct  
2017

More than 4 billion pages and 25 million website domains are using AMP. The median time to load an AMP page via Google search is less than a second. A study by Forrester Consulting reports that AMP leads to +10% traffic with 2x time spent on page. For e-commerce sites, there's +20% sales conversions compared to non-AMP pages. On GitHub, the project has more than 10k stars. 

Feb  
2018

The project announces **AMP Stories** as a format for visual storytelling on the web. It also announces **AMP for Email**. Meanwhile, Google's earlier announcement of "same content" policy comes into effect. This requires that AMP pages have the same content as the original pages (also called canonical pages). This is to discourage publishers showing just a teaser on AMP pages and then asking users to navigate to the canonical pages. 

Oct  
2018

Bing launches AMP viewer and AMP cache.