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.
<!-- 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