Introduction To Accelerated Mobile Pages (AMP) - Part One

This is the first article from my AMP Series. In this article, we will take a look at an introduction to Accelerated Mobile Pages (AMP). In the next articles, we will look into the technicalities of AMP through examples.

How I came across AMP

Recently, I was searching on my mobile in Chrome browser for 'USA Elections 2016'. I searched for it and got to see recent news on a browser. Every news was presented in a widget format in a horizontal carousel as below,

AMP

What I noticed is most of the news was shown in a horizontal carousel with 'AMP'. Then I started researching about AMP.

Why AMP

Many of us might have had frustrating and slow experiences for mobile web. For media and publishing companies, user engagement and mobile web performance has been a critical factor for their monetization. To address such challenges, Google announced Accelerated Mobile Pages last year. In February this year, Google started supporting AMP through an open source initiative called Accelerated Mobile Pages Project.

What is AMP

HTML

So, AMP is the way to build optimized pages for mobile web. This allows us to render instantly and everywhere. For developers, AMP is nothing but the following,

  • Stripped down version of HTML 5.

    Lightweight HTML with extended custom properties.

  • Async loading of JS files and images.

    Lazy loading of JS file and images when needed and avoiding blocking of HTML page rendering.

  • Use of Google AMP Cache

    This is nothing but proxy based CDN for delivering AMP Pages. Cache validates AMP pages and delivered through HTTP 2.0.

Restrictions

With optimized performance boost, AMP pages come with certain restrictions. These restrictions and / best practices are actually helping us in faster performance on mobile web. The following are the key restrictions to be considered while building AMP pages,

  • Only Inline styles are allowed that too with maximum of 50 kb size.
  • Only async JavaScripts are allowed. If at all third-party JavaScript needed, those should be loaded through iframe.
  • Sizes of resources like images, ads should be specified statically in AMP HTML.
  • Minimize style and layout recalculations.
  • HTML Forms are not allowed.
  • AMP needs to be validated.

How better performance is on mobile web

As per Google, AMP pages load 4 times faster with 10 times less data than Non-AMP pages on a browser. (In our next articles, I would like to show the  comparison between AMP and Non-AMP pages)

Who benefits

News publishers, loggers who generate content and would like to optimize their mobile web experience. From content consumers perspective, content consumers, readers all are benefited as they are now engaged in a better way with faster load of information.

Similar Platforms

  • Facebook's Instant Articles
  • Apple News

AMP in Google Search Results

Now going back where I started, since Google has started highlighting AMP pages recently, I came across AMP from my mobile search.

Quick View of My first AMP Page

Just a preface to my next article in this series, I would like to show a very basic markup of AMP as below,

code

In the browser, the following output can be seen. To see AMP is getting properly loaded, I checked in console and it showed me AMP version as well.

run

Now, let's discuss detailed technicalities of AMP in our next article.

Read more articles on HTML: