What is AMP and why might you be interested in it? The short answer is quite clear – it is a new way of web performance optimization for mobile pages so that users can access them instantly! But how does it work and what can you possibly gain by implementing it into your website? Check out this article to learn more!
Understanding AMP
To understand what AMP is exactly we need to know what its name stands for. “A” stands for Accelerated, “M” for Mobile, and “P” for Pages, so it’s Accelerated Mobile Pages! As its name suggests, this technology ought to accelerate web pages, but how exactly? AMP makes the load time in which a page shows up short. On average it takes 0.3 seconds for a human to blink. The median load time for an AMP page takes 0.7 seconds, which is even less than two blinks! WOW. Of course, that speed doesn’t come without a price – AMP has many limitations and restrictions that will be reviewed later in this article.
Accelerated Mobile Pages consists of three parts, which are:
- AMP HTML
- AMP JS
- Google AMP Cache
AMP HTML – that’s basically normal HTML extended with custom AMP properties such as AMP-specific tags, an e.g. amp-img tag which provides secret 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.
Google AMP Cache – it is a system based on a 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.
The AMP’s Purpose
Because mobile devices have become so popular, they changed the way of presenting information. Content has to be viewable on little screens and yet be user-friendly. That made web developers along with publishers search for technology that could help them properly optimize their content for mobile users. This is where AMP comes into play.
The longer the page loads, the higher the risk that the user will give up. There is this so-called “bounce rate” that indicates such users. One of the main reasons behind implementing AMP may be a possible reduction of this ratio by speeding up loading time! In the end, nowadays time is everything, and thus people are more impatient and accustomed to fast-paced content delivery. AMP’s purpose is to minimize the delay and bring new quality to presenting mobile content.
AMP – Inside out
There is no better way to get a glimpse at how AMP pages look like than to visit them on your own! Here are some exemplary websites that use AMP technology:
- http://www.bbc.co.uk/news/amp/38130838
- https://www.growly.io/how-to-make-hozier-give-show-in-your-room/amp/
- https://www.google.co.uk/amp/s/amp.theguardian.com/technology/2008/mar/09/blogs%3F0p19G%3De
- https://www.growly.io/how-to-make-hozier-give-show-in-your-room/amp/
- http://www.refinery29.com/amp/2013/07/50253/music-blogs
You can also check their structural code (press ctrl+u or F12) to see the differences between AMP HTML and regular HTML or just look at the basic code example below:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8"> <link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-
start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 norm
al both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@
-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from
{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}
to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:
none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>Basically as stated before, AMP code is a tweaked version of standard HTML. There are differences in comparison to normal HTML code such as a bolt “⚡” sign in <html> tag which stands for “AMP” or embedded AMP boilerplate which is an integral part of the AMP code. There are many others 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 much more….
If a technical aspect of AMP and its implementation caught your attention, you could find more information (such as source code or instructions) on GitHub.
AMP for Bloggers
If you have your website or blog based on WordPress, then implementing AMP is easier than you can imagine. All you have to do is the following:
- Download a proper plugin from GitHub and install it automatically, which shouldn’t take more than 5 minutes.
- Activate the plugin – the amp will be added to all your pages.
- 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:
RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|
ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]Of course instead of https://example.com we use our domain address.
- Edit your CSS with FTP tool (wp-content -> plugins -> amp -> template.php).
This way you can get ahead with your site and leave others behind. Take this opportunity and try to implement AMP to your site so you can gain more traffic and possibly higher positions in search engine rankings!
Search Engine Optimization Benefits
Even though Google denies that having an AMP webpage gives preferential search results, it does say that faster loading time will affect the rank. Besides, 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 fast since AMP is just being developed.
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. Quick loading time which is a big factor in SERP ranking (Search Engine Results Page) is another thing which can reduce bounce rate. Over time users could associate AMP webpages with the better page 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.
The Cowl Does not Make the Monk
The AMP project appears to be pure gold as it boosts loading time and visibility of your pages. But is it perfect? Since AMP is all about speed, it needs to be cached on Google’s cloud storage. This solution forces publishers to trade away control and features over their websites. 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 thing 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. What is also worth mentioning is the fact that even though AMP lets you use ads on your website, you are limited only to the supported formats. Because of this, you can still earn from ads, but whether you can keep the same level of revenue is another thing. Many publishers have mixed feelings on that matter, some of them kept all of their revenue while others experienced some drops. You might want to wait for a while for a situation to develop if you are worried about it.
Conclusion
So, as you can see, AMP is worth considering. Whether you should implement it or not is up to you. It can give your webpage a boost you’ve been dreaming of, but don’t forget that everything has its “price.” When it comes to people who should be especially interested in this technology, I can say that it’s for all those who have sites with static content (basically all kinds of blogs, news sites or culinary pages, etc.). AMP is not fully introduced to all markets yet, but, as the time flies, users will surely get accustomed to the new, instantaneous web experience and thus their search preferences might change. It will only get harder for publishers who haven’t implemented AMP yet to fight for users’ attention. Although AMP might pose quite a few dilemmas, it is suggested to keep an eye on the matter.
