AMP 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.
Make no mistake about it, Google is indeed taking AMP seriously. Search results on mobile devices already carry the AMP sign:
Furthermore, even native Android apps such as the News and Weather app carry the AMP sign for pages that support it:
What should developers know about AMP?
Custom HTML elements for AMP
However, that isn’t all. AMP also has its own special HTML elements, such as:
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 (
iframe) are replaced by
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
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.