Open In App

Google AMP | Introduction

Improve
Improve
Like Article
Like
Save
Share
Report

Introduction: Google AMP is an open-source HTML framework, where AMP is an acronym for Accelerated Mobile Pages. It was created by Google and now is developed by AMP Open Source Project. It is optimized for mobile web pages and intended to help the webpages to load faster. 

To use Google AMP you must have prior knowledge of HTML, CSS and JavaScript. It is advised to learn the topics mentioned earlier before start learning Google AMP.

Official Website: https://amp.dev/

Official Coding Ground: https://playground.amp.dev/

 

Why use AMP?

Well, any user of your website would want the website should load fast and on the other hand, want the website to manage the website traffic, Google AMP solves both the problems. It is programmed in such a way that it not only loads the website with high speed but also manages the website traffic.

Advantages of Google AMP:

  • Google AMP pages are lightweight and also loads faster.
  • Google gives for priority to the AMP pages on Google search thus getting more users. They are listed in the carousel format at the top of the page.
  • Google AMP pages are responsive and adjust to browser thus making them mobile-friendly.

Disadvantages of Google AMP: As we all know nothing is purely advantages and the same goes for Google AMP. They possess the following disadvantages −

  • The publisher has to maintain two versions for their pages amp and non-amp which can increase the storage.
  • The user has to put additional efforts in converting the non-amp pages to an amp. As amp does not support custom JavaScript or loading of external JavaScript.

Basic Program: To write a program in AMP you must use <html amp> or <html âš¡> tag in your code instead of <html> tag as when the browser reads this it understands that the following is an AMP code.

HTML




<!-- Doctype declaration is required. -->
<!DOCTYPE html>
  
<!-- This tells everyone that this is an 
    AMP file, `<html amp>` works too. -->
<html amp>
  
<head>
    <!-- The charset definition must be the first 
       child of the `<head>` tag. -->
    <meta charset="utf-8">
    <title> Hello World</title>
    <!-- The AMP runtime must be loaded as the
       second child of the `<head>` tag.-->
    <script async src=
    </script>
      
    <!-- AMP HTML files require a canonical 
        link pointing to the regular HTML. 
        If no HTML version exists, it 
        should point to itself -->
    <link rel="canonical" href=
      
    <!-- AMP HTML files require a viewport 
        declaration. It's recommended to 
        include initial-scale=1. -->
    <meta name="viewport" content=
        "width=device-width,minimum-scale=1,
        initial-scale=1">
      
    <!-- CSS must be embedded inline. -->
    <style amp-custom>
        h1 {
            color: forestgreen;
        }
    </style>
  
    <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>
</head>
  
<body>
    <h1>Hello World!</h1>
</body>
  
</html>


Output:

This output is for iPhone 6/7/8



Last Updated : 16 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads