Skip to Content

Google launches its accelerated mobile pages project.

The author

Stephen Griffin

Senior Front End Web Developer

The Google-backed AMP (Accelerated Mobile Pages) project officially launches today (February 24th).

What it is:

The project provides an open standard for content creators, which claims to "dramatically improve the performance of the mobile web". In a world where mobile is now often the primary platform for content consumption, anybody (read "everybody") who has waited impatiently for a non-optimised desktop page to load on their phone will welcome such an initiative.

Google has stated that a page created with AMP HTML can load anywhere between 15% and 85% quicker than the non-AMP version of that page.

 

Why it's important:

User experience is important, but with Google's 'Mobilegeddon' algorithm now making mobile friendliness an important factor in search rankings, it becomes even more important to consider options for improving the mobile experience.

This means that users will benefit from a faster web experience and publishers will likely see a boost in mobile search rankings. The only difficulty is that while we know what a lightning bolt and ‘AMP’ means, Google hasn’t made it very clear for its users.

AMP isn't the first platform to tackle the problem of slow page loads on mobile. Facebook and Apple both launched similar programs last year (Instant Articles and Apple News respectively), which also aim to speed up content consumption for mobile users. However, Google is doing things differently by making the AMP project open source, with all project code available to download, use and fork on Github.

How does it work (The developers bit):

So, what is it that AMP does that normal, slower-loading non-AMP pages don't do? In the rest of this article I’ll take a developers look under the hood to find out how AMP works, and how you can start using it for your own content today.

AMP isn't a replacement for hand-tuned optimised HTML code. A developer with a solid understanding of page performance could create a page that loads equally as fast as an AMP page; rather, AMP imposes certain restrictions that remove some of the usual culprits that traditionally slow web pages down. It does this by using a subset of the existing HTML spec with custom elements, and the inclusion of an AMP JS library that deals with the behaviour of the custom AMP HTML elements.

It will come as no surprise that embedded media assets (images, video, audio, iframes) often make up the largest percentage of a web page's weight, and these are replaced with custom AMP HTML elements:

            <img/> becomes <amp-image/>

            <video/> becomes <amp-video/>

            <audio/> becomes <amp-audio/>

            <iframe> becomes <amp-iframe/>

Traditional unAMPed media elements are prohibited and, if included, will result in an invalid AMP document. AMP uses static resource sizing when serving AMP-media items, loading the correct-sized asset after the page layout has been calculated. This ensures that users aren't loading large desktop optimised images to smaller devices that are then scaled down in browser, as often happens in many responsive websites.

Pre-calculating layout before rendering also means that expensive browser repaints (time taken for the browser to redraw the layout when elements change size or position) do not occur. It's not just your processor that benefits from this pre-calculated layout; I'm sure we're all familiar with the frustration of starting to read a paragraph of text, only to have it jump down the page as an advert or image further up the page suddenly loads. Well, with AMP that will never occur.

Add to this the fact that loading of the media assets is delayed until the item becomes visible within the viewport and the result can be somewhere in the region of 25% or less of the un-optimised page weight. It doesn't take a mathematician to understand that by using this "lazy loading" approach, the page can load up to four times faster!

When waiting for slow web pages to finish loading, it's often multiple JavaScript libraries that can be to blame. AMP prioritises content over interactivity and does not support the use of author-written JavaScript. With these JavaScript restrictions in place, content publishers may wonder about the inclusion of tracking scripts and ads.

Ads are not permitted to be embedded directly, instead they are moved out of the critical path by being requested within sandboxed iframes to prevent page blocking. Inclusion of ads can be done this way by using the custom <amp-ad> element, and <amp-pixel> is provided for tracking purposes. Other components available include <amp-carousel>, <amp-lightbox>, <amp-instagram>, <amp-twitter> and <amp-youtube>.

Animations are allowed, but only if they are hardware accelerated. GPU-only animations are achieved by using CSS transforms and opacity properties. Animating other properties is disallowed, resulting in a baseline performance guarantee. External CSS stylesheets are not permitted and only one style tag should exist within the head of the document. CSS is also limited to a max size of 50kb. This might not sound large enough to developers who are used to working on large site-wide CSS, but in reality it is more than sufficient to create a sophisticated single page.

Another speed boost comes from caching. By using the AMP format, publishers are making their content available to be cached by Google in the cloud. Google has stated that all AMP pages will benefit from Google's cache at no cost to the publisher. Other third parties can also build their own cache as well, the goal being a distribution system built around caching that will result in better performance for the content consumer.

Hopefully that gives you an introductory overview of some of the approaches that AMP uses to cut page load times for mobile. The restrictions are many, and the platform will not be suitable for all kinds of content, but for the right kind of content such as news articles, blogs and static pages, the speed gains can be enormous. For those looking to implement AMP pages for themselves you should head over to the official Github pages to read the documentation, download some examples, and access tutorials to get started.

https://github.com/ampproject/amphtml