AMP is targeted toward static pages like news articles. Even this page is an AMP page! It makes pages work better on mobile devices by only dowloading media when needed, making sure elements don’t do any jarring resizing, and a number of other things. First we’ll look at the benefits of writing your page using AMP.
Benefits of writing your page using AMP
✅ Google will boost you in search results (see below).
✅ All media is lazy-loaded: e.g. images only load when about to become visible.
✅ AMP tries to minimize page re-flows, so that content doesn’t move around, jarring users.
These are all great benefits, but they come with a price. Let’s look at how you need to structure your page to take advantage of AMP.
How AMP HTML differs from HTML
Here’s the bare-minimum AMP page, from the README:
Before any JS executes, AMP pages hide the entire
<body> on page load (by setting
visibility: hidden). There are a couple backup mechanisms that ensure that your content is shown even if an error occurs.
Moving on, here the differences to know about when building an AMP page:
<script>tags of any sort.
All CSS must be in a
<style amp-custom>tag or inline. No external CSS files.
AMP registers a number of custom elements which replace normal elements. The AMP elements require dimention information so that the page can be laid out before they’re loaded.
heightattributes. AMP elements’
heightattributes don’t perform the same way – they help AMP retain the element’s dimensions and page layout in different form factors.
Google Analytics (or any other analytics) won’t work, since it uses a
<script>tag. You must use include what AMP calls an extended component:
Those are the biggest differences. For a more thorough look at AMP, check out the AMP docs.
(Comments aren’t working because I haven’t gotten Disqus working with AMP yet. For feedback, please contact me directly.