AMP is a framework based on 3 principles :
1. usage of AMP-HTML (a subset of HTML) instead of HTML
2. usage of AMP-JS (framework) instead of “free style” JS
3. usage of AMP-CDN (Google, CloudFlare…) while your original files can be hosted on your server
Some key concepts
Javascript
JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page rendering. To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript.
AMP pages can’t include any author-written JavaScript. Instead of using author-written JavaScript, interactive page features are handled in custom AMP elements.
AMP pages allow third-party JavaScript but, only in sandboxed iframes. While third-party JS is allowed in iframes, it cannot block rendering.
External resources
External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.
CSS
CSS blocks all rendering, it blocks page load and it tends to get bloated. In AMP HTML pages, only inline styles are allowed.
Fonts
The AMP system declares zero HTTP requests until fonts start downloading. This is only possible because all JS in AMP has the async attribute; there’s no HTTP request blocking the browser from downloading fonts.
Prioritize resource loading
AMP controls all resource downloads: it prioritizes resource loading, loading only what’s needed.
AMP also prefetches lazy-loaded resources. Resources are loaded as late as possible, but prefetched as early as possible. That way page elements load very fast but CPU capacity is only used when resources are actually shown to users.
When AMP downloads resources, it optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if they are likely to be seen by the user (above the fold) or if the user is likely to quickly scroll to them.
Example HTML page
<!doctype html>
<html lang="en">
<head>
<title>Your website title</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
Your header
</header>
<article>
<h1>Your article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit tristique ligula accumsan eu.</p>
</article>
<img src="yourImage.jpg">
</body>
</html>
The example HTML page with basic AMP elements
The minimum elements for a valid AMP page are : the amp attribute, charset, canonical, viewport, the AMP boilerplate and the AMP library.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<!– If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself –>
<link rel="canonical" href="your_page.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!– The AMP boilerplate
The first tag makes the contents of the page invisible until the AMP JavaScript library updates the body tag to be visible again once the page’s content is ready to render. The second tag reverts this logic if JavaScript is disabled in the browser. –>
<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>
<!– CSS : external style sheets are not allowed in AMP. Additionally minify the CSS inline code–>
<style amp-custom>
body {width: auto; margin: 1em; padding: 1em; }
/* etc */
</style>
<!– Wherever possible custom JavaScript functionality (as the code below) should be replaced by the built-in AMP-JS components. Including custom JavaScript via an iframe should be considered as a measure of last resort.
<script type="text/javascript" src="base.js"></script>
–>
<title>Your website title</title>
</head>
<body>
<header>
Your Header
</header>
<article>
<h1>Your article title</h1>
<p>Lorem ipsum dolor sit amet, egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<amp-img src="yourImage.jpg" width="266" height="150"></amp-img>
</body>
</html>
AMP Validators
Conclusion
Speed improvement is (always) a good thing !
But the AMP implementation has some downsides, such as :
The CSS inline code in each file is more complex to manage than managing a master CSS file (with maybe additional specialized CSS files).
The declaration of the dimensions for images in the HTML file is a step back. This will also cause more effort to manage changes.
The use of JavaScript is limited of the AMP components. If you need additional functionality, or custom JS, you have to use iframes.
Speed improvements outside AMP
— choose a fast, reliable host for your Website
— use a CDN (Content Delivery Network) and/or a Web Performance Optimization (WPO)
— optimize images (resize, compress, define the size, use CSS sprites…)
— validate all code
— use semantic HTML instead of <div>
— delete unused CSS and JS code
— define a nice cache strategy
— use compression (gzip, deflate)
— minify HTML, CSS, JavScript…
— implement asynchronous JavaScript
— use the lazy load technique
— implement HTTP stuff like “character set” and “Vary: Accept-Encoding header”
If you want more details about speed improvement outside AMP, read the following articles :
Speed up WordPress on shared hosts
Website speed tweaks for shared hosts
– get post updates by subscribing to our e-mail list
– share on social media :