Introduction
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 the 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,
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 the mobile web. For media and publishing companies, user engagement and mobile web performance have 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?
So, AMP is the way to build optimized pages for the 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 an optimized performance boost, AMP pages come with certain restrictions. These restrictions and / best practices are actually helping us in faster performance on the mobile web. The following are the key restrictions to be considered while building AMP pages,
- Only Inline-styles are allowed that too with a 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 fewer 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 the content consumers perspective, content consumers, readers all are benefited as they are now engaged in a better way with a 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,
In the browser, the following output can be seen. To see AMP is getting properly loaded, I checked in the console and it showed me AMP version as well.
Now, let's discuss the detailed technicalities of AMP in our next article.
Read more articles on HTML: