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, the 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 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, 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, the 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 – It 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 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 You Can AMP Your Site?
For starters, you’ll be required to maintain at least two copies of any page. One for the normal users and 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.
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 much 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 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 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.