Accelerated Mobile Pages

24 Feb What is Accelerated Mobile Pages? From Code to SEO

Accelerated Mobile Pages – More people are using their mobile devices now, more than ever. There are whole new industries created such as mobile apps, wearable technologies etc. Traffic coming from mobile has also exceeded desktop traffic.

NUMBER OF GLOBAL USERS (MILLIONS)

Number of Global Users (Millions)

Number of Global Users (Millions)

40% of the people abandon a website if it doesn’t load in 3 seconds.

Google and Facebook have a lot of their users coming from places where the mobile internet speed isn’t that great. Due to which these two giants have started taking actions on providing best user experience to the users with slow internet speed connection. Majority of people experiencing slow internet speed are using 2G connections instead of using 3G, 4G, LTE or WiFi.

If you are reading this then chances are that you already are aware of Accelerated Mobile Pages. Google has launched AMP for mobile devices with slow internet connection. The whole point is to offer content to devices that have slow internet connection as the websites are becoming complex and there is an ever growing need of expanding.

But what exactly is Accelerated Mobile Pages? After some research and spending time on internet I feel better acquainted with knowledge regarding Accelerated Mobile Pages.

 

WHAT IS ACCELERATED MOBILE PAGES (AMP)?

Accelerated Mobile Pages is basically HTML extended with some custom Accelerated Mobile Pages (AMP) elements, it’s a subset. There are certain tags that you can use and some you can’t. For example image would become amp-image, video is replaced with amp-video, forms can’t be used etc. Even though it puts some restrictions for developers, it promises great speed gains which helps with SEO.

For the purposes of keeping the pages light and simple, author based JavaScript can’t be used! Good news is that you can use CSS! Most of it.

AMP HTML documents can also be used just like any other HTML document. So if you don’t want to double up your efforts, you can simply build AMP HTML for your website and upload them to server. I would suggest having both the versions for best SEO benefits.

AMP HTML Code Sample

AMP HTML CODE SAMPLE

List of important AMP HTML tags below –

  • <!doctype html>
  • Top level tag – <html > tag or <html amp>
  • <head> and <body> tags
  • Canonical tag – Point to the regular HTML version or itself if no HTML version exists using the <link rel=”canonical” href=”linkurl.html”>
  • <meta charset=”utf-8”>
  • Contain a <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside their head tag. It’s also recommend to include initial-scale=1
  • <script async srf=https://cdn.ampproject.org/v0.js></script> – To load AMP JS library from CDN
  • AMP boilerplate code

One important thing to note is that in order to offer performance benefits, transformations are allowed to be applied such as –

  • Replace image references with images sized to the viewer’s viewport
  • Inline images that are visible above the fold
  • Inline CSS variables
  • Preload extended components
  • Minify HTML and CSS

In addition to this, resources would have to declare their sizing up-front. This is done as all the resource loading is done using AMP library

 

USE AMP JS AND AMP CDN WITH AMP HTML

With JavaScript being so powerful that it can modify almost any aspect of the page, it comes with a disappointing fact that it can delay rendering of the pages by blocking DOM construction. AMP JS ensures fast rendering of the pages by offering custom tags (like mentioned in the example). Tags like img, video, audio and iframe are replaced with amp-img, amp-video, amp-audio and amp-iframe, respectively.

A lot of us are not developers and are limited when it comes to development skills. It is probably a good idea to contact a skilled web developer to assist you with AMP HTML

I DON’T HAVE A DEVELOPER AND USE WORDPRESS. HOW DO I CREATE AMP HTML?

Use AMP WordPress plugin! :) 

WHY DO WE NEED ACCELERATED MOBILE PAGES (AMP)?

Just like how building websites was for desktops 10 years ago, mobile is kind of at a similar stage. Issues like limited memory, network latency, bandwidth issues when there is congestion all add up to slow loading of pages. In addition to these, because of the nature of the mobile devices the screen sizes are smaller and inputting is difficult. Almost everybody has had an experience with a web page where it didn’t load within 3 seconds. The studies show that 40% people abandon the webpages if they don’t load within 3 seconds. This is a bad user experience and potentially loss of direct or indirect revenue for websites and/or search engines.

But I have made my website responsive so it should load!

Making a website responsive can potentially slow down your website but of course there are ways to make it faster. However, this means more load on the developers especially when the technologies are always changing and keeping up with them can be an issue. Developers are forced to use methods like pre-rendering and pre-fetching to reduce the latency.

There are debates going on in the industry around responsive site designs.

If you think about it, if responsive sites are not build with special care and are loading slow then your website will rank lower in basic search results. After all, site speed is considered as a ranking factor now.

 

What does it all mean?

AMP HTML is much more promising as Google can display the content deemed as appropriate based on the devices a user is using. For mobile devices where carousels take up all the space and is displayed one or two at a time at a swipe on the screen, AMP pages hold good chances to show up.

There are still many unanswered questions around monetization as AMP is supposed to produce light and simple version that doesn’t include author based JavaScripts. Many big publishers are on board with the idea of open-source code designed to make their pages load faster. Displaying ads on AMP HTML is still a mystery and it will limit their ability to monetize their AMP pages.

AMP is still in its infancy and more updates are expected in future.

2 Comments
  • Rahul Kumar
    Posted at 04:33h, 29 February Reply

    Thanks malika,
    Overall nice and full detailed post about AMP. I was searching about it on quora and I like your post more helpful. I have already installed AMP wp plugin. I want , if you time , then try these 2 plugins they extends the functionality of default AMP plugin.

    1. Glue for Yoast SEO & AMP

    (Makes sure the default WordPress AMP plugin uses the proper Yoast SEO metadata)

    2. Facebook Instant Articles & Google AMP Pages by PageFrog

    (The PageFrog plugin allows you to easily publish and manage your content directly from WordPress for Facebook Instant Articles (FBIA) and Google Accelerated Mobile Pages (AMP) with full support for ads and analytics.)

    Both works only with AMP Plugin (by Automatic) 😀

    • Malika Sharma
      Posted at 07:46h, 29 February Reply

      Hi Rahul,
      Thanks for your valuable input. They sound really interesting and I will definitely try these plugins. :)
      I didnt think about Facebook Instant Articles but now that you have mentioned, I think these plugins could really improve the experience.

      Cheers! :)

Post A Comment