- ALL
- CATEGORIES
What we learned delivering Accelerated Mobile Pages for Unicef UK
The last time you did a web search on your mobile you may have noticed a new symbol in some of the search snippets. The lightning bolt in a circle and ‘AMP’ indicate that the page is an Accelerated Mobile Page, in other words, one that’s been designed to load quickly on mobile devices. With page load times a major usability concern on mobile devices, and with content aggregators favouring mobile-friendly pages over slower-loading alternatives, implementation of AMP looks set to be a major concern for publishers over the next few years. We recently implemented accelerated mobile pages for Unicef UK – here’s a summary of what we learned.
What is AMP?
Accelerated Mobile Pages is a Google-backed project that is intended to provide an open standard for publishers who want to provide fast-loading content for mobile users. Google started displaying AMP links in search results early in 2016. At that point it was only the major news publishers (think CNN, NYT, The Guardian) who saw the benefit of creating new, mobile-optimised versions of all their pages. They didn’t want to miss out on the clicks that come with inclusion in the ‘Top Stories’ carousel that now dominates the first page of search results for many terms.
But it’s not just Google that’s pushing AMP. The Twitter, LinkedIn and Pinterest apps all support AMP content, which enables them to serve articles to users quicker. Facebook meanwhile, has developed its own platform called Instant Articles.
Do you need to create AMP pages?
News publishers are most likely to be competing for those Google ‘Top Stories’ slots and so will have the most to gain from implementing AMP. But anyone who wants to rank higher in mobile search results, or deliver a faster, more user-friendly mobile experience (according to Google, 40% of consumers will abandon a page that takes more than three seconds to load) will benefit.
In fact, if you have a slow loading site, or pages that don’t pass Google’s Mobile-Friendly Test, implementing AMP versions of your pages could be a simpler way to (partially) solve the problem in the short term than rebuilding your website from the ground up.
How does it work?
Essentially, an AMP page is a normal HTML page with a few modifications and restrictions. AMP controls the order items are loaded onto the page, prioritising content so that the viewer can start reading almost immediately. Some apps, including Google, even cache the static content so that page load times are instantaneous.
Most of the modifications involve replacing certain HTML tags with their AMP equivalent. For example the <img> tag becomes <amp-img>. Elements such as images and videos have to be given a width and height which allows AMP to calculate the aspect ratio so it can layout the page correctly before all the assets have loaded.
The most important restriction is on the use of JavaScript. You can’t include any of your own and the only dynamic elements allowed are those provided by special AMP tags (e.g. <amp-twitter> for embedding tweets and <amp-analytics> for adding GA tracking snippets).
For each dynamic element you have to include a specific AMP CDN hosted JavaScript file in the <head> of the page. For example, the <amp-accordion> component requires:
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>The full AMP specification can be found on GitHub.
How do you implement AMP?
To tell bots and apps about your AMP pages you need to point to the AMP version of the page using the link tag in the page’s head section.
<link rel="amphtml" href="{URL of amp version}">Likewise, the AMP page points back to the main page with a canonical link to avoid any duplicate content issues.
<link rel="canonical" href="{URL of original page}" />AMP doesn’t use external CSS, since it blocks page load, so all styling all has to be put in the head section of the page using <style amp-custom> tags. There are also a few styles which are banned or restricted under AMP.
To serve ads on your AMP pages, you just need to add the <amp-ads> component.
Ready-made AMP solutions
There are already several WordPress plugins available which handle the conversion from HTML to AMP tags, AMP for WP being the most popular at the time of writing. It includes all the necessary AMP JS, depending on what’s been used on that page, and comes with some default styling which can be overwritten (amp-templates). However, a quick glance at the support forum for the plugin shows that successfully implementing it is often a lot trickier than simply installing and activating.
There’s also a module for implementing AMP on Drupal, which is suffering from similar teething pains.
Our custom AMP solution for Unicef UK
We recently implemented a custom solution for Unicef UK to serve AMP content to users from their new WordPress website, which we designed and built for the charity in 2016. The site provides a bespoke drag and drop page-builder for editors, allowing them to easily construct pages from a wide range of modules to tell emotive stories and provide contextually relevant calls to action.
Simply installing and activating an AMP plugin wouldn’t have worked on these complex pages. Instead, the front-end for each of the page-builder’s component modules had to be rebuilt using specific markup adhering to the AMP specifications. On page load, we loop through every module that’s due to appear and then, if necessary, add the specific AMP CDN-hosted JavaScript to the head.
Unicef UK’s custom AMP solution (above): on the left, the Page Builder allows editors to drag and drop modules to compile a page; on the right, the page rendered as an Accelerated Mobile Page.
We utilised the marvellous Timber plugin so we could write our HTML using the Twig Template Engine, which allows for a greater separation of concerns between our PHP logic and the presentational markup. The AMP pages load a totally independent set of Twig template files from the normal website, which means it’s very simple to tailor the code to the exact requirements. Our streamlined Sass is converted to minified CSS as part of our build process (AMP CSS styling can’t exceed 50,000 bytes) and a final PHP function injects it into the head.
The end result is an AMP experience which visually almost completely mimics the mobile version of the normal site, but which also has all the fast-loading advantages of AMP.
Leave a reply