An introduction to Google AMP
Slow mobile content load times are a direct threat to your brand’s digital strategy. They can make the difference between converting a potential customer or losing them at the first hurdle. As the average page weight continues to rise, this technical challenge is set to grow for brands.
The time taken to load a site to a usable state directly affects how long a user spends on your site. So the stakes are high if a customer can’t access your mobile content quickly – within three seconds, to be precise.
Not only does engagement drop around the 3-second mark, more than 50 percent of users will actually abandon a site on a mobile device if it takes longer than this to load.
So what’s driving this increase in page weight?
The largest increase has come from images, as mobile and tablet resolutions rise – along with the pixel density of these devices. But page weight increases have also come from CSS and Javascript, as pages become more interactive, and from third-party modules, which can add insert scripts into the document and slow rendering in the process.
Tech giants are tackling load times
An example of Facebook's instant-loading articles
Apple, Facebook and Google are addressing the problem of slow mobile sites by providing solutions that allow content to be distributed on their platforms much quicker than on publishers’ own sites.
All three have different ways in which content needs to be formatted before being ready for these platforms – and all three support advertising, allowing publishers to generate revenue.
Apple distributes content through the Apple News app, available on iOS devices such as the iPhone and iPad in the US, UK and Australia. Facebook Instant Articles, meanwhile, provide Facebook app users with instant-loading articles. Articles claim to load ten times faster than natively, with 70% of users less likely to abandon the article.
Both provide performance improvements that can aid the performance of mobile products.
Google’s Accelerated Mobile Pages (AMP), on the other hand, is an open-source initiative aimed at improving the mobile web experience by providing clean and instant-loading content. AMP pages can be found when users search via Google on a mobile device. Crucially, AMP can improve the ranking of your web pages.
How Google AMP works
Google AMP can improve the ranking of your web pages
By adding code to your content, you can use Google AMP to serve a simplified version of your website to mobile users. AMP-friendly content is separate from the original article and is stripped of performance-heavy features, conforming to rules which work towards improving page load and render times.
A link relation is added to your content, alerting Google that there’s an AMP version of the content that should display in mobile search results. A canonical link is also added to the AMP content to link to the original content.
When AMP content appears in Google search results on mobile, it’s arranged in a ‘Top Stories’ carousel near the top of the results, below the sponsored content. It also appears amongst other search results, but with an AMP icon signifying that the content is AMP-optimised.
When clicking through to an AMP-optimised page, a Google-cached version of the page loads and – having adhered to AMP project guidelines – the page loads ‘instantly’. Clicking on any links within an AMP article will take you to the original site.
The technology behind Google AMP
Google AMP consists of three parts:
- AMP HTML
- AMP JS
- Google AMP Cache
Let’s now take a closer look at those components.
Google AMP HTML
AMP HTML tags extend current HTML, replacing some HTML tags to provide custom functionality that’s not available by default. These tags are AMP HTML components and include tags such as <amp-img />, <amp-video/>, <amp-audio/>, and <amp-iframe> which replace the HTML tags <img/>, <video/>, <audio/>, <iframe/> to provide AMP-specific features such as ‘srcset’ support for images.
Some HTML tags are prohibited to use in AMP documents, such as <iframe/>, <object/>, and <embed/>, to limit external resources slowing down the page load.
Page styling cannot be linked to an external stylesheet, but rather placed in the head of the document within <style amp-custom> tags. The amount of styles allowed within an AMP document is limited to 50kb.
Google AMP JS
Google AMP requires you to include the AMP JS library into the head of your document. This library implements best practices, manages resource loading, and makes the AMP HTML tags work.
The library is loaded asynchronously so as not to block the rendering of the page. Other features of AMP JS include:
- Pre-calculating page layout before resources are loaded
- Disabling slow CSS selectors
- Setting any other JS requests to asynchronous
- Sandboxing iframes
Google AMP Cache
The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. All page assets are loaded from a single origin and it makes use of HTTP 2.0.
Using the AMP framework, publications are guaranteed that their content will be delivered to users quickly, without content jumping as the page loads, and with the ability for content to generate revenue through a limited set of ad formats.
The tradeoff of these performance improvements is a scaled-down version of the original content due to the controls which the Google AMP framework imposes.
Automating the build process
Since your AMP document will live separately from the original page, try to automate as much of the page building as you can to minimise the overhead of managing two separate pages.
Google provides a validation tool, built into AMP JS, to ensure pages are valid when you’re building an AMP document. This tool can report any errors found into the browser console as you’re building the page.
To activate the validation tool, you just need to add #development=1 at the end of the URL. There’s also an online validation service where you can paste your AMP code to check for any errors, as well as a Google Chrome extension.
The Google AMP opportunity
Google AMP helps ensure your mobile products are seen within a matter seconds. And with Google ranking AMP-friendly sites more highly in search results, it’s also a great opportunity to optimise your pages for mobile search.
Some publications have already gone down the path of providing AMP versions of all their content. Others serve a limited set of articles, based on popular search terms, to attract new users. Both approaches allow you to attract mobile users through Google search without impacting your existing content – and without you having to overhaul your site.
Creating an AMP version of your existing content does create some additional overhead in terms of future maintenance, but there are compelling reasons to see what it could do for your brand.
