How To Get Started With Accelerated Mobile Pages (AMP)?
May you have heard about ‘AMP’ right? It has been thrown around on the internet lately. Recently, on 24th February 2016, Google’s Accelerated Mobile Pages have been launched.
But, do have any clue what is AMP? No?
Well, it’s simple. It is an accessible framework used to create fast-loading mobile pages. This entire open-source initiative was designed in order to allow publishers to increase speed for their mobile readership, without having to sacrifice any of the Ad revenue.
However, experienced web developers used to achieve the same results via intensive performance optimizations. But, with the help of AMP (Accelerated Mobile Pages), these optimizations have become easy to achieve without the alteration of the primary mobile web experience.
Wow, now that you know what is AMP exactly, let’s check out – how does it work?
Basically, the AMP consists of three parts: AMP HTML, AMP JS, and AMP CDN. The AMP HTML is a subset of HTML, in simple words. It has a couple of custom tags, properties, and many restrictions. But, if you’re already familiar with the HTML markup language, then I am sure that you won’t face many difficulties in adapting the existing pages to AMP HTML.
Secondly, AMP JS – It is a JavaScript for mobile pages. And most of its task is to manage asynchronous loading and resource handling. However, one thing to keep in mind is that it does not support third-party JavaScript with AMP.
Lastly, the AMP CDN – Is an optional Content Delivery Network that takes your AMP-enabled pages, caches them, and makes performance optimization.
Now, this is all good for us, but what for the developers? What makes AMP faster?
So, the first thing you need to know is that it’s like a diet HTML. Diet HTML? Yes, it means, certain tags of HTML can’t be used. Even the forms are out of the game. And, a streamlined version of CSS is also needed to be used. Additionally, JavaScript is not allowed.
So what’s the benefit? Well, this will turn the whole platform into pure speed and pure readability. And the images that you use in the design won’t be loaded until you scroll down into view. Yes, that’s the work done by JavaScript. Awesome, isn’t it?
Let’s crack the code for the puzzling question – How Can AMP Your Site?
For starters, you’ll be required to maintain at least two copies of any page. One is for normal users and the second is the AMP version of that page. And as mentioned earlier that AMP doesn’t allow third-party Java Scripts and Form elements. Therefore, you’ll not be able to have on-page comments, lead forms, and some other elements.https://www.youtube.com/embed/-H1DnE6rhJY
You’ll also have to rewrite the site template in order to accommodate these restrictions. For instance, your CSS in Accelerated Mobile Pages must be in-line and less than 50 KB.
Multimedia such as images, videos, and animations also must be handled specially. Images are required to utilize the custom amp-image element and should have explicit height and width. For animated images (GIFs), you need to use a separate amp-admin extended component. Lastly, to embed YouTube videos, you’ll be required to use amp-YouTube.
However, these tags aren’t that difficult to use. You just have to do proper planning on your site design.
How Should You Get Started?
There’s basically one thing you can do. You can start building the AMP pages of your website and ensure that these website pages are valid because it’s really strict on how you build the HTML.
The tags that you use for AMP must be in a certain order and at certain places. Also, you can’t use certain tags. And in case you use them, your AMP version of the site won’t be valid.
Therefore, to validate the AMP pages of your website, make sure you’ve planned it well. There’s also a tool built-in in Chrome. You can use developers’ tools in Chrome, look upon your AMP site, and ask ‘is this an AMP website page’ and it’ll tell you the issues with that page.
Recommended Reading
