Accelerated Mobile Pages (AMP) : A New Approach to Mobile UI

Accelerated Mobile Pages Speed

Accelerated Mobile Pages, officially announced last October, is Google’s newest initiative to improve user experiences on mobile devices. Essentially, AMP (Accelerated Mobile Pages) HTML is a strict version of HTML to limit lagging or superfluous elements of a webpage whose main offering is content.

Accelerated Mobile Pages: A New Approach to Mobile UI

The gravity of the situation can be comprehended by the speculations that AMP is en-route to become the de-facto mobile ranking signal; a lot similar to the responsive web design requirement. As well as the fact that cached versions of the Accelerated Mobile Pages will be hosted on a Gstatic server by Google.

Currently, numerous content publishers and media agencies have harnessed the facility of Accelerated Mobile Pages to facilitate their mobile viewers. The most notable names include the New York Times, The Guardian, El País, Folha de São Paulo, La Stampa and The Washington Post as well as a lot more. In this scenario, it is essential for almost all online business owners to pay heed to Google’s call to improve mobile user interface.

Speed is of the essence

A page that takes more than a few seconds while loading, loses its appeal quite easily; on mobile phones this effect is exponentially increased.

“Studies suggest that page load times have a direct effect on the percentage of sales.”

From the SEO point of view, Page speed and time to first byte are determining factors for a site’s visibility. Therefore, user experience, business goals and visibility are all greatly affected by load times.

Apple News and Facebook’s instant articles are handling issues in a unique way and patented way that is closed to the public, those of us who do not have an army of coders and tech savvy professionals. Google’s Accelerated Mobile Pages (AMP) project, however, is an open source project that can be used by many publishers regardless of their own research.

The Features and Specification of AMP

AMP comes factory bundled with the best practices for web performance and futuristic features such as asynchronous calls and lazy-loading on components, no FOUC (flash of un-styled content) effects, in-lined CSS, minimal JS usage, a minimal tracking footprint and a default CDN for scripts. Beside these, using Accelerated Mobile Pages(AMP) gives caching features for mobile pages and processing for scripting. In fact all of those features that are required for fast rendering pages are set by default:

  • All components have width and heights declared to prevent repaints and FOUCs during asynchronous loading
  • AMP only allows specified Java Scripts and only one file that contains the bulk of it
  • Minimal HTML with a couple of new tags to minimize components
  • Only the most essential CSS is allowed

An Accelerated Mobile Page (Sample)

<!doctype html>

<html amp lang=”en”>


<meta charset=”utf-8″>

<link rel=”canonical” href=”__CANONICAL_URL__” >

<meta name=”viewport”         content=”width=device-width, minimum-scale=1, initial-scale=1″>

<style>body {opacity: 0}</style>


<style>body {opacity: 1}</style>


<style amp-custom>

{Your CSS goes here}


<script async src=””>




{Your content goes here}



Code Analysis:

AMP brings with it, a default style to add inline CSS and asynchronously called Scripts hosted on a CDN. Additionally, there is a view-port meta tag and a canonical link. You can add styles within the <style amp-custom> element. However, not all style elements from traditional HTML structures can be used in an AMP HTML file. Similarly, the AMP JavaScript library has built-in components and loads external resources behind the scenes, with extensive lazy-loading as much as possible. The page is painted all behind the scenes.

Frequently Asked Questions:

How is AMP HTML validated?

AMP HTML can be validated through Google Chrome’s DevTools. Validation can also be enabled by navigating to the page with the hash #development=1 appended to the end of the URL.

Why does AMP HTML have a CSS rule that hides the body tag?

The body tag is hidden by default using CSS opacity property when JS is not supported on the mobile client. Since the whole layout and CSS fonts are rendered and fetched on the back-end by AMP, the temporarily hidden body prevents FOUCs (Flash of Unstyled Contents), FOUTs (Flash of Unstyled Texts) and incomplete displays caused due to other problems. Thus, using AMP allows seamless display of content as soon as possible.

How are browsers notified that an AMP HTML page exists for the page?

HTML pages can be declared as canonical refs to an AMP page if duplicate content penalties are to be avoided. This way, the browser knows that a certain page is an AMP page of a certain HTML page.

<link rel=”canonical” href=”__MY_USUAL_HTML_PAGE__”>

How is an AMP HTML page referenced in a normal HTML page?

AMP pages are to be declared as an alternative type of content for mobile viewers. A format, where a new value for the <link> tag’s rel attributes, is added to the head of the matching regular HTML page.

<link rel=”amphtml” href=”__MY_AMP_URL__”>


A carousel with matching AMP pages previews is shown when searching for a specific new item.

How to embed an image in AMP HTML?

The typical <IMG> tag is not supported by AMP and substituted by the new <amp-img> element. AMP images must have height and width set as well as an attribution tag.

<div class=”image_container”> <amp-img   src=”pine-trees.jpg”   alt=”Pine trees”   width=”220″ height=”318″></div>

How is a video embedded?

Similarly, The video tag <video> is substituted by the <amp-video> tag in the AMP HTML version. The YouTube extension is a supported extension in AMP HTML to handle YouTube videos, however, like other extensions, specific JS needs to be called in the head of the page to support this feature. To support responsive scaling of videos; the width and height of your components should match the 16:9 aspect ratio.

What is the SEO advantage to using AMP?

Since an AMP page is a related version of a regular page, declared canonical. Search engines do not list both pages. Only the canonical page is indexed, unless or until a search is performed on a mobile device, in such a case, the link juice will again be transferred to the main page.

How can an ad from Google AdSense be displayed?

The amp-ad tag will be used to display an ad, this tag like all the others; needs to have specified width and height. To display an AdSense ad, the code will be of the following layout:

<amp-ad width=”300″ height=”200″ type=”adsense”{data-ad-client}=”ca-pub-1234567890123456″{data-ad-slot}=”1234567890″></amp-ad>

Currently, only A9, AdReactor, AdSense, AdTech and Doubleclick are supported as well as ads from a custom domain.

How to track visitors with Google Analytics?

Trackers are added using the amp-pixel-element to count page views. To use a Google Analytics tracker on an AMP page, Analytics Measurement Protocol is to be followed.

<amp-pixel src=”




The CID value (Client ID) is populated server side as a valid v4 UUID, the PAGE_TITLE and PAGE_URL need to be URL-encoded and the Z-parameter is implemented as a cache buster

Big Names that have shifted to AMP

Google’s Accelerated Mobile Pages initiative has been embraced by a substantial number of companies in the publishing and media industries. Listed below are a few of them, to emphasize the importance of this new format aimed to simplify mobile interface design.

Just how many components are available?

AMP components are divided into two sections; the built into components (those that are supported by the main JS renderer) and extensions (those that require calling a specific script for each component)

List of Built in components additions/ tag replacements:


  • <img>⇒ <amp-img>
  • <video>⇒ <amp-video>
  • <audio>⇒ <amp-audio>
  • {New tracking pixel to count page views}⇒ <amp-pixel>
  • {New container to display an ad}⇒ <amp-ad>

The list of extensions:

  • amp-lightbox: a lightbox
  • amp-image-lightbox: an image lightbox
  • amp-carousel: a generic carousel that displays multiple pieces of content along a horizontal axis
  • amp-fit-text: resize font to fit the content within the given space
  • amp-iframe: displays an inline frame element
  • amp-anim: an animated image that is managed during run-time, (for ex= GIF, JS driven SVG)
  • amp-Instagram: an embed that displays feed from Instagram
  • amp-YouTube: an embed that displays feed from YouTube
  • amp-twitter: an embed that displays feed from Twitter

Get the Most out of AMP

Essentially, success in the current scenario is all about speed, minimalism and user interface. To enforce AMP rules many restrictions can be expected, but these limitations are a harbinger of better and more engaging content presentations and a much better user interface.

This article discusses the steps required to understand the basics of AMP HTML and functional pages that include multimedia and digital interactions that enrich the overall user interface and the general presentation of your content publishing pages, be it blogs, news feeds or other media.

For more even more details on the AMP project visit the site on GitHub.

Great Resources By John Mueller

Curious about Accelerated Mobile Pages (AMP)? Here are a bunch of hangouts to get started with:

Existing, recorded hangouts:

Intro with Richard Gingras:

Technical overview with Emeric Studer:

Technical overview II, with Malte Ubl:

Upcoming office-hours hangouts (submit your questions!):

Analytics, with Rudy Galfi:

Paywalls, with Ashwin Limaye:

Ads, with Craig DiNatali:

About format innovation, with Rudy Galfi:


In the end, we wish you all the best for coping with the Accelerated Mobile Pages initiative and Google’s upcoming changes for 2016 that are rumored to bring better user interfaces and mobile friendliness to the general populace. For more innovative and newest news , keep following the blog from Pyxel where we believe in quality without compromise.

DO You think Web is getting more complex with these changes?

accelerated mobile pages- web developers

Struggling Web Developers

Let Us Know in The Comments Below.

  1. Soumya Roy 2 years ago

    Very well written post on a very important topic. Google AMP is going to be a major improvement on webpage’s speed on mobile devices and Google recently introduced Accelerated Mobile Pages error reporting on their search console tool. This is a real good and a thorough content and it’s going to be really helpful for all who are implementing AMP on their webpages. Thanks for sharing this.

    • Author
      Pyxel 2 years ago

      Thanks for your Review Soumya. Google AMP is a major change in upcoming times and something that deserves talking about.

Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


Log in with your credentials

Forgot your details?