AMP (Accelerated Mobile Pages) is an open source project initiative which aims to improve the performance of the mobile web. We are currently living in the smartphone age so all the websites should consider this on their design. Because of this, the AMP initiative was born. AMP is thought-out for mobile devices and with it you can make your website load faster and efficiently. AMP only loads the necessary elements for your page and ignores the ones that cause web pages to load slowly on mobile, specially JavaScript and third-party scripts.
Your website is faster with AMP but, how is this possible? AMP has a lot of components for images, videos or light-box, but over all of these. there are three main components: AMP HTML, AMP JS and AMP Cache.
AMP HTML is basically HTML, but with some restrictions for reliable performance and extending some properties of AMP. Though most tags of AMP-HTML look alike to the HTML tags, some HTML tags are changed for AMP-HTML tags. For example, the tag video on AMP-HTML turns to be amp-audio, and img tag in HTML becomes an amp-img tag on AMP version. It’s very important to include the script of AMP in your HTML, without this, your page can’t become AMP-HTML, it’s also important to put the normal version of your page. In this example we will see how does an AMP-HTML page look.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="example.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html> The tag <link rel=”canonical”> is the anchor to your page in normal HTML and the tag <script async src=“https://cdn.ampproject.org/v0.js”></script> enables your page to load on AMP version.
For more tags please go to AMP-TAGS and if you want to create your first AMP page you can go to create your first AMP HTML page.
AMP JS is a library for fast rendering of AMP-HTML. This library implements all of AMP’s best performance practices and manages loading of the custom tags mentioned above, all to ensure a fast rendering of your page. To see how AMP JS works in more detail, you can go to components.
AMP CACHE is a proxy-based content delivery network for delivering all valid AMP documents. With AMP CACHE is possible to improve page performance automatically because it loads the document, all JS files and all images from same place that use HTTP 2.0 for maximum efficiency. Also AMP CACHE comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn’t depend on external resources, like third-party JavaScript or external links.
With AMP CACHE you can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.
Knowing this, the big question is, WHY SHOULD I USE IT?. The answer is easy: with AMP you can make your website to be really faster and you can improve user experience, besides improving your SEO, because when you don’t have any errors in AMP version, Google understands that your website can be indexed, and it does. Google also says that a page on AMP version can load between 15% and 85% faster than non AMP pages and this can help you with your page positioning. Nowadays many websites are being built in AMP VERSION, this means that AMP is the future. So, choice is in your hands, if you want improve the experience of your user or if you still want that user of yours to keep waiting.
If you want to begin with AMP you may visit How to build the future web.