An introduction to Google Accelerated Mobile Pages

What would you do if you open a site and it's NOT loading for five, seven or even ten seconds?

You would lose interest and might not return back, you won't recommend it to anyone, and might talk about the bad user experience you had with it.

This is the main problem when we end up making pages that look really good, but fail to engage users and generate revenue. In this mobile first world we can’t ignore this issue. Google's Accelerated Mobile Pages(AMP) is here to help us solve this issue.

What is AMP?

AMP or Accelerated Mobile Pages are used mainly for boosting up a site's presence on Google.

If a user searches website content on mobile and its related accelerated mobile page exists, Google will show AMP cards as shown in image below.

On mobile search, the AMP icon helps users identify pages that load quickly and smoothly. When users select an AMP page, Google Search retrieves the page from Google AMP Cache, which makes it load faster.

These AMP pages will be different from the original pages currently on the site and would have an "amp" parameter in their URLs.

How does it work?

Technically AMP works with the help of some components that function closely and help conversion of a Drupal pages into pages that comply with the AMP Standards.

AMP HTML - A lot like a regular HTML that loads in any browser, AMP HTML has a amphtml tag attached to the metadata of this regular HTML along with a query parameter

<link rel=”amphtml” href=” node/1?amp” />
<link rel=”canonical” href=” node/1” />
<link rel=”amphtml” href=” /myblog?amp” />
<link rel=”canonical” href=” /myblog” />

This amp tag helps search engines recognise an AMP.

AMP CSS - This should ideally be inline and there is a limit to the size of this CSS. You can't go on writing long crazy CSS. AMP poses this limit because the the whole point is to reduce the weight of the page and any external or big CSS would eventually defeat this purpose. 

AMP JS(Runtime) - AMP does not allow any third party or author written JS. There are AMP tags defined which get converted to interactive elements during runtime. So all the JS comes from AMP runtime.

AMP Library - If there is a body of a Drupal node, which has, let's say WYSIWYG editors to them, then all the fancy stuff like share widgets, embeds etc. may go in here. Here comes the role of AMP Library to convert this HTML into AMP specific tags.

For normal HTML tags there are AMP specific tags like <img> getting converted to <amp-img>.

Some other AMP tags :
<video> is replaced by  <amp-video>
<audio> is replaced by  <amp-audio>
    <iframe> is replaced by  <amp-iframe> 

AMP Cache helps load the page quickly and smoothly.

What are the benefits?

I believe it's worth trying because your customers would have an immediate benefit from it. aster pages mean increased visibility, engagement, and shareability of content on mobile devices.

You can track the user enegagement too ,because AMP comes with analytics integration.

AMP provides some useful tags for this 
<amp-analytics> 
<amp-ad> 
<amp-pixel> 

It's seen that AMP is around four times faster than a normal HTML page.

What decisions to make while choosing it?

AMP will be used to accelerate mobile pages and those page should ideally be very light weight, and for that we need to limit the components for mobile pages. So we have to pay attention to things like if there is carousel on desktop then is that carousel is useful on mobile as well.

Also external JS and CSS make the pages heavy. So components that are rendering from external JS and using external CSS are again not recommended as they would defeat the original purpose of AMP page.

Along with technical decisions of going with limited CSS, JS, and no external libraries, there's also a business decision to be made. We need to decide what are the critical components that need to go in the mobile page. For example, if the desktop version has a login block, do you include that in the AMP page? The answer will depend on whether people on mobile actually ever use this block. So issues of usability and user-experience play a major role in helping decide what stays and what goes.

AMP is mainly for content driven sites to give a good user experience, and not for sites that have a lot of JS and external library interactions.

So that was a brief look at creating AMP pages for Drupal sites. You might also want to check out this webinar on how Google AMP compares with FB Instant articles, and how to choose between them.