Friday, February 26, 2016
Before we go into any details on how to implement AMP, I think we should take a look back at why AMP was introduced and how this could affect the future of mobile web.
AMP (accelerated mobile pages) is an open source project introduced by Google and some large content publishers to improve mobile content reading experience.
It is an extension of HTML basically with its own tags and JS library, and you have to follow some strict rules to implement it.
It is targeted at content publishers for now like news websites, blogs etc. So if you publish great content regularly, this is for you.
Since unveiling of Facebook instant article and Apple news, everyone could see something from Google coming and not just because all tech giants like to compete with each other but because this was about mobile.
If you have been following Google, you can see they have been giving importance to mobile web for a while now, simply because mobile usage has surpassed desktop since 2013, and this is going to increase with time.
So even if Facebook or Apple had never started their respective “content viewing platforms”, Google would have done this anyway.
Most people now-a-days like to read new content on their tablets, or mobiles and most of the time, it is very annoying because of slow websites, or adverts, so we needed something for future to sort this problem out.
AMP will technically solve two issues,
Increase mobile web browsing or in-app WebView performance
Less use of resources on mobile so saving on battery and CPU
There are mainly two reasons for me why I would consider AMP.
As I said earlier that AMP will be much faster than regular pages, so you will have better mobile experience for your users. This will result in less user drop out.
According to kissmetrics study, 47% of consumers expect a page to load in less than 2 seconds, which means if you are making £100 per day from adverts on your content page, a 1 second delay could cost you £2500 in lost revenue.
This may not sound a lot but for bigger publishers who receive thousands of visitors, this figure could easily turn into millions.
Google has already said that AMP pages will be shown above the fold in search results which means if you have an AMP version of the page, you will be shown above all results.
Let’s see what I mean.
As you can see AMP results on the right are shown above the fold which is first thing a user will see when he searches for something.
Obviously if there are many AMP pages for the same keyword, Google will have its own criteria of showing them but since they are shown in a carousal, there is a chance you will get a place.
This could potentially increase the number of visitors to your content because not many publishers have implemented AMP yet!
Major publishers such as BBC, Daily Mail, Financial Times, Huffington Post, BuzzFeed, The Guardian, OutBrain, Washington Post, Wall street journal, TME and many more have already started implementing AMP.
If you are not a content publisher, by all means you don’t have to worry about it.
But having said that AMP is built on providing faster web to mobile devices, so I can’t see why you could not implement it in your mobile web development strategy.
It might be a bit hard without JavaScript as you are not allowed to use it but there are ways you could bypass that and provide a faster mobile experience to your visitors.
You could develop your whole mobile website on AMP, and since its open source and all major publishers are in it, there will be improvements as we move further.
Since there are many detailed technical posts available on how to write an AMP page properly and what HTML tags are allowed etc. I would not go into much details in this except few things you should keep in mind before implementing AMP.
To implement something in web or software development, you need to first understand how it will work.
Below is how AMP will work.
So you will have two versions of each content page, an AMP version and a non-AMP version.
When user enters a search term, Google will show them the results instantly from their cache servers if your AMP page is cached.
Google has stated that they will provide a cache solution to host all AMP pages at no extra cost so they don’t have to go to each website to get the page, so you want to implement Google cache for AMP, once it’s available.
Just think of AMP page as a cut down version of your regular page which will sit on google and whenever user enters a related term, Google will show it directly to the user.
You can have header, menu, branding, footers etc. So if user is interested in finding out more they can easily come to your website.
Do it in coding
Many open source projects like WordPress will have plugins available so if you are using an open source, all you need to do is install the plugin.
If you have a bespoke website, I would suggest to ask your web developer to do it in code, so you don’t have to create two pages for each content (which will be a bad way of doing it to be honest).
So let’s look at an example.
For each content page on my website i.e. blogposts, I have created a non AMP page (standard page) and an AMP page dynamically, which can be accessed by adding /amp at the end of URL.
If AMP html is required instead of normal HTML, I have replaced all standard HTML tags with AMP tags in code and removed extra bits from the content like script tags or inline styles in tags like <p> which are not allowed.
AMP is available on Github so you can check what’s available, and if you wish to be really geeky, you can contribute to the project as well.
I came across Turn your AMP up to 11 yesterday and really liked it, so once you are finished reading this, you can check the article for full details on AMP Html tags.
It’s hard to say really at this point because we haven’t even started with it yet. It’s all in development phase.
AMP was introduced in Oct 2015 so it’s only been few months but here are some positive facts which can be used to determine what future holds for it.
So if you look at above facts, you can safely assume that AMP is here to stay. Since the mobile usage is going to increase, we will see more traffic coming from mobile and tablets rather than desktops.
In fact, here is a screenshot from one of my projects
As you can see, we received more visitors on this website in a month from mobile and tablets, so it’s safe to say mobile searches have surpassed desktop.
So there is definitely a future for AMP and now is the best time to start implementing it as Google said in Oct 2015 that they will start to show AMP results in their mobile searches from Feb/Mar 2016, so you don’t want to miss out.
Conclusion
As you can see that mobile is the future and AMP is one step further towards better and faster mobile browsing experience.
There will be many people suggesting that this is response to Facebook article or Apple news but even if it is, it’s a start towards a better mobile future.
Are you interested in implementing AMP?
Do you have a custom design you need help with?
Or do you just want to say hi?
Ask me anything!