Accelerated Mobile Pages for WordPress: What You Need to Know

Ever since the latter half of 2015, the concept of Accelerated Mobile Pages for WordPress as well as other website technologies has been in discussion. Web developers, WordPress people, SEO experts, and everyone else associated with content creation or management has been talking about the AMP Project.

But what exactly is the AMP Project? We know that “Accelerated Mobile Pages” refers to something that can, well, accelerate your pages on the mobile. Ideally, a website using AMP should load faster and provide a better UX overall as compared to one that doesn’t use AMP, all other things being constant.

However, is that it? Should you just activate AMP on your WordPress website and forget all about it? This article answers all the questions related to Accelerated Mobile Pages that a web developer working with WordPress should be aware of.

Accelerated Mobile Pages for WordPress: what developers need to know

What is AMP?

Accelerated Mobile Pages is an open source project that describes itself as:

For many, reading on the mobile web is a slow, clunky and frustrating experience – but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

AMP has the backing of many industry leaders – Google, Pinterest and even WordPress.com

Make no mistake about it, Google is indeed taking AMP seriously. Search results on mobile devices already carry the AMP sign:

Accelerated Mobile Pages for WordPress: news in Google

Furthermore, even native Android apps such as the News and Weather app carry the AMP sign for pages that support it:

AMP results in Android

As a result, this isn’t something that you can outright ignore.

What should developers know about AMP?

We know that web pages tend to constitute HTML, CSS and JavaScript. AMP focuses on each of these three. It comes with a set of custom elements and rules for you to adhere to.

Here’s what’s in Accelerated Mobile Pages for WordPress:

Custom HTML elements for AMP

Most media-centric HTML elements are customized by AMP. The goal here is to replace and extend the functionality of existing HTML elements, such that you do not need lots of JavaScript to accomplish the tasks.

However, that isn’t all. AMP also has its own special HTML elements, such as: amp-pinterest, amp-twitter, amp-youtube, amp-analytics, amp-anim, amp-lightbox, amp-carousel, and amp-ad.

As you might have guessed from the above names, some of the elements are meant for embedding third party content. Why so? Because when working with external content, such as advertisements or embedded tweets, AMP needs to have custom elements such that it can load the required content faster. How often have you come across advertisements that loaded too slow on mobile, and hung up the entire page? AMP tries to cure that.

Also, bear in mind that the standard HTML elements (img, audio, video and iframe) are replaced by amp-img, amp-audio, amp-video and amp-iframe.

So, are you wondering whether or not using such specialized elements is worth it? Well consider this: the amp-img tag currently offers absolute srcset support, even for older browsers that do not support it at all.

For a full list of AMP’s custom components and their service-specific implementation, check out the official documentation.

Custom rules for AMP

When it comes to CSS and JavaScript, AMP has custom rules in place. If you really are serious about coding with support for AMP, be sure to follow them strictly.

To begin with, if you are a fan of custom JavaScript for creating shiny elements, forget all about that. AMP does not allow custom JavaScript. However, you can make use of the custom elements mentioned above for the same effect: amp-carousel and amp-lightbox. In other words, AMP has its own JS library, and that’s probably the only library you can turn to.

External fonts, on the other hand, are supported, but only from the popular sources such as Google Fonts.

However, the biggest custom rules are for CSS. Your CSS should almost always be inline. This makes working with external stylesheets a bit more complicated than usual. Of course, many WordPress developers are used to linking external stylesheets. If that is the case, you can use PHP functions to output the content of your stylesheet inline when dealing with Accelerated Mobile Pages for WordPress.

Also, and most importantly, the CSS code should be under 50 KB. Many popular frameworks, when minified, tend to run over 80-90 KB in size. So this particular rule is surely something you need to be aware of.

For implementation examples, be sure to check the AMP documentation.

Lastly, AMP also has a special CDN, namely Google AMP Cache, that can be used to fetch, cache and deliver all valid AMP pages. If your website does not have a CDN yet, it might be of use for you. If, however, you are already using a CDN, Google AMP Cache is not required.

The big question: Can AMP make everything super fast?

The answer to the above question is slightly open-ended. If your website is poorly optimized, or if you have made nearly zero UX investments for mobile visitors, AMP can offer you a significant boost.

However, you should know that AMP is not a silver bullet. At the end of the day, techniques to improve page load times have existed for a long time – prefetching, prerendering, lazy loading, etc. AMP is an attempt to combine all of that, along with performance optimization tweaks, and deliver a smoother mobile browsing experience.

Accelerated Mobile Pages for WordPress and otherwise work by loading the crucial elements first, such that the visitor can begin browsing the page right away. Thereafter, it loads the remaining media.

Naturally, the above approach, as well as the coding rules in place, show that AMP focuses more on optimization and efficiency. It is not “improve your page speed a million times!” solution that many folks are claiming it to be.

Now, should you actually use Accelerated Mobile Pages for WordPress websites?

AMP is surely fast (see this), but it is not the only method to make your pages faster. However, speed is not the only consideration here. There is a practical aspect to things as well. With the rate at which AMP is growing, you might be better off using it than ignoring it. With “AMP” showing up in search results, and everyone else talking about its importance, missing out on AMP may not be the wisest choice.

Plus, if you still are confused, follow the golden rule: Google is recommending AMP primarily for news sites and blog posts. For everything else, such as your landing page, or portfolio site, you can dismiss AMP.

Luckily for WordPress users, there is an amazing free plugin that takes care of everything for you:

You can install it on your site, and you will be AMP-ready right away! It has its downsides, though. This is something that Joost de Valk pointed out in his post series on AMP. Worth a read for sure if you’re interested in running Accelerated Mobile Pages for WordPress properly.

What do you think of Accelerated Mobile Pages? Given it a try yet? Please share your views in the comments below.

Sufyan bin Uzayr

Writer; published author; coffee-lover; web dev; the guy behind Code Carbon.
  • Hey thanks for sharing the info, its helpful.

  • Hello,

    Do you have any updates on Accelerated Mobile Pages? Has anyone implemented AMP on their WordPress site if so do you use a plugin?

    I would love to hear more about if implementing AMP on WordPress is difficult.

    I’m asking because I heard Google is moving over to mobile indexing meaning they are going to use how your site loads on mobile when indexing your site. This will obviously effect your ranking if your site is not optimized for mobile.

    Any feedback would be great!

    Thanks,
    Mike

  • I am using Accelerated Mobile Pages but getting error on activation of this plugin. I don’t know how to solve it. I also search out for another but still fail. There is no another tutorial. By the way thanks for this great tutorial. Keep sharing like this.
    -Humna