A Beginner’s Guide to Using Accelerated Mobile Pages (AMP) in WordPress

Are you reading this on your phone? Yes?

Called it! That’s because more people today are browsing the web using a mobile device than their dusty, old desktop.

(And yeah, that phone pun was very much intended.)

Blame it on smartphones (the first iPhone dropped a DECADE ago), but the advent of mobile devices completely changed the way humans use the Internet. And all those mobile web surfers aren’t going anywhere — except, of course, to another website if yours fails to load quickly on their tiny screens.

Enter the Google-developed Accelerated Mobile Pages (AMP) project.

The goal of this new technology is to help sites load quickly and perform flawlessly, no matter how they’re accessed. It does this by creating a stripped-down (not as salacious as it sounds, I promise) copy of your site that only appears on mobile devices.

In this post, I’ll explain how AMP works and delve into the pros and cons of adopting this technology. Plus, I’ll walk you through how to start using it on your WordPress site.

WordPress + DreamHost

Our automatic updates and strong security defenses take server management off your hands so you can focus on running a successful WordPress website.

Check Out Plans

What Is AMP?

For many years, the way people browsed the internet remained consistent. Almost every Tom, Dick, and Harriet used a traditional computer to access the web. This made it simple for website developers and designers to do their jobs since they knew visitors would all be experiencing the sites they created in a similar way.

But with the advent of mobile devices, everything changed. The rapidly growing popularity of these tools means visitors now view the same website on a wide variety of devices with different screen resolutions and ratios. To compete in this market, websites have to be optimized for mobile browsing.

That’s where Accelerated Mobile Pages (AMP) come in.

Developed by Google along with a number of other companies, AMP is designed to help developers create sites that run optimally on mobile devices. It’s an open-source initiative, which means that although it’s been around since late 2015, it will continue to grow in scope and functionality over time.

How Does AMP Work?

As many developers know, optimizing websites for mobile devices is difficult, and designing a web page that displays and functions well on desktops, phones, and tablets is tougher. Many tools to make a website ‘responsive’ enable you to create different versions of your web pages that display depending on the viewer’s chosen device.

This is essentially what AMP does. Once implemented, you’re creating a separate version of your pages that will only be displayed on devices with smaller screens.

These new pages are stripped-down versions of your website’s standard pages and will be fully optimized with mobile devices in mind. They’ll focus more on your content by removing some features and functionality and be ‘light’ enough to ensure excellent performance.

On the technical side, AMP pages are built using three main components:

1. AMP HTML: This is a specially-developed version of HTML, which includes specific tags and restrictions designed to improve performance.
2. AMP JS: A unique JavaScript library, this technology handles resource management and loading so that pages render quickly.
3. AMP Cache: Through this Content Delivery Network (CDN), your pages can be ‘cached’ for faster retrieval.

Together, these technologies work together to provide a number of benefits to anyone using AMP on their website. Now let’s walk through those advantages, as well as some of AMP’s current drawbacks.

The Pros and Cons of Using AMP on Your Site

As we’ve discussed already, the main benefit of AMP is that it optimizes your web pages for mobile devices. This is accomplished in two main ways:

1. Simplified Pages — AMP creates a number of restrictions that keep certain elements from appearing on the mobile versions of your web pages, such as some types of multimedia and third-party JavaScript. Although restricting your pages’ features may initially seem like a downside, this makes your pages easier for mobile visitors to read and use.
2. Improved Speed — Using AMP maximizes the performance of your website on mobile devices. The stripped-down functionality and lightweight HTML and JavaScript behind the scenes result in pages that load very quickly — because there isn’t much to load in the first place. Plus, the caching feature stores pages so they can be retrieved even faster.

All of this matters, because performance plays a major role in your website’s success. Pages that are just a fraction of a second too slow to load result in less traffic and a higher bounce rate. This means you’ll see fewer readers, customers, and conversions. Sad face.

Of course, there are plenty of ways to improve your site’s performance. For example, choosing premium WordPress hosting, like our DreamPress plans, will ensure your site is as fast and reliable as possible (and provides many other benefits, such as improved security and convenient support).

Adding AMP to your setup is a way to give your web pages a leg up. Although, using a new technology like AMP does come with some potential downsides. As I mentioned above, AMP restricts functionality on the mobile version of your website. This results in better performance but can be a problem if your site relies on features that aren’t compatible with AMP.

Related: The Difference Between WordPress.com & WordPress.org

There can also be some extra work involved with implementing AMP on your pages, especially if you do want to integrate functionality that isn’t supported by default. That’s because AMP is meant to be low-bandwidth, so multimedia, slideshows, and social embeds should really be avoided unless they are critical for your content.

If your site is already pretty basic (in a good way) or you’re happy to present a streamlined version of it on mobile devices, implementing AMP should be fairly simple. However, if you want to tweak how your pages appear and include complex features, you’ll need to put some time in and likely have some basic knowledge of HTML and JavaScript.

It may be worth creating a test version of your site and experimenting with AMP to see what your results would be, before making a decision about whether or not to use it (more on this in a moment). You can also use this modified Google search page to see what your site (and others) will look like when visited via AMP.

AMP’s Compatibility With Other Tools

AMP is relatively new, but it’s garnered a lot of attention and been adapted by a fair share of users. This means developers have been hard at work making it compatible with other commonly-used online tools. While there’s much that AMP still doesn’t support (but may work with in the future), there are a few integrations you’ll be glad to know are currently possible.

Let’s look at two: ad monetization and analytics.

Many website owners monetize their sites through ads, whether as a primary or supplemental source of income. Mobile optimization often strips these ads away, which is great for performance but can cut into your profits. AMP can address this problem by improving speed on mobile devices without the need to block or remove ads. What’s more, there’s a dedicated component that enables you to use AMP alongside the most popular ad networks, such as Google AdSense, AdReactor, and Amazon A9. Cha-ching!

Another feature every website needs is analytics. Whether or not you’re monetizing your site, analytics tools help you see how well it’s performing, and optimize it to improve traffic, clicks, and conversions. AMP includes a couple of options that enable analytics functionality, such as a simple page view tracking tag and an extended analytics component. Plus, with some extra configuration, you can get Google Analytics — one of the most useful and comprehensive such tools available — working alongside AMP.

Of course, all of this is just the beginning.

As an open-source project, AMP is constantly being added to and extended. It’s worth keeping an eye on the most recent developments, even if you’re still on the fence about whether or not AMP is right for you. Further compatibility and integration options are basically inevitable.

How to Use AMP With WordPress (3 Useful Plugins)

The way you integrate and implement AMP on your website will depend largely on the platform you’re using. If WordPress is your solution of choice, you’ll find there are a few simple ways to get started with AMP. As is so often the case with WordPress, your best bet is to use one or more plugins created specifically for the task. We’ll explore three of these options next.

But first!

Before you use any of these methods to integrate AMP with your site, it’s wise to take a couple steps in preparation. These are the same things you’ll want to do when making any major changes to your site.

• The first is to create a backup (if you don’t have a recent one handy).
• Next, it’s wise to set up a local testing version of your site (again, if you haven’t already done so).

This way, you can try out AMP and its corresponding plugins on your testing site without the risk of causing harm to your live site, and you’ll have a backup copy ready just in case something goes wrong.

OK, let’s get to the plugins!

1. Start With Automattic’s AMP Plugin

This first plugin was created by Automattic, the company behind WordPress. It’s designed to add support for AMP to your WordPress site, and it does this by creating AMP-compatible versions of all your posts. When someone visits your site on a mobile device, they’ll be shown these new posts, which will use the same URLs but appended with the /amp/ slug.

It’s worth noting that this plugin is still rather limited in scope.

It only works for the posts on your site — not for pages, archives, or other content types. It also has very mixed reviews from its user base, and some people have had difficulty getting the tool to work properly. However, this is the sort of thing you’d expect from a project that’s still very much in development.

My advice? Give this plugin a try on your testing site to judge its effectiveness. If you have trouble, you can try adding one of the other two plugins we’ll introduce below.

However, it’s still worth starting with this one, if for no other reason than it’s the most simple AMP implementation available for WordPress (and the following two plugins require it to work properly).

To get started, simply download the plugin and install it on your site. Once it’s activated, it will automatically create AMP-compatible versions of all your existing posts. There will also be a new option available from your dashboard. Navigate to Appearance > AMP, and you’ll be able to see what your site will look like when visited using a mobile device:

You can make a few basic changes here, such as altering your site’s header and a few parts of its color scheme. If your theme supports an icon or logo for your site, that will also be included on your AMP posts. Save any changes you make here, and after that, you can visit your live site to see how it looks. Just add /amp/ to the end of any post’s URL to get an accurate preview.

Also, you should know that many people experience 404 errors the first time they try to preview their AMP posts using this plugin. If this affects you, simply navigate to Settings > Permalinks and select the Save Changes button at the bottom (you don’t actually have to make any changes).

With that, you should be good to go!

2. Add the Glue for Yoast SEO & AMP Plugin to Your Setup

If you’re not familiar with Yoast SEO, I have one question for you: where have you been?!

Just kidding. Kind of.

Yoast is a big-time WordPress plugin that you’ll definitely want to check out. It’s used by all kinds of sites to help you optimize pages for search engines. Using Yoast SEO is a great way to push your site further up in the Google page rankings, so it will attract more traffic.

Yoast SEO users will want to check out the Glue for Yoast SEO & AMP plugin. This is a simple tool that helps AMP and Yoast SEO work smoothly together. It ensures that your SEO metadata is implemented properly on your AMP-optimized pages and even adds a few new customizations.

To use this plugin, you’ll need to have Yoast SEO installed. Next, follow the instructions above to install and configure the AMP plugin for WordPress. Once both plugins are in place, you can download this one to ‘glue’ them together. It will do its job automatically, without any need for further input on your part.

However, Glue for Yoast SEO & AMP will also add some customizable settings to your site, which you can tweak to suit your needs. You can find these options by visiting SEO > AMP from your WordPress dashboard. You’ll see three tabs here — Post types, Design, and Analytics:

The first tab will let you enable or disable AMP versions for different post types on your site. In the Design tab, you’ll find a few choices for adding images, modifying colors, and including custom code. Finally, the Analytics tab is where you can enter a Google Analytics tracking code, to connect that tool with your AMP pages.

Related: 13 Simple Ways to Boost SEO on Your WordPress Website

3. Try Out the Advanced AMP for WP Plugin

The first plugin we introduced, AMP, was developed by Automattic itself. At the same time, it’s very basic and won’t work for everyone out of the box. Fortunately, there’s another option — the AMP for WP plugin.

This plugin is an extension of the basic AMP plugin and comes with a lot of useful features and integration options. You’ll get access to a page builder, a custom AMP editor, and various customization choices. There’s also support for pages, categories, and tags, and the potential for integration with a wide variety of tools (such as contact form plugins, SEO plugins, Google AdSense, analytics, and more).

Long story short: if you’re looking to add AMP to your site without sacrificing functionality, this plugin is worth a try.

You can download and install this plugin on your site like any other; just keep in mind that you’ll need to have Automattic’s AMP plugin activated on your site first. Once you’ve got both plugins up and running, AMP for WP will provide a huge array of additional options, which you can find on your site under the new AMP tab.

There’s a lot to process here. I get it. Fortunately for you and me, most of the options are pretty self-explanatory, and the plugin developers offer extensive documentation to help you get started. The most important place to visit first is the General tab, where you can add a customized logo and enable AMP versions of your pages as well as your posts.

After that, feel free to dive into the rest of the settings and get your AMP web pages set up exactly the way you’d like!

Ready to AMP It Up?

AMP is still a relatively new technology, and it certainly has its limitations. It’s also an intriguing new way to optimize your site for mobile devices and improve the user experience. And, between you and me, I think there’s a lot more functionality coming down the pipeline.

What’s more, you can implement AMP on your WordPress site — and get an easy performance boost — without too much trouble.

Do you have any questions about AMP or how to integrate it with WordPress? Join the DreamHost community and start the conversation!