Implement AMP For WordPress for Faster Mobile Access

Anyone who has been using WordPress for a while will know that page speed is a critical factor for search engines. SEO aside, the speed a page loads at will influence your visitors’ decision on whether to stay or look for another website.

More than 40% of website visitors will abandon a website if loading time is more than 3 seconds. But what about mobile viewers?

If your website is heavy and you haven’t optimized it for fast page-rendering, it is likely to consume a lot more mobile data and that is the biggest turnoff for any mobile visitor. How do we solve that? With Google AMP.

What is Google AMP?

Google AMP is an open-source Google project aimed at significantly increasing the speed of mobile browsing. This means that, even if your visitors have a poor mobile internet connection, they can see the AMP version of your website.

What is this? It’s a light-weight version of your website, a stripped-down version of the theme you are using, built purely to boost page speed. To do this AMP will not allow JavaScript elements on your webpage, instead, forcing a streamlined CSS version.

This means having to use a JavaScript library that will force any images on your site to lazy-load. And, when your AMP pages have been indexed, they are cached on the AMP CDN, enabling super-speedy rendering of those pages without affecting the responsive design.

Should You Implement AMP?

Yes, if speed and ease of use for your mobile visitors is your top priority. However, because JavaScript interactive elements are not used, you may not want every page to be an AMP version.

For example, your landing page is aimed primarily at conversion, not speed so you don’t really need an AMP version, but it is worth implementing on blog posts or news posts because these need to be quicker and easier to read.

So, how do you implement AMP?

1. Install the AMP for WordPress plugin – This is done through WordPress Admin in the same way that you install any plugin. Once installed, prick the posts that you want to have an AMP version and append the post permalink with /amp/. That is all you need to do.
2. Customize Your AMP Pages – By installing this plugin, you get a basic AMP layout for your website, but you can, if you want, customize it so it looks more like your full website. To do this, you should either edit the CSS of the AMP template or install a plugin called PageFrog, which will also provide other support, like the integration of Google Analytics on the AMP page. Make sure that, once PageFrog has been activated, you then activate Google AMP HTML. If you have the Yoast SEO plugin enabled on your full website, its better to use Yoast Glue plugin, rather than PageFrog.
3. Check That You Have a Valid AMP Page – Next, you should validate the page to make sure it is a valid AMP page. Sadly, AMP integration can bring lots of AMP errors with it and you’ll find these in your account for the Google Search Console. However, fixing these, although critical to ensure indexing of your AMP pages, is not too difficult. Simply log into your Google Search Console account and go to Search Appearance>Accelerated Mobile Pages where you will see any errors.

There are two ways of validating AMP pages so that errors can be fixed:

• Through the browser developer console – all you need to do is append the AMP URL with #development=1 and then open it through your web browser. Now you can use the Chrome DevTools console to check for validation errors
• Through the web interface – you can also visit validator.ampproject.org, input the URLs for the AMP pages and the errors will show up

The reason why search engines push so hard for page speed is that their priority is to ensure a user gets the right answer to their question in the quickest time possible.

Although AMP is not yet an overwhelming factor in ranking, more than 90% of those using it are already seeing considerable results.

Here are links to the tools mentioned in this article.

• AMP for WordPress