CodeClouds Color Logo

APP DEVELOPMENT, BLOG | 10 April 2019

How to AMPlify your mobile performance: AMP basics

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.

AMPlify your mobile performance

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:

AMP boilerplate code

Putting it all together, you get something like the boilerplate from the official validator:

AMP boilerplate code 2

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.

hiring offshore developers

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!

Originally written April 10, 2019. Last updated June 30th, 2020

 Views

Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup

Related Articles

Shared Servers, Virtual Private Servers, and Serverless Computing Explained

BLOG | 22 June 2020

Shared Servers, Virtual Private Servers, and Serverless Computing Explained

Today we’re going over three types of servers- Shared Servers, Virtual Private Servers, and Serverless Computing.

Practical Development: Can a Programmer Be Emotional?

TIP OF THE DAY, BLOG | 11 June 2020

Practical Development: Can a Programmer Be Emotional?

One of the most important skills an engineer can develop is being able to keep a clear head when everything is falling apart. Today we’re talking about techniques that can help you be a practical and effective developer.