Implementing Accelerated Mobile Pages

What is AMP?

Accelerated mobile pages or AMP is an open source initiative that aims to consistently deliver fast page loads to mobile devices. AMP works by using the google AMP cache to serve content to end users.

Why AMP?

AMP’s benefits include

  1. A better user experience since pages load instantly
  2. A more likely chance that your page will show up near the top of organic Google search results
  3. Better relevancy scores on paid advertising since its optimal for mobile

Additionally we’re seeing a roughly 20% increase in time on page and lower cost per click on our adwords campaign since implementing AMP.

Implementing AMP

To get started with AMP all one needs to do is create a valid HTML5 page with the following requirements

  1. The html tag must include the ⚡️ attribute (amp will also work)
  2. Include a utf-8 charset meta tag
  3. The AMP JS library must be included as the second child of the head tag
  4. Contain a canonical link to the orignal non AMP content or to itself
  5. Use a viewport meta tag with width=device-width,minimum-scale=1
  6. Include the amp-boilerplate styles

In addition to that, AMP pages must by styled with inline css in a <style amp-custom></style> block and certain elements are not allowed in valid AMP pages. You can learn more by checking out the AMP tutorial

AMP Like a Boss

The above requirements mean that it’s no simple task to convert existing non AMP pages to AMP pages. One way to go about this is to simply create a flat AMP page every time new content is published, with inlined css and all disallowed elements replaced with AMP components like amp-img or amp-sidebar on every page.

The problem with the above approach, is that ain’t nobody got time for that. A much better solution is to generate AMP pages.

Here at Clever.ly, we recently implemented server side rendering so it was fairly straightforward to create an AMP template and then duplicate our existing pages to make AMP variants of those pages. There was some additional nuance like filtering out things that were invalid and ensuring that AMP component imports where in the proper place, etc. But the end result is a more maintainable flow, AMP page templating, and the ability to use our existing build processes and reuse code.

Leave a Reply

Your email address will not be published. Required fields are marked *