What you need to know about Accelerated Mobile Pages for WordPress

The idea of Accelerated Mobile Pages for WordPress as well as other website technology has been in discussion since the latter half of 2015. The AMP Project was addressed by the web developers, WordPress users, SEO experts and everyone else interested in developing, managing or constructing content.

What is the AMP Project exactly, however? We know that “Accelerated Mobile Pages” mean something which can speed up your mobile pages. An AMP website should be loaded faster and offer a better UX overall compared to an AMP-free website; everything else is constant.

Is that it, however? Can you just trigger AMP and forget all about it right after you have finished making your WordPress website? This article addresses all the questions a web developer working with WordPress should be aware of about Accelerated Mobile Sites.

What does AMP mean?


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

It is a long, clunky and frustrating experience for many to read on the mobile site, but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the idea that mobile optimized content can be generated once by publishers and loaded instantly anywhere.

AMP is sponsored by several market leaders, including Google, Pinterest and even WordPress.com.

Make no mistake about it, AMP is also taken seriously by Google. On mobile devices, search results already bear the AMP sign:

WordPress Accelerated Mobile Pages: News on Google


In addition, for sites that support it, even native Android applications such as the News and Weather app bear the AMP sign:


AMP in Android results

As a consequence, this is not something you can ignore outright.

 

What are developers supposed to know about AMP?

We know that HTML, CSS and JavaScript appear to be made up of web pages. On each of these three, AMP focuses. It comes with a set of custom components and rules to which you must adhere.

Personalized HTML elements for AMP


AMP customizes the majority of media-centric HTML elements. The aim here is to substitute and expand the functionality of existing HTML elements in such a way that the tasks do not require a lot of JavaScript.

That is not everything, however. AMP also has specific HTML components of its own, such as: amp-pinterest, amp-twitter, amp-youtube, amp-analytics, amp-anim, amp-lightbox, amp-carousel and amp-ad.

Some of the elements are intended for embedding third party material, as you might have guessed from the above names.

And why so? Since AMP needs to have custom elements while dealing with external material, such as advertising or embedded tweets, so that it can load the content needed faster. How often did you come across advertising that loaded too slowly on your mobile phone and hung up the whole page? AMP is attempting to cure that.

Also, keep in mind that amp-img, amp-audio, amp-video, and amp-iframe replace the normal HTML elements (img, audio, video, and iframe).

So, are you wondering whether or not it is worth it to use those advanced elements? Well, take this into account: the amp-img tag currently provides full srcset support, except for older browsers that do not support it at all.

Check out the official documentation for a complete list of AMP’s custom modules and their service-specific implementation.


Custom AMP Rules

AMP has custom rules in place when it comes to CSS and JavaScript. If you really are serious about coding with AMP support, be sure to strictly follow them.
If you’re a fan of custom JavaScript for creating shiny elements, forget all about that, to begin with. Custom JavaScript is not allowed by AMP. You may, however, use the above-mentioned custom elements for the same effect: ampli-carousel and amp-lightbox. AMP has a JS library of its own, in other words, and that’s possibly the only library you can turn to.

On the other hand, external fonts are supported, but only by common sources, such as Google Fonts.
The largest custom rules, however, are for CSS. Almost always, your CSS should be in-line. This makes working a bit more difficult than normal for external stylesheets. Of course, the linking of external stylesheets is used by many WordPress developers. If that is the case, when working with Accelerated Mobile Pages for WordPress, you can use PHP features to inline output the content of your stylesheet.
The CSS code should also, and most notably, be under 50 KB. When minimized, many common frameworks appear to run over 80-90 KB in size.

So this basic law is definitely something you need to be mindful of.

Be sure to search the AMP documentation for implementation instances.

Finally, AMP also has a special CDN that can be used to fetch, cache and deliver all valid AMP pages, namely Google AMP Cache. It could be of interest to you if your website does not yet have a CDN. However, if you are already using a CDN, it does not require Google AMP Cache.

The big question: can AMP make it all super quick?


Slightly open-ended is the answer to the question above. AMP will give you a major boost if your website is poorly optimized, or if you have made almost zero investments in UX for mobile visitors.

You should be conscious, however, that AMP is not a silver bullet. At the end of the day, strategies have been in effect for a long time to boost page load times-prefetching, prerendering, lazy loading, etc. AMP is an effort to blend all that together with tweaks in performance enhancement to provide a smoother mobile browsing experience.

Accelerated WordPress Mobile Pages and otherwise work by first loading the key elements, so that the visitor can instantly start browsing the website. It loads the remaining media afterward.

The above method, and the coding rules in place, naturally show that AMP focuses more on optimization and performance.

“It isn’t a million times “boost your page speed! “The solution so many folks pretend to be.

Now, do you really use WordPress websites with Accelerated Mobile Pages?

AMP is definitely fast (see this), but it is not the only way to speed up your pages. Speed is not the only factor here, however. There is also a functional component of things. You could be better off using it than ignoring it, with the pace at which AMP is increasing. With “AMP” popping up in search results, and everybody else talking about its meaning, it might not be the wisest option to miss out on AMP.

Plus, follow the golden rule if you are still confused: Google recommends AMP mainly for news sites and blog posts. You can dismiss AMP for anything else, such as your landing page, or portfolio site.
Luckily, there is an awesome free plugin for WordPress users that takes care of it for you:

AMP Plugin for WordPress

 

1 Comment

Leave a Reply

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