Material Mega Menu - Responsive

A New Aspect of Web Development: Accelerated Mobile Pages (AMP)

By Michael Evans, on March 18, 2016

Home > Learning Center > A New Aspect of Web Development: Accelerated Mobile Pages (AMP)

By now we all know how prevalent the mobile experience has become for email and the web. Meanwhile, thanks to widespread access to broadband, email marketing and the web have grown more complex, feature-rich and even bloated. But the large scale media and deep interactivity that make desktop browsing so stunning often result in sluggish, clunky, and just plain unacceptable situations on a smart phone.

Efforts are being made to address this problem; we've recently seen the development of Apple News and Facebook Instant Articles. These in-app services strip down web content for leaner, more mobile-friendly delivery. However, these are proprietary solutions that require being signed into Facebook or the Apple News app.

Enter Google and the creation of Accelerated Mobile Pages (AMP)

Their goal is similar: to deliver 'static' pages, like news articles and blogs, in a way that reduces overhead and targets the sizes, layouts, and natural interactive features of mobile screens first. While the goal may be similar, the approach is very different. AMP is an open-source, browser-oriented solution that circumvents platform and proprietary considerations.

AMP Framework

AMP is a sort of framework that works within HTML to serve and render web documents in a faster and more appropriate format, specifically for mobile devices. It consists of a javascript runtime that loads HTML elements and content (marked up with "AMP HTML" tags) asynchronously while simultaneously stripping away just about anything the Google team feels causes slow page loads or ugly page rendering.

AMP Development

The folks developing AMP have determined that one of the biggest culprits responsible for slow page loads is the preponderance of analytic, tracking, and other scripts working in the background that tax processing and cause janky page rendering. Therefore, javascript libraries like jQuery and any custom-authored javascript are out. Subsequently, forms and other user inputs are also dis-allowed within the AMP framework.

Cascading Style Sheets (CSS)

CSS must be inlined and kept to less than 50kb in size. Images must be tagged with the "amp image" tag and also must provide dimensions. The idea here is that the fewer times a page must be calculated and re-calculated as more script calls and media considerations are loaded, the quicker and more accurately a page will render.

Why AMP is Working so Far

The effects of AMP are promising so far. Page load times of AMP content are significantly faster than standard HTML content. Load times drop even further when Google's free cache service for AMP enabled content is taken into consideration.

The Future of AMP

On the other hand, AMP remains a new and developing platform with restrictions. AMP does not allow scripting or form inputs and it can be overwhelming and off-putting. While AMP is open-source and platform agnostic, it's not a true sub-set of HTML so it isn't W3C compliant (AMP HTML tags are not recognized HTML, for instance). It's a Google thing - not a Web thing. Using AMP also requires two 'versions' of every site, one being the standard HTML version and the other is the AMP version for mobile devices. And that's the kind of clunky junk responsive design has been trying to eliminate.

We're going to hear a lot more about AMP in the coming months, especially because the principles behind it are compelling. And while Google has stated it won't necessarily rank AMP pages over standard pages, they've also made it clear that faster loading and mobile optimized pages will get priority. But no matter which platform becomes the new standard for the mobilized web, plenty of useful techniques for design and development have been brought into focus by developers.

Keeping sites lean, minimizing behind-the-scenes scripting and simplifying for a more aesthetically pleasing mobile web experience can all be accomplished through standard methods. As long as we keep those ideas in mind when we design and develop to begin with, our websites will be built to best practices for optimized customer conversion rates.

Michael Evans
Posted by
Michael Evans on Fri, Mar 18, 2016 @ 08:54
Schedule a Discovery Call