The AMP project is a cross-company effort sponsored by Google to create mobile web pages with the fastest load times possible. It uses a proprietary HTML variant to offer a stripped down but lightning-fast UX. AMP pages load almost instantly, and get a favourable Pagerank bump to boot. In this tutorial, we go over the basics of writing an AMP page.
How many users bounce from a mobile page if it doesn’t load within 3 seconds? The answer, backed by Google’s own research, is a staggering 53%. If you’re at all serious about earning clickthroughs and conversions, you’ll take any opportunity to make your page more efficient. That’s where AMP comes in.
The Accelerated Mobile Pages project is a mobile optimization framework that lets you build fast, elegant pages. It does this by restricting a lot of tags and replacing some with its own variations, as well as a few other tricks like a 50KB CSS limit (which must be inline). It consists of three parts: (AMP-) HTML, (AMP-) Javascript and the Google AMP cache. The result is a stripped-down frontend that can lack some flair but has extremely fast load times and is proven to drive up traffic.
An AMP page differs from standard HTML in the following ways:
- Directly below the doctype, there must be either <html ⚡> or <html amp>
- Unlike in regular HTML, <head> and <body> tags are mandatory
- The first child of the <head> tag must be <meta charset=”utf-8″>
- There must be a link pointing to the non-AMP page. That’ll look like this: <link rel=”canonical” href=”MAINPAGE.html” />
- The regular page will also need a link to the AMP page. (e.g. <link rel=”canonical” href=”AMPPAGE.html” />)
- The following string as a child of thetag: <meta name=”viewport” content=”width=device-width,minimum-scale=1″>
- The AMP boilerplate code, which looks like this:
Putting it all together, you get something like the boilerplate from the official validator:
A few more changes before we really get into writing our actual markup:
The following tags do not work in AMP pages:
<script> <base> <frame> <frameset> <object> <param> <applet> <embed>
The following tags need to be modified:
<img> → <amp-img> <video> → <amp-video> <audio> → <amp-audio> <iframe> → <amp-iframe>
And one last major change:
CSS style tags must have the attribute <amp-custom>. Remember all CSS must be inline. AMP also restricts some CSS styles, though the list is much shorter than the restricted HTML:
- !important
- -amp- class and -i-amp- tag names
- any stylesheet links (with the exception of permitted custom fonts)
will not function on an AMP page. Additionally, the transition property and @keyframes style are restricted to only GPU-accelerated properties: currently this means opacity, transform, and -vendorPrefix-transform. Regarding permitted fonts, @font-face has no restrictions, but you if you want to use to bring them in, you can only get them from the following approved vendors: Typography.com, Fonts.com, Google Fonts, TypeKit and FontAwesome (requires BootstrapCDN).
And that’s it! That’s the basics. There’s obviously a lot more to it than that, but those tools will put you well on your way to making elegant and functional AMP pages. There’s an art to AMP: you’re trying to make a satisfying and effective UX with a restricted set of tools. If implemented poorly, it can hurt your site-any users you gained by loading quickly will be driven away by an ugly or unintuitive UI. Switching your mobile pages to AMP a great thing to do, but it’s really important to do it right. It’s fairly simple conceptually, but it will take time and practice for a developer to really get the most out of it.
If you need an AMP mobile site made, CodeClouds has the mobile / web development experts you need to get a fast mobile optimized site that ranks higher on Google. Consider hiring offshore developers from our dedicated team!
