The AMP project – has the new race begun?

Mobile devices have become so popular that they changed the way of presenting information. That made web developers along with publishers to search for technology that would help them properly optimize their content for mobile users. This is where AMP comes into play. The new way of optimization for mobile webpages.

AMP - high speed internet

What is AMP and what do we know about it?

AMP - which stands for accelerated mobile pages - is the new way of making it easy for web users to see their favorite content on the go. Basically, as its name suggests, AMP makes pages load much quicker, making it almost instantaneous. It is an open source initiative that results from many discussions between mobile page publishers, users and developers.

Accelerated Mobile Pages consists of three parts, which are:

  • AMP HTML
  • AMP JS
  • Google AMP Cache

AMP HTML - that's basically normal HTML that is extended with custom AMP properties such as AMP-specific tags, e.g.amp-img tag which provides srcset support even in browsers that do not support it yet. Of course most of the code is just regular HTML, so it is quite easy for a developer to implement changes making a webpage AMP ready.

AMP JS - the library of performance as one could say. It manages resource loading, ensuring fast rendering of a webpage. Thanks to it, all the external resources that come in are made asynchronous so nothing gets blocked from rendering. Besides, the AMP JS library includes such performance techniques as the sandboxing of all iframes or the pre-calculation of the layout of every element on page, so everything is being optimised timewise.

Google AMP Cache - it is a system based on proxy which is responsible for delivering all of the verified AMP documents. Thanks to AMP's magic, web pages that use this technology can be stored in the cloud or cache belonging to a third-party company or first-party one such as Google, and thus be available for a user instantaneously.

AMP Cache

One of the main goals for AMP technology is to lower the bounce rate that is usually caused by long loading times of web pages. Although it is more limited in comparison to regular HTML (in terms of presenting content), it also makes it so much faster. How much faster? Average time for humans to blink takes around 0.3 seconds. The median load time for an AMP page takes 0.7 seconds, which is barely over 2 eye blinks. WOW. According to that AMP will load your website in a flash giving users one more reason to stay on the site! 

Hello World!

Hello World - the AMP’s skeleton-code

As said before, AMP HTML is based on existing web technologies with that difference that it restricts them quite a bit. This sample code shows what’s necessary for an AMP webpage to be valid.

AMP source code

As you can see, there are various differences in comparison to normal HTML code such as bolt “⚡” sign in tag which stands for “AMP” or embedded AMP boilerplate which is an integral part of the AMP code. There are many other amp- components, just to name a few:

  • amp-ad – which tells how to display Ads in your AMP HTML files
  • amp-anim – which allows you to embed animations into your AMP HTML files
  • amp-analytics – used to measure activity on an AMP webpage
  • amp-audio – which replaces HTML5 audio tag
  • and many more….

For more information such as source codes or instructions can be found on GitHub. If you have website based on WordPress, you can simplify AMP implementation by using proper plugin. All you have to do is as follows:

1. Download proper plugin from GitHub and install it automatically which shouldn’t take more than 5 minutes.

2. Activate the plugin - amp will be added to all your pages.

3. Edit .htaccess file using FTP tool (e.g. Filezilla) to make sure that everything is working across the board. Just copy and paste the following code sample:

AMP Source code 2

Of course instead of https://example.com we use our domain address.

4. Edit your CSS with FTP tool (wp-content -> plugins -> amp -> template.php).

I'm AMPed

Are you properly “AMPed”?

Remember that proper canonical linkage is vital for your webpage, especially in the case when you publish content for desktop and mobile users. Without it, your AMP content might not be discovered by a search engine! If it has both the AMP and normal versions, then the normal one should have the following code embedded:

AMP source code 3

while your AMP page should link to the canonical version of the page other than AMP one:

AMP source code 4

The stand-alone AMP pages should show up in the canonical linkage:

AMP source code 5

Also, if you are wondering whether your web page is AMP valid, you can always try to validate it with an AMP validator. There are plenty validators online and they can be easily found on Google. Of course, you can always use the official one that is available on the AMP project site.

AMP Project Validator

Another useful feature is a report recently added to Google Search Console under the Search Appearance tab for AMP errors. 

AMP in Google Search Console

Google said that the “AMP error report gives an overview of the overall situation on your site, and then lets you drill down to specific error types and URLs. This process helps you quickly find the most common issues so that you can systematically address them in your site’s AMP implementation (potentially just requiring tweaks in the templates or plugin used for these pages)”.

Ads on AMP

One might ask – “What about the advertisement?” – and the answer is that more than 70 advertising technology providers have joined the fray to make sure that the proper technology is implemented and publishers can advertise properly without lowering the UX. Of course there is still a question about traffic statistics. It is known that comScore, Adobe Analytics, parse.ly, CartBeat, Nielsen, ClickTale and Google Analytics have started to work on the matter so AMP pages can have full access to properly evaluated traffic statistics in real-time. AMP lets you monetize AMP pages just like regular HTML pages, so you can keep most of your earned revenue. Sadly, since publishers can’t implement all of their standard ads on AMP pages (e.g. custom pop-up ads), a lot of them experienced drops in revenue from monetization to some extent. Basically AMP is meeting with mixed feelings from publishers in this aspect so the right thing to do right now might be just to wait a bit and see how the situation develops in the near future.

Also, it is worth mentioning that early studies have shown that ads on AMP are more viewable and users seem to get engaged and more responsive to them than to ads on normal pages (https://image.slidesharecdn.com/ampaboveandbeyondadamgreenberg-160920160309/95/amp-above-beyond-by-adam-greenberg-24-1024.jpg?cb=1474987500). 

SEO benefits

Even though Google denies that having an AMP webpage gives preferential search results, it does say that faster loading times will affect the rank. Beside that, there is the Google News carousel which is given priority above all of the standard results. It is featured at the top of mobile search pages so your page might get to the top really fast since AMP is just being developed.

AMP examples

The more visible the content is, the higher the chances are that users will remember your web page and brand. Thanks to that there is a higher chance that they might visit your standard, desktop webpage version which may also affect your traffic statistics. There is also that aspect of quick loading time which is a big factor in SERP ranking and which may possibly reduce bounce rate. Over time users could associate AMP webpages with better experience and favor them over normal sites which could affect search preferences in general. All in all, looking at the current trend it might be viable to invest into AMP technology.

All that glitters is not gold

The AMP project appears to be pure gold as it boosts loading time and visibility of your pages. But is it actually perfect? Since AMP is all about speed, it forces publishers to trade away control and features. Also, it is just another version of your webpage so basically that means that some extra work needs to be done. Oh, and it forces you to use full HTTPS.

Another issue is fragmentation of the internet because of multiple webpage standards. Google promotes its AMP, Facebook - Instant Articles, who knows what else will come in near future. The very purpose of internet was to have one website available to all kind of devices and viewable by anyone. Now publishers need to implement various versions of their websites so they can be accessed through e.g. facebook instant articles or Google’s AMP carousell. Besides, Google plans to expand the delivery of AMP links beyond its carousell to all mobile search results. That basically means non-AMP websites will get pushed back to the internet void. (http://www.theverge.com/2016/8/2/12349524/google-amp-instant-articles-search-results-mobile-web-fragmentation)

Worth mentioning is that although AMP is getting constantly updated to support more and more extensions, it is still very limited. For example AMP technology is not suitable for eCommerce since it doesn’t support forms.

Jerzy Kanzawa

Yasu helps with on-page optimization. His primary goal is to improve website’s position in search engine ranking by eliminating technical and structural bugs. He is also responsible for creating keyword research reports and constructing information architecture for a website. In his spare time he loves to cook, watch movies and taste local cuisine whenever he travels.

jerzy kanzawa