Responsive website design, Norwich

AMP: Accelerated Mobile Pages

by Mike Amis

AMP: Accelerated Mobile Pages

The AMP project is an open source initiative backed by Google, Twitter and Wordpress to name a few, with the aim of delivering instant loading content and improved user experience on mobile devices. The project was first announced in October 2015 and earlier this week Google implemented the lightning bolt logo in search results for pages built using the AMP framework in a similar way to how they used to label pages as 'mobile friendly', which was discontinued earlier this year.

AMP pages are up to 4x faster than a comparable page and will use up to 10x less data, which combined will deliver page load times of under 1 second. Top AMP search page results are displayed to users in a carousel at the top of the page. Once a link is clicked the page is loaded in a Google hosted viewer. The user can then scroll through related stories from the same publisher and close the viewer to return to the main search results page.

AMP page search results and instant loading example

AMP pages are built on an extended version of html and make use of its own AMP JS javascript library which is asynchronously loaded to prevent blocking of page rendering. There are some restrictions on what can be included in an AMP page; only a subset of css styles are allowed, they must be 'inlined' and no larger than 50kb in size. External javascript is prohibited, so it's likely that AMP pages will lose some functionality compared to the rest of your website. There are differences in the way some html elements are implemented too. In many instances it is simply a case of adding 'amp' to the standard html element markup, but some elements have been dropped all together; most notably forms, which could affect the way you handle lead generation and blog subscriptions. There is already a workaround using iframes if forms are an essential part of your page. The aim of the AMP project is to place content and user experience ahead of functionality and clutter whilst still using existing technology.

The final element of AMP is the Google cache which is a content delivery network for caching and delivering AMP enabled content, making performance optimisations automatically and delivering all images, video and javascript from the same origin using HTTP2 for the best possible performance.

The implementation of AMP content could have great benefits for users, publishers and developers alike. Users get instant loading content whilst using a fraction of the data due to the greatly reduced file size. Publishers could see users read more articles and information, leading to a greater advertising revenue or an increase in leads, and developers have a framework that is open source and accessible making it easy to implement.

Contact us to discuss how we can implement AMP on your website.

Share this post
Leave a comment