Recently we’ve seen significant interest in the Accelerated Mobile Pages (AMP) project, and how it can improve speed and user experience across mobile devices.
Google’s mission is to deliver faster page rendering when you compare the same web page using regular HTML, CSS or JavaScript. Ever since Google launched the project over 3 months ago, every serious content publisher has been eager to find out more about AMP and what it can do.
Just recently, Google announced it has now indexed more than 125 million AMP documents from over 640,000 domains across the web, and is continuing to accelerate this process.
What are AMPs?
AMPs are built to make pages render seamlessly across mobile devices without having to wait for the page to load. The faster a page renders, the more users will engage with your content. This re-optimised version of HTML, also known as AMP HTML, strips out most of the components that cause web pages to render slower on mobile devices.
Accelerated Mobile Pages consist of 3 parts:
- AMP HTML: Goes above basic HTML and strips out elements for solid performance
- AMP JS: Ensures the fast rendering of AMP HTML pages
- Google AMP Cache: Taking your AMP-optimised content and caching it for fast delivery via a content delivery network
If you’re wondering what AMPs actually look like on a mobile device, then all you need to do is head on over to the brower on your mobile device, enter g.co/ampdemo into the address bar, then search for news-worthy phrases like “Kim Kardashian” or “Obama”, and you will see examples of AMP pages in action. When you click an article, you will see how incredibly fast they load on your device.
When your search for news-worthy phrases on your mobile device, you will see the AMP icon appear in the mobile search results as seen below:
Here’s an example of what a normal page looks like vs what an AMP looks like:
It might not sound sexy at first, but content publishers can’t wait to use it as it delivers a markedly better user experience. Google themselves are seeing great performance improvements, with pages created with AMP HTML loading between 15% and 85% faster than a non-AMP version of the same page.
What SEO benefits will AMP bring?
It’s still early days regarding the SEO impact of AMP. However, following the release of last year’s ‘Mobile Friendly Update’ (or “Mobilegeddon” as it was labeled), Google will be boosting the rankings of mobile-friendly pages via mobile search results if your website passes the mobile-friendly test (here).
Therefore it can be assumed that AMP will become increasingly important from an organic traffic perspective over time.
Should I be using AMP on my site?
If you are wondering whether or not you should get started with AMP, ask yourself: is Google News an important traffic source for my business? Do you currently have site speed issues on mobile? If you answer “yes” to either of these questions, now might be the time to get started with AMP.
In addition, answer the following questions:
Let’s get technical
The easiest way to get started with AMP is through WordPress. All you have to do is install a few plugins and all the technical jargon is dealt with for you – it’s that simple. Rather than creating your AMP manually from Google’s own tutorial here, which does require some coding skills, WordPress makes it a breeze.
There are many posts that show you how to install AMP on your website. However, we found Yoast’s tutorials (part 1 and part 2) to be the most useful, as they’re very knowledgeable when it comes to anything WordPress-related.
The plugins you will need are:
- AMP: This installs all the code needed to enable AMP for your site
- Glue for Yoast SEO and AMP: This plugin allows you to change your AMP page design, which is important for your brand and UX
Step 1:
Install and activate the AMP plugin, then go to one of your blog posts and enter /amp at the end of the URL to see your accelerated mobile page in action.
Step 2:
Install and activate the Yoast SEO AMP glue plugin.
Step 3:
Once you have installed it, head on over to the SEO tab via the WordPress menu, then to AMP settings. Click on the Design tab and change the colour to fit your brand. In addition, you can enter your logo, which will need to be 32px by 32px. This will appear at the top of your AMP post.
Step 4:
Once you’re happy with your branded colours etc, head back to AMP settings and click on the Analytics tab, which will allow you to enter the custom tracking code that enables you to track your AMPs in Google Analytics.
Step 5:
Once installed, you should start to see your AMP being indexed in your Webmaster Tools account. Navigate to “Search Appearance” > “Accelerated Mobile Page”
From here, you will be able to spot any additional errors that Google has identified and need fixing.
Step 6:
Erm… you’re done!
Final Thoughts
Even though the AMP project is still in its infancy, Google is encouraging more webmasters to implement AMPs on their site. Having faster-loading pages on your site will improve usability on mobile, plus all the AMP features Google has to offer will make it a worthwhile move.
To see how much of an impact this has had on speed, you can compare your standard page vs the AMP page by running a speedtest from one of the following tools:
As you can see below from one of our blog posts, the load time has decreased significantly:
Standard Page:
AMP Page:
