CodeClouds Color Logo

APP DEVELOPMENT | 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 September 8th, 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

8 great iOS app design and marketing tips

APP DEVELOPMENT, IOS | 20 September 2019

8 great iOS app design and marketing tips

Saying Apple is a big deal is like saying the moon is a big rock—it’s true, but it doesn't even really begin to cover it. Apple is one of the largest companies in the entire world, and their proprietary OS is on millions and millions of devices.

10 Top Tips for Hiring an App Developer

APP DEVELOPMENT, IOS | 13 September 2019

10 Top Tips for Hiring an App Developer

When you're trying to hire an app developer, it can be tricky to find the one who's the right fit. Today, we go over ten top tips to help you find the developer of your dreams.