Accelerated Mobile Pages

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?
    Intro to AMP. Source: Google Chrome Developers 2016.

    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?
    Three core components of AMP. Source: PCITS 2017.
    Three core components of AMP. Source: PCITS 2017.

    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?
    A typical data flow with AMP. Source: Enge 2017.
    A typical data flow with AMP. Source: Enge 2017.

    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
AMP logo. Source: AMP Project 2018a.
AMP logo. Source: AMP Project 2018a.

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.

References

  1. AMP Project. 2018a. "Homepage." AMP Project. Accessed 2018-10-25.
  2. AMP Project. 2018b. "Case Studies." AMP Project. Accessed 2018-10-25.
  3. AMP Project. 2018c. "Showcases." AMP Project. Accessed 2018-10-25.
  4. AMP Project. 2018d. "Supported Platforms, Vendors and Partners." FAQ, AMP Project. Accessed 2018-10-25.
  5. AMP Project. 2018e. "What is AMP? Overview." AMP Project. Accessed 2018-10-25.
  6. AMP Project. 2018f. "How AMP Works." AMP Project. Accessed 2018-10-25.
  7. AMP Project. 2018g. "Components." Reference, AMP Project. Accessed 2018-10-25.
  8. AMP Project Docs. 2018. "Combine AMP with Progressive Web Apps." AMP Project. Accessed 2018-10-25.
  9. Bakaus, Paul. 2016a. "About that 'mobile' in Accelerated Mobile Pages." The Sea of Ideas, July 01. Accessed 2018-10-25.
  10. Bakaus, Paul. 2016b. "What Are Progressive Web AMPs?" Smashing Magazine, December 08. Accessed 2018-10-25.
  11. Bergen, Mark. 2015. "Google and Twitter Team Up to Offer Their Own 'Instant Articles' -- With a Twist." Recode, Vox Media, September 11. Accessed 2018-10-25.
  12. Besbris, David. 2015. "Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web." Google Blog, October 7. Accessed 2018-10-25.
  13. Besbris, David. 2017. "AMP: Two years of user-first webpages." AMP Project Blog, October 19. Accessed 2018-10-25.
  14. Besbris, David. 2018. "Three Years of AMP!" AMP Project Blog, October 22. Accessed 2018-10-25.
  15. Bohn, Dieter. 2016. "Google’s Instant Articles competitor is about to take over mobile search." The Verge, August 02. Accessed 2018-10-25.
  16. DoubleClick. 2016. "The need for mobile speed: Better user experiences, greater publisher revenue." Accessed 2018-10-25.
  17. Enge, Eric. 2017. "AMP-lify Your Digital Marketing in 2018." Moz Blog, November 21. Accessed 2018-10-25.
  18. Favell, Andy. 2017. "Accelerated Mobile Pages vs Facebook Instant Articles: Is Google winning the mobile war?" Search Engine Watch, June 17. Accessed 2018-10-25.
  19. Gara, Robert. 2017. "AMP for Ecommerce: A retailer's guide to Accelerated Mobile Pages." v, April 05. Accessed 2018-10-25.
  20. Google Analytics Team. 2017a. "Google Analytics is Enhancing Support for AMP." Google Blog, May 16. Accessed 2018-10-25.
  21. Google Analytics Team. 2017b. "Google Analytics is enhancing support for AMP on cache." Google Blog, September 05. Accessed 2018-10-25.
  22. Google Chrome Developers. 2016. "Intro to AMP (Accelerated Mobile Pages)." Google Chrome Developers on YouTube, February 11. Accessed 2018-10-25.
  23. Gruber, John. 2018. "Google Announces Plan to Improve URLs for AMP Pages, But Even If It Happens, Which Remains Uncertain, AMP Will Still Suck." Daring Fireball, January 08. Accessed 2018-10-25.
  24. Jose, Jeff. 2018. "Measuring user journeys across the AMP Cache and your website." AMP Project Blog, September 17. Accessed 2018-10-25.
  25. Limaye, Ashwin. 2016. "AMP: Supporting Paywalls and Subscriptions." AMP Project Blog, February 09. Accessed 2018-10-25.
  26. Mehta, Ashish. 2017. "Engaging users through high quality AMP pages." Google Blog, November 16. Accessed 2018-10-25.
  27. Moses, Lucia. 2018. "Google AMP beat Facebook Instant Articles, but publishers start to question AMP's benefits." Digiday, August 23. Accessed 2018-10-25.
  28. PCITS. 2017. "What Is Google Accelerated Mobile Pages And How AMP Affects SEO?" PCITS, September 12. Accessed 2018-10-25.
  29. Palser, Barb. 2016. "Google opens the AMP fire hose." Search Engine Land, October 03. Accessed 2018-10-25.
  30. Purswani, Sanjay. 2018. "Getting up to speed with Google Accelerated Mobile Pages." Hacker Noon, June 11. Accessed 2018-10-25.
  31. Ratcliff, Christopher. 2016. "Accelerated Mobile Pages (AMP): one year on – stats and infographic." Search Engine Watch, October 13. Accessed 2018-10-25.
  32. Silverstein, Jonathan. 2018. "Accelerated Mobile Pages: TOP 10 Issues of Implementation." Mobile1st, Springbox Labs Inc., January 18. Accessed 2018-10-25.
  33. Stephen. 2018. "Why *Not* Google AMP?" Medium, February 16. Accessed 2018-10-25.

Further Reading

  1. Purswani, Sanjay. 2018. "Getting up to speed with Google Accelerated Mobile Pages." Hacker Noon, June 11. Accessed 2018-10-25.
  2. Patel, Neil. 2016. "The Definitive Guide to Accelerated Mobile Pages (AMP)." Blog, April 27. Accessed 2018-10-25.
  3. Silverstein, Jonathan. 2018. "Accelerated Mobile Pages: TOP 10 Issues of Implementation." Mobile1st, Springbox Labs Inc., January 18. Accessed 2018-10-25.
  4. Makwana, Sam. 2018. "What Are Google AMP pages and How Do They Impact SEO?" Traffic Radius, May 09. Accessed 2018-10-25.
  5. Adams, Barry. 2018. "Google AMP Can Go To Hell." Polemic Digital, September 05. Accessed 2018-10-25.
  6. Jensen, Lars K. 2017. "Why I deactivated AMP and Instant Articles." Medium, July 10. Accessed 2018-10-25.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
Avatar of user arvindpdmn arvindpdmn
2
0
1590
DevCoins due to articles, chats, their likes and article hits are included.
2130
Words
1
Authors
2
Edits
0
Chats
2
Likes
4187
Hits

Cite As

Devopedia. 2018. "Accelerated Mobile Pages." Version 2, October 26. Accessed 2024-06-26. https://devopedia.org/accelerated-mobile-pages
Contributed by
1 author

Last updated on
2018-10-26 11:17:32