A Guide to AMP (Accelerated Mobile Pages)

calendar-icon

By Kurt Buttress - December 05, 2016

Have you noticed the blue or green lightning bolt in the corner of some of your search results? You know the one? It sits neatly in the corner of some searches, and when clicking on it, it loads your page in "lightning-fast" speed.

That's AMP – or accelerated mobile pages. The reason I didn't mention that you're searching on your smartphone is that statistically speaking, over 33% of internet searches are conducted using a smartphone as the primary device for internet use; so let's just say I assumed that at least some of you were on mobile. Dscout points out that mobile users spend an average of 145 minutes on their devices daily and that we touch our smartphones more than 2, 617 times a day. This explains why mobile search and its optimisation is so important for your business, and will be even more so moving forward.

So what is AMP, and how does it affect you?

With statistics like these proving just how prevalent the smartphone has become regarding search, it's no surprise that Google introduced AMP to keep up with the bolstered growth of mobile search. The launch of the AMP Project means that publishers can now produce mobile pages that load even faster than traditionally optimised responsive pages and meet the increasing demand for instant and impactful search results.

As an attempt to compete with the near-instantaneous loading of Facebook Instant Articles and Apple News, Google decided to release the open-source initiative to improve UX for the growing mass of mobile searchers. Along with a carousel of the "Top Stories" in Google search, platforms like Twitter, Vox, BuzzFeed and Washington Post, to name a few, have already partnered with Google to use AMP on their published content.

This affects mobile search the most, but has far-reaching implications for your site's desktop pages in the near future (see eBay's take on their AMP experience below).

How do you go about enabling AMP on your mobile pages?

When using AMP, text-based content gets prioritised, with additional content loading after the remainder of the page is rendered. With JavaScript removed from the page, content loads at lightning speed, something great for SEO with regards to page/site speed. As a user, you get delivered a stripped version of a page where many elements that usually cause pages to load slower; such as excess cookies, embedded advertising, or third-party JavaScript, are removed. The use of minimal HTML makes up a core component of AMP speed.

Basic components of AMP are:

* AMP JavaScript

All external resources as a copy and paste JavaScript code gets blocked by pages that subscribe to AMP pages. AMP provides a selected and "approved for use" JavaScript library. Any additional or variant JavaScript needs to fit into an AMP-iframe.

* AMP Cache

From a cache perspective, AMP avoids pages being recalled from various locations, i.e., a page request from a mobile device in the UK does not need to get fed and served from another location each time it's requested. Instead, Google stores pre-rendered pages and updates the content each time the AMP page gets an update on your site. Voila, instant page load.

* AMP HTML

Complying with AMP rules means that very strict ordering of HTML is needed. You'll have to pay close attention to your HTML use, as certain tags may not be used on AMP pages and the use of forms are out as well.

AMP and WordPress

WordPress Plugins ensure that users may easily get the most out of their SEO, Coding, Analytics, etc. There are a variety of AMP plugins that will make AMP integration easy for any WordPress user. Our favourite AMP plugins for WordPress are: AMP, AMP for WP, WP AMP and PageFrog.

By simply adding these plugins to your WordPress site, you'll allow for your content to be AMP friendly. It's important to remember that many plugins only work on standard WordPress posts, and not your pages or custom posts. Plugins, like AMP Plugin, are stripped plugins that only delivers your site content without logos or customisations. Thankfully there is some custom coding you could do to spruce up your display and make things look better.

AMP and HubSpot

The HubSpot CMS/COS has made life so convenient for subscribers and partners, with its approach to AMP integration no different. So far, AMP is only available for posts, or news content. Here's how to implement AMP in HubSpot …

1. Go to the Content Settings tab, click Blog

2. Choose which blog you'd like to use with AMP

3. Scroll down the list under templates, and check the "Enable Google AMP formatted pages" box.

What else does Accelerated Mobile Pages affect?

SEO gurus will immediately tell you that, although PageRank has not yet incorporated algorithms to score AMP pages, they soon will. So it's best to get your site ready for the updates ahead of the curve. Most important is the value you'll receive from an organic traffic boost to your site as users get served AMP pages in the uppermost Google carousel. Given user habits, these results will most probably get the most clicks as the bulk of searchers are looking to get served as fast as possible.

The influence of AMP doesn't end here though. AMP versions of webpages will benefit your business holistically when you add them on your landing pages and if you're primarily an eCommerce company. The effect on social media will mean more exposure for businesses that use these platforms to leverage their products or business.

Landing Pages:

AMP ALP, or AMP Ad Landing Pages, will benefit businesses looking to convert from a landing page as visitors are served the page almost immediately. This could be justified as an ROI boost, as fewer users will click away from your page for loading too long. Easy resources such as AMP components for carousel, video, light box, etc., will help designers easily incorporate AMP to improve your post's user experience (UX). Your designer can also look at using the AMP-iframe to work around any AMP limited or unsupported CRMs. Being that AMP is only available for blogs posts for now, its true potential is yet to be explored.

ECommerce:

AMP affects eCommerce, as users get served immediately with the pages or products they search for. It's a good idea then, to start your AMP page creation with the Home Page or Product Category page first, and then carrying on with the individual product pages. eBay has seen an enormous transformation thanks to AMP, with first reports of their AMP-powered product category pages immediately showing up faster and looking cleaner than non-AMP pages. In fact, their AMP results have been so successful that they have been planning to work the new style into their desktop and native apps as well. According to eBay's Principal Web Engineer, Senthil Padmanabhan:

“We have been thinking about leveraging the AMP ecosystem for our own search, similar to how Google handles AMP results. This plan is in very early stages of discussion, but the possibility of our search using AMP technology is very interesting.”

Social:

Social media will largely benefit from AMP as well, with Pinterest becoming more focused on advertising and eCommerce, and already experimenting with AMP pages. The surface, it seems, has only been scratched concerning the reach and influence of AMP. Will accelerated mobile pages benefit your company? And what are some of the major detractors of using a simpler, more stripped page/post?

AMP … the Bad and the Ugly

Still in early stages, there are bound to be more improvements and workarounds, add-ons, plugins and fixes as developers and designers get more into grips with Accelerated Mobile Pages. For now, though, as exciting as it all sounds, there are a few drawbacks to AMP that could leave a negative impact. Some of these include:

Forms – As mentioned before, AMP and forms don't get along very well. If you do decide to incorporate forms through CRM's such as HubSpot for example, you'll have to work around the limitations of AMP-iframe and lightbox features of an AMP page.

Design Drawbacks – The lack of external Javascript and external stylesheets, means that a significant amount of custom design and UX gets left off the 'updated' page. You'll have to ask yourself how important your design is compared to your content, and what exactly you'd like to achieve from adding AMP to your post.

Non-article Pages – One of the biggest shortcomings is the fact that only blog posts and news articles benefit from AMP as optimisation for other forms of content and pages on your site has not rolled out yet. You can count on this being updated very shortly given the fantastic results and immense feedback.

Additional Development – Depending on the size of your company, the cost of additional design might not be an option for your business. Google doesn’t accept AMP pages unless they are clean and completely free of errors, meaning that a developer's time and cost has to be factored into every page that gets updated.

If mobile response and site speed (mobile and desktop) are considered vital for SEO and site optimisation – then AMP is soon to be imperative to keep up with the competition and delight your users with a fast and fully optimised mobile page. Why not consider utilising Growth-Driven Design? That way you can measure the impact on your growth, conversions and leads, and assess whether AMP suits your inbound marketing strategy.

differentiate-your-b2b-company

web-redesign-process-final-comment

...my two cents worth

Teamwork.

It's a lot more rewarding when you work with like-minded individuals who keep you in-the-loop, are keen to share knowledge and who are passionate about turning-out a kick-ass product.

web-redesign-process-teamwork

We promise that we won't SPAM you.