What are AMP websites and should you start using them?

27/06/2017
Technology

google_amp_project_logo

 

The Accelerated Mobile Pages Project (AMP) is an open-source initiative launched by Google in late 2015 which enables fast mobile browsing. Its goal is to speed up mobile browsing experience tremendously, allow websites to load instantly even on mobile devices with poor internet connections. In early tests, AMP pages load 4 times faster and use 8 times less data compared to traditional mobile-optimised pages. To the AMP Project, nothing is more important than speed.

Accelerated Mobile Pages is not the first lightweight framework aiming for this purpose, but with Google’s backing, it is in a favourable position. Once an AMP website gets indexed, it will be cached on Google’s AMP CDN at no cost, resulting in very fast page rendering. AMP-enabled pages are also ranked better in Google’s mobile search results. Besides Google, the list of big names that support AMP project includes Twitter, Pinterest, LinkedIn and WordPress.com.

 

A better web for all

So who is AMP really for? Well, if you ask Google; it’s for everyone. The grand vision is to make all of web faster to load, which is as noble as a goal as any.

Realistically though, AMP is (currently) mainly for publishers, especially those who publish posts and news frequently. If your ultimate goal is to serve content and ads, AMP is a perfect fit. They have also released updates emphasising a lot on ecommerce, which is quite a natural movement for the technology.

 


Visually the articles on The Guardian website don’t differ drastically. On the AMP version (one on the right), images load as you scroll and the site in general has less clutter. You can try this yourself by adding “/amp” at the end of any of their articles’ urls.

 

The other side of the coin

Putting speed and readability over anything else has a price. An AMP page is not able to use any interactive elements, it has a set of rules to restrict some parts of HTML, CSS and it’s limiting the use of fancy JS. This is making the lives of website developers, like myself, a lot harder. It also means AMP pages are not necessarily suitable for presentative or design-focused pages, where the content plays a role with other elements on the site – thus, limiting the amount of providers who will truly benefit from AMP pages.

Think of it this way: Imagine you had to build a house with only half of the materials and elements you’d normally use. Sure, it might be faster but there’s little to be done to hide the fact it’s not going to be as beautifully built, as robust or have all the technically advanced utilities we know and love – like air-conditioning or underfloor heating.

Another piece of criticism AMP has received has to do with its origin: Google. Advocating, enforcing and restricting developers to using a certain type of technology has upset a lot of people. John Gruber, inventor of the Markdown markup language said “It’s a deliberate effort by Google to break the open web.”

 

Conclusion

In short, not all pages need an AMP version. There’s no point to serve a terrible looking page to a visitor just for the sake of loading it fast. Pages can be optimised to load fairly quickly with the right tools and hosting setups already, which don’t limit the functionality and design of the page so heavily. And therein lies the whole point of AMP, why bother?

The case is especially visible here in Finland since internet speeds are some of the fastest in the world. As it is in its current format at least, we recommend to use AMP for mainly just for content pages such as news, press releases or blog posts – if any.

However, when venturing into publishing channels and ecommerce platforms for global brands, faster loading content and sites could very well be the next competitive edge in building better user experiences. Whether it’s AMP or something else, we’ll just have to wait and see.

Care to give it a go? Here’s a quick guide:

 

How to implement AMP on a WordPress website

Step 1: Installing the AMP plugin by Automattic. This will automatically create AMP content for posts. The AMP version of a blog post can be found by appending /amp/ to that post permalink, for example: www.yourdomain.com/blog/blog-post/amp/

Step 2: To customise AMP template, you need to edit the CSS of an AMP template. This can be done by hardcoding, or using a plugin such as PageFrog or Custom AMP plugin. The PageFrog plugin will also help with making AMP pages discoverable by Google.

Step 3: Validate your AMP pages: Log in to Google Search Console account, navigate to Search Appearance > Accelerated Mobile Pages to find errors. Check the list of validation errors. Developers can also check validation errors in their Chrome DevTools console. Alternatively, validator.ampproject.org is the web interface to check for SEO errors of AMP pages.