AMP- ACCELERATED MOBILE PAGES by Google

29 / Jul / 2016 by Sunniya Maini 0 comments

Now-a-days, if anyone browse a website on mobile, everyone expect rich and HD graphics, smooth scrolling, fast animations, transitions to load quickly. Google introduces a new technique known as AMP. It’s a technique to build static content web pages that render fast. Its basic structure consists of three different layers:

  1. AMP HTML: HTML extended with custom AMP properties but with some restrictions for fast and reliable performance
  2. AMP JS Library: ensures the fast rendering of AMP HTML pages
  3. Google AMP Cache: used to serve cached Amp HTML pages

So AMP Project = AMP-HTML + AMP JS Library + Custom Styling + AMP Cache

Goals of AMP Project

  • Make pages fast
  • Easy to implement
  • Enable monetization
  • Embrace open web

Create first AMP Page:

Basic structure for AMP Page is below:

<!doctype html>
<html amp lang="en">
<head>

</head>
<body>
   
</body>
</html>

Code inside head tag:

<head>
<meta charset="utf-8">
<title>First AMP Page</title>
<link rel="canonical" href="http://ampproject.org/article.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>

<style amp-custom>
  amp-img.grey-placeholder {
   background-color: grey;
  }
</style>

<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

Code inside body tag:

<body>
   <h1>This is my First AMP Page</h1>
</body>

Note:
<!doctype html> is required at the top.
<html amp> to tell browser that we are using amp.
<link rel=”canonical” href=”_canonical-url_” /> it points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
<script async src=”amp-js-library”></script> it includes AMP JS library.

Some extended HTML tags:

  • amp-img: replacement of HTML img tag
  • amp-ad: container to display ad and a script is required
  • amp-pixel: used to count the page views by typical tracking pixel
  • amp-embed: used to embed elements
  • amp-video: replacement of HTML5 video tag

Styling/ Presentation

Styling is done by using common CSS, by using starting tag <style amp-custom>:

<style amp-custom>
  body {
    background: white;
  }
  amp-img {
    border: 1px solid black;
  }
</style>

Make sure there should be only one amp-custom style tag for styling. And even AMP page can have a single embedded stylesheet.

Validate AMP Page:

AMP is providing a validator built in browser only. No need to validate your code from other online validators. Just open your document in any browser through local server: XAMP/WAMP.
Add #development=1 after the url in address bar.
e.g http://localhost:8000/first-amp-page.html#development=1
Open Dev tool console in chrome browser and check validation errors.

Congrats you have created first AMP Page and tested locally.

You can explore more about this.

FOUND THIS USEFUL? SHARE IT

Leave a comment -