Why AMP and Installing the AMP WordPress Plugin

Most days I check one of my favorite websites around lunchtime. I like to see the news, articles, and comments. And while I love the site, every time I click a link to open a new tab, there’s so much stuff on that page from ads to polls to widgets, that it slows down my browser. So much so that I actually can’t do anything. I’m forced to sit there for a second or two while my browser gets a massive amount of data from the server. Processing speeds and broadband speeds have increased, but we’re adding so many features to our sites, that there’s still a ton of data, which makes websites slow, especially on mobile.

Why AMP?

Google has done some research and 53% of people will leave a site that fails to load in three seconds. That’s why Google is backing an open-source project called AMP, which stands for Accelerated Mobile Pages.

Think of it as a subset of HTML, where it restricts the very slow things from being sent to your browser. Some websites have seen a four times speed increase by using AMP. And that speed does all sorts of amazing things like increase e-commerce conversions.

To show you the power of AMP, let’s go to our admin, and now let’s open up this little help section here in Yoast.

We can click on the knowledge base, and now we can search. Let’s search for something like a redirect. And we’ll get a list of results. And all of this content is actually an AMP version of a page on the Yoast knowledge base on their website. They want this help article to load as fast as possible so they reference the AMP version of this page. If you notice, this looks just like a regular HTML page but it’s a little bit faster.

Now AMP isn’t a requirement, and you don’t have to do it, but Google has always preferred speed. And if your website is slow, they’ll ding you in the ratings. If you want to maximize your SEO, you should look into using AMP. And for the most part, configuring your site for AMP is as simple as installing a plug-in and tweaking a few settings, so it’s definitely worth doing.

How to Install AMP WordPress Plugin?

To configure your site for AMP, almost all of the work is taken care of by the AMP plugin. This is created and actively maintained by Automatic, the people behind WordPress.com. And since they’re using it on WordPress.com, and sharing it with the rest of the WordPress community, it is a top-notch plugin. They make a lot of smart decisions for you, so you can just install it.

Let’s go to the admin, go to plugins -> add new, but search for AMP, and you want to make sure that you use the one from WordPress.com.

Install AMP WordPress Plugin

Click Install Now, and activate. This plugin does some behind-the-scenes work with our permalinks, to create AMP versions of all of our pages.

Let’s go AMP in the menu to see those settings. I see AMP, and I’ll click that. Here we can select native, paired, or classic.

If you’re using one of the default themes that come with WordPress, or a theme that’s been invented by the AMP team, you’ll see a notice saying what modes your theme is compatible with. All themes will work with the classic mode, because they strip out your theme styles, and use some very basic styles. For right now, let’s leave our theme in the classic mode, but you can experiment with paired or native if you want. Those will look a little bit better.

Let’s go to the front end and take a look at what an AMP page actually looks like. Go to the front end of my site. Let’s go to one of our blog posts, and now we can append AMP to the back of any page.

As you can see, these look pretty similar. All of the content is the same. However, all the styling has been changed because we are in classic mode. And, in the back end, a lot of the mark-up is cut out, and this page will load much faster.

Let’s go back to our AMP settings. Let’s change our template mode to paired. Let’s scroll down, and click save changes. And now let’s go back to our AMP page, and reload.

The page now has our styling, and at the top of the page, we can see if the page is valid AMP code, or not. If it’s not, you’ll have to reach out to your theme developer and make sure it works with the AMP plugin. Or, find a different theme. If it is valid, then use the paired mode, or you can switch to the native mode. So that the AMP version of your theme looks as close as possible to the non-AMP version of your theme.

Similar Posts:

Leave a Comment