How does AMP work?
AMP framework has 3 main parts:
AMP HTML
Think of AMP HTML as a leaner version of regular HTML. The AMP framework has
strict rules for the HTML tags you can use. To ensure fast page load, certain HTML
elements like forms are not allowed on AMP.
AMP framework also requires that you use a streamlined version of CSS. View the
full list of required
HTML tags for AMP framework.
AMP JS
To ensure fast page load on mobile platforms, AMP restricts the use of any
Javascript. The only exception is for AMP scripts, which are optimized with page
load acceleration in mind. What AMP takes away with JS, it provides with a library
of easy-to-implement components.
You can create animations, load content dynamically, modify layout, and more
using AMP
component library.
AMP CDN
Commonly known as AMP Cache, a critical component of AMP platform is its
proxy-based content delivery network (CDN). The CDN fetches AMP content and caches
it for fast delivery. By default, the AMP CDN caches all valid AMP content and
does not provide an option to opt out.
However, you can continue leveraging your own CDN provider on top of AMP cache to
customize your content delivery configurations.
Example of "Hello word" AMP page:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-word.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="title" content="This is my AMP page.">
<meta name="description" content="This is my Hello Word AMP page.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</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>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>