AMP HTML Pages

Uncategorized

AMP HTML Pages

  • February 6, 2016

  • 13355 Views

AMP actually around three parts
1. AMP HTML
2. AMP JS
3. AMP CDN

AMP HTML :
the AMP HTML pages contain some custom properties of AMP . and if you want to see the example code we can see it it is look like this code …..
<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”hello-world.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>

AMP HTML page contains amp attributes and that is the main difference between the simple html page and the AMP page . in image tag we have to implement amp-img tag that will give our image a srcset support.
2. AMP JS
The AMP JS Basically works on fast rendering of the pages so that the pages load fast in the browser . The AMP JS loads the Resources that manage fast rendering of the pages. when the page load anything from the external it asynchronous and than with the help of this there is nothing to block and page loads even in low networks.

3. AMP CDN
the AMP CDN is one of the proxy CDN which transfer all the valid AMP Documents. The main role of CDN is to fetch the page , caches it and thus automatically the performance of the page improves. In this all the images, JS file and the html loads from the same origin and thus we will get maximum Efficiency.

Leave a Reply