A clock face accelerating through time.

The Beginner’s Guide to Integrating AMP With WordPress

Smartphone and tablet usage in the US has reached tipping point, with reports suggesting that over 60% of digital media time in the US is spent on our devices. Unfortunately, developer’s attitudes have taken a long time to catch up when it comes to our mobile experience. Concepts such as ‘responsive design’ and ‘mobile-first’ have been steps in the right direction, but work on improving our mobile browsing speed has been lacking.

Accelerated Mobile Pages (AMP) is Google’s attempt to revolutionize mobile browsing, by focusing on increasing the speed that webpages are delivered to our devices. Developers have been slowly coming on board, with Automattic in particular developing the AMP Plugin, which integrates this new approach to mobile design with WordPress.

In this article, we will look at what the AMP project is, along with Automattic’s AMP plugin which was developed to implement AMP on WordPress. We’ll also give you some advice on how you can customize AMP for your WordPress website.

What Is Accelerated Mobile Pages?

The AMP Project itself is (like WordPress) an open-source initiative created by Google and Twitter to collectively improve the smartphone and tablet viewing experience for everyone. The open-source platform was chosen as a direct response to ‘closed-source’ initiatives, such as Facebook’s Instant Articles and Apple News Publisher. This video from the AMP Project website explains the initiative in more detail:

The technology behind Accelerated Mobile Pages, on the surfacef at least, is simple: it strips your website’s pages of any superfluous styling and code before storing it on a separate server, ending with a page that loads quickly and is optimized for mobile devices. Think of it as HTML on Weight Watchers:

An example of an AMP-compatible page from the Washington Post.

Pages will look sparser, yet no less identifiable – as this example page from The Washington Post shows.

Getting a little deeper, AMP pages are essentially like any other HTML webpage, but with some restrictions governed by the AMP HTML specification – some key ones being:

  • Disabling inline CSS, and streamlining the code found in preexisitng stylesheets.
  • Other than a standardized, off-the-shelf library for functionality such as ‘lazy loading‘, no other JavaScript is allowed.
  • Banning certain HTML tags outright – such as those used for forms – and substituting others (such as image and video tags) with their own AMP Components tags.

Of course, with a name like Accelerated Mobile Pages, you would expect speed to be the main benefit. For end users, quicker loading times means less time spent waiting and more time reading. However, for those that create and publish content, the potential for content to appear everywhere quickly is exciting. Money talks, and as past studies have shown, a page that loads quickly means higher conversion rates and sales.

Further speed gains are achieved through ‘caching’. Caching is the saving of already loaded webpages and storing them on a server for later viewing. This saves time by skipping the server processing stage of the page load. AMP was designed specifically with caching in mind. Google is providing the technology to cache all AMP pages on their servers, further increasing browsing speed for end users.

A diagram of the AMP caching process, explained by Moz.

It won’t be a case of “enable AMP, count cash”, for some publishers though. If their websites don’t currently run on WordPress, they have plenty of work to do. Paywalls, advertisements, and subscription content will have to be rebuilt due to the JavaScript restrictions, and AMP doesn’t yet cater for ‘interstitials’, (pop-up ads to you and me), or perennial early ’00 technology Flash.

With this being a Google initiative, content providers may have an added incentive to get on board with AMP sooner rather than later. It may just be that Google shows a preference to AMP activated pages in the future. In a demo on the project website, AMP activated pages are shown at the very top of the search results. So it pays for content creators and providers to put in the leg work to be ready now.

A mock-up of Google's prioritization of AMP-compatible pages.

Given the rapid development of AMP, it hasn’t taken long for developers such as Automattic (among others) to jump on the bandwagon and find a way of making AMP accessible to all WordPress users – their solution coming in the form of the aptly titled AMP Plugin.

What Does the AMP Plugin Do?

Automattic's AMP Plugin screen.

Of course, having a technology that enables users to view your website on their device in milliseconds is all for nothing if you can’t generate the required pages. That’s where the AMP Plugin comes in. At this point, we would typically walk you through the plugin settings screen and look at setting it up for your needs. However, given the streamlined nature of AMP, the plugin has no options screen to navigate. It is true set and forget.

Once active, the plugin dynamically generates AMP-compatible versions of your webpages, so there’s no extra effort on your part. These pages can be viewed by appending amp to the relevant URL:

A screenshot of a URL, appended with /amp.

It’s worth pointing out that the AMP plugin doesn’t automatically display your AMP content. It only generates the necessary compatible pages and the responsibility for displaying them lies in the hands of Google Search et al.

Also, the rapid rate of AMP development, coupled with Automattic’s desire to get WordPress users ready before the launch date, means that the plugin hasn’t yet reached a full version point. Note that pages and archives are not currently supported, but future releases will see further developments.

How Can I Customize AMP for My WordPress Website?

For most users wanting an AMP-optimized website, installing the Automattic plugin will be enough. However, there are some areas you may want to delve deeper into and they’re only accessible through other plugins.

As we explained earlier, stylesheets are heavily streamlined, after all, it’s one of the major components in delivering rapid page speeds and other than your site logo, you won’t see very much in the way of styling.  Furthermore, if you’re one of the one million plus users who have installed Yoast SEO, the metadata used by the AMP Plugin may not be the most optimal. Details on how it differs is sketchy at best, but fortunately, Yoast has developed a plugin to kill two birds with one stone: Glue for Yoast SEO & AMP.

The Glue for Yoast SEO & AMP lugin

Once installed, the Glue settings can be found in the SEO dashboard admin panel…

The dashboard menu, showing where to find the Glue plugin settings.

…and within the settings themselves are the three tabs you’ll need to make further tweaks to your AMP pages:

  1. Post types: While you’d generally want to see only your news and blog posts as AMP-optimized pages, Glue lets you make any relevant post type AMP-compatible.
  2. Design: This tab enables you to make basic design alterations to your AMP-compatible pages. You can change the color of text and links, add a default image in the place of a missing featured image and add in extra CSS if you require.
  3. Analytics: This tab lets you add a Google Analytics tracking code – though you’ll need further functionality provided by either the Google Analytics by MonsterInsights plugin, or an alternative such as PageFrog.

You can find out more about why some of these settings are important, along with Yoast founder Joost de Valk’s opinion on AMP, in this article on the Yoast website.

Conclusion

While the majority of us now access digital content from our smartphones and tablets. The technology used to deliver webpages to our devices has been lacking and our experience has suffered. Google is looking to set that right with Accelerated Mobile Pages – a way of marrying a mobile-first approach with the speed we now require in surfing the web.

In a nutshell, AMP is a technology that delivers super-speedy webpages to a user’s smartphone or tablet. To get your WordPress website ready, consider the following:

  1. Install the AMP Plugin from Automattic. There are no settings to browse through, so once installed, consider yourself ready!
  2. If further styling, metatag optimization, or analytics support is important to you, consider installing both Glue and Google Analytics by MonsterInsights, or alternatively, the PageFrog plugin.

With the AMP initiative we’re on the cusp of a mobile revolution and there are more developments in the pipeline. These coming from the likes of Apple News and Facebook’s Instant Articles (in the case of Instant Articles, we’ll look at in a future post).

How important is having a mobile-optimized site to you or your business and where will AMP fit in? Give us your opinions in the comments section below!

Image credit: geralt.

6 Likes
8 Comments.
  1. Good advice in this article.  I went live with Automattic’s AMP plugin a few months ago, and used its’ supported template to create a custom AMP version of our main menu (refer to the plugin’s documentation for more details, and check out our site’s source for the results.)

    • Tom Rankin

      Thanks for your input! We’re glad you enjoyed the article. 🙂

  2. Oh, great, so far I’m new to wordpress amp

  3. Yes…
    my website has installed AMP..

    Great article.. thanks

    • Tom Rankin

      You’re welcome! Glad it worked out for you. 🙂

  4. We may have to find a way to include this in our next site.  Excited for the future of AMP.

    • Tom Rankin

      We’re excited about it too. 🙂 Good luck with your site!

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly Serving Over 340000 Satisfied Users!