How long does your site take to fully load on a mobile device?
Did you know that about 40% of people will abandon your site if it takes more than 3 seconds to load? They’ll just go somewhere else.
-Yes, that’s true.
But not only the users are expecting your site to load really fast when they visit your pages, but also Google understands that this is an important factor when it comes to user experience.
That’s why it’s very important to ensure that your site is loading fast enough in both mobile and desktop version if you want to have high rankings on Google SERPs.
This article will walk you through the process of how to enable Accelerated Mobile Pages on your WordPress blog to improve your mobile rankings and as a result of that, increase your organic traffic and revenue.
But first, let’s cover the basics…
Table of Contents:
What is AMP (Accelerated Mobile Pages)?
AMP or Accelerated Mobile pages, is a project implemented by Google and other partners with the main purpose of improving the loading speed websites sites in smartphones.
Google understands that slow loading speed could have a huge impact on the user’s experience, and they also understand that nowadays people use their smartphone to navigate on the internet sometimes more often than their computers.
If your site is not appropriately optimized for Mobile devices, this makes the user’s browsing experience go down considerably, especially when it comes to loading speed. Therefore, Google is putting all the resources at your fingertips to try to solve this problem.
How does AMP Work?
AMP technology takes a page that’s already optimized for mobile devices and it filters all the large HTML code of the page in order to eliminate the parts of the code that are not necessary and would slow down the page, this way the pages can load almost instantly.
The way in which AMP optimizes the HTML code of your pages has even adopted its own name, they call it AMP HTML, and it can be recognized by the following unique elements:
- AMP HTML: A markup language like HTML but with custom AMP properties and some limitations and properties in which only permitted HTML tags can be used. For example, the photo tag, IMG, can be used with the IMG-amp form (which allows you to post photos but with less weight, so they are loaded faster).
- AMP Cache or CDN: This is a proxy-based Content Delivery Network (CDN) that stores a cached version of AMP pages, optimize them and delivers them faster whenever it is required.
What are the Benefits of Implementing Accelerated Mobile Pages?
According to a study ran by Kissmetrics, if a website does not appear on the user’s screen after 3 seconds, 40% of people will just run out of patience and go somewhere else.
Another recent study performed by Google DoubleClick shows that 53% of user bounce from the sites that take more than 3 seconds to fully load. That means more than half your audience will never get to see your content if your site takes more than 3 seconds to load.
If you Enable Accelerated Mobile Pages (AMP) on your WordPress site, you’ll be able to fix this problem on by getting your mobile web pages load instantly.
Just to give you an idea, take a look at the following examples:
Since I’m using a mobile responsive child theme by Genesis Framework my blog is already optimized for mobile devices and loads pretty fast already without AMP.
However, you also have to consider the fact that the internet connection of the user, could also play a very important role when it comes to loading speed. That’s why you have to strive for the lowest possible loading time.
As you can see the normal version was loaded in 1.9 seconds, the page size was 2.5 MB and it required a total of 188 server requests for the page to load completely.
In the other hand, the AMP version was fully loaded in lighting 0.76 seconds, the page size was reduced to only 865.8 KB and it required only 39 server requests for the page to load in full.
Accelerated mobile pages can be identified on SERPs by looking at the small amp badge in the bottom left corner of the search result.
As the mobile users get used to seeing these results and know these ones load faster, they’ll be clicking on these results rather than the ones that are not AMP optimized.
Here are some other concrete benefits of implementing Accelerated Mobile Pages (AMP):
- AMP pages are loaded up to 85% faster than conventional mobile pages.
- The average loading time of AMP pages is way below one second.
- Data expenditure is up to 10 times lower and also reduces significantly the battery use.
- Improved mobile search engine rankings.
- Higher conversion rates.
How can I Enable Accelerated Mobile Pages on my Site?
You can enable Accelerated Mobile Pages (AMP) by adding the amp link meta tag in your site’s HTML tag. This will enable search engines to recognize the amp meta tag and serve those pages in AMP format.
However, this is not something very easy to achieve manually. That’s why I’ll recommend using a WordPress plugin that will do all the work for you and you’ll only have to do some basic tweaks here and there if you want to style your AMP pages a little.
There are two plugins that I’m going to recommend in order to enable Accelerated Mobile Pages on your WordPress site, and they both work absolutely great, although there are some important differences:
1. AMP for WordPress by Automatic.
As you might already know Automattic is the company behind WordPress, they have developed their own plugin in order to support Accelerated Mobile Pages in WordPress.
This plugin will allow you set up your AMP pages with very little styling and customizations options, this is basically the downside of the plugin as you won’t be able to display any banner ads or signup forms.
If you don’t display any banner ads nor use any kind of fancy forms, then this will work perfectly fine and your site will be super fast on mobile devices.
Setting your AMP pages with this plugin is very simple, you only need to follow a couple of easy steps:
- Download and install the AMP for WordPress plugin by Automattic.
- Activate your plugin and go the plugging settings in order to sure to disable AMP for the pages. This way your landing pages and product pages will remain the same.
- Now you can go to Appearance>>AMP and select your preferred color for your AMP header.
- Download and Install the plugin Glue for Yoast SEO & AMP. This plugin will help you make sure that your AMP pages use the Yoast SEO metadata appropriately.
How to set up Glue for Yoast SEO & AMP Plugin
Once you’ve downloaded and installed the plugin, it will add new AMP menu under the Yoast SEO plugin, you can access the AMP settings by just clicking on it.
Make sure to enable the features for all posts as shown in the image below.
In the design tab, you’ll be able to add some style to your AMP pages. You can add your AMP icon, add a default feature image (This will be displayed when a post doesn’t have a featured image), you can customize your AMP header and link colors and also add some extra code and CSS.
You’ll also be able to add your Google Analytics tracking code under the Analytics tab.
Let’s take a look at the second plugin that you could use in order to enable Accelerated Mobile Pages on your WordPress site.
This is a more advanced plugin which comes with a whole lot of great features to customize your AMP pages. Using this plugin you’ll be able to upload your custom logo to your AMP pages.
You will also be able to include social share buttons, Related posts, advertisement, contact forms, enable/disable notifications, comments (Including Disqus and Facebook), open graph meta tags, etc.
This is a free plugin, but it also offers a few paid extensions which will allow you to add some other features, but maybe at the cost of some loading speed sacrifices since you’ll increase the size of the pages.
Here are some simple steps to implement Accelerated Mobile Pages using this plugin:
- Download, Install and activate the AMP for WP plugin.
- Now you can go to the plugin settings or navigate to your Dashboard and click on the AMP icon.
- From here you’ll be able to edit or personalize all the following options:
Add custom translations to your AMP pages.
Under the General tab, you’ll able to add your site logo (Recommended size is 190×36). You’ll also be able to select for which type of pages you want to enable AMP, I recommend only for posts so that your landing pages and product pages stay untouched.
AMP Page Builder
The plugin also comes with an incredible page builder that you can use to create custom AMP pages for any purpose you want, let’s say you want to create AMP landing pages to attract more email subscribers or promote any of your products.
You won’t be able to see that page builder here, but you’ll see it when you’re editing a new article or page, in this section, they show you a very instructive video on how to use the AMP page builder.
Under the advertising tab, you’ll be able to see the options to integrate different type of ads such as Google Adsense, your own sponsors’ ads or CPM ads. You will also be able to optimize those ads right then and there.
In the SEO section, you’ll have some options that you can use for your AMP pages SEO, my recommendation is to just enable Yoast SEO plugin settings and keep everything else as it is.
The analytics section will help you integrate all your analytics platforms with your AMP pages, not only Google Analytics, but you will also be able to add Facebook Pixel, Yandex, Alexa and many other options that are also available.
Go ahead and check all the other tabs available, I’ll just wrap it up here by taking a look at the design options available, as well as the additional paid extensions.
Under the design tab, you’ll be able to see a couple of free design options for your AMP pages, as well as some premium pre-designed layout that you can get with the paid version of the plugin. If you’d like to be extra classy and you have the budget, then go for it because they look great.
You’ll also see some options to customize other aspects individually such as your header, footer, single post, single pages, social sharing, etc.
Finally, under the Extensions tab, you’ll see a whole bunch of cool extensions that you can add if you pay for it. There are some very nice features such as CTAs email opt-in forms for your AMP pages, so go ahead and take a look and see if you find something you like.
I’m currently implementing Accelerated Mobile Pages on my site using this particular plugin, I was using AMP for WordPress before, but I like this one better because it gives me many more options to customize the pages, although it requires more technical knowledge.
Other helpful resources:
- How to get a FREE https Certificate and Boost Your Rankings on Google
- Best Free SEO Tools for Bloggers and Small Business Owners (Updated)
- 30 Ways to Make Money Online Legally – Make even $5,000 From Home
That’s it for now… I hope you like this article and please don’t forget to leave your comments and questions down below, I’ll be happy to answer those. Don’t forget to share with your social networks as well.