You may have heard about ‘AMP’ right? It has been thrown around on 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 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 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 much difficulty in adapting the existing pages to AMP HTML.
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?
Let’s crack the code for 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-anim extended component. Lastly, to embed the 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 in your site design.
How You Should 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 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 up on your AMP site and ask ‘is this an AMP website page’ and it’ll tell you the issues with that page.