Analytics & Tech

Post by Max Crowe, Developer

Google recently announced a new initiative it is calling Accelerated Mobile Pages, colloquially known as AMP. This is the company’s latest attempt to attack the problem of Web pages loading unacceptably slowly on mobile devices, especially over cellular connections. It attempts to achieve this by reducing a page to its bare essentials and by offering easy and seamless resource caching.

How Does AMP Work?

An AMP page is like a normal HTML page, but with several unique characteristics. A website may offer AMP versions of any number of its pages; site-wide adoption of the system is not required. The transformation of an ordinary page into an AMP page happens via the AMP JavaScript library, which must be included (in fact, it is the only JavaScript that may be included in an AMP page). This JavaScript file provides some special behavior not found in ordinary HTML.

Automatic Caching

This is a big one: Google is allowing anybody who opts into the AMP project to take advantage of its content delivery network for the delivery of the page and its images. This CDN is optimized to serve files using the HTTP 2.0 specification, which eliminates much of the extra overhead found in the more common HTTP 1.1 specification and allows mobile devices to squeeze some extra performance from their limited connections. The use of Google’s CDN is not required, but it is a significant advantage to adopting the AMP specification.

Pre-calculation of Layout

A common point of frustration for mobile users is that as a page loads, its layout is in flux, because the browser doesn’t know what size to assign to certain page elements until all the external resources are downloaded (the images in particular). To address this problem, the AMP JavaScript library calculates the dimensions of every element on the page before the browser begins to render it. This means that the first thing the user sees when loading an AMP page is guaranteed to be scaled and formatted properly.

Disabling of Certain HTML Tags

The most significant difference between normal HTML and AMP HTML is, in many ways, a major caveat: AMP restricts or disables many common tags. This includes the <script> tag, which means that developers of AMP pages are effectively unable to use JavaScript. The AMP specification provides alternate ways of accomplishing some things that Web developers commonly do with JavaScript, such as displaying ads, tracking basic analytics data, displaying a lightbox, and embedding videos; but the inability to use JavaScript means that it may be difficult for many businesses to migrate their existing pages to AMP.

Another common Web technology that is unavailable in AMP pages is forms. The lack of support for <form> or <input> elements effectively makes e-commerce impossible on AMP pages; it also rules out comment systems on articles. Any Web developer wishing to take advantage of AMP while still offering these features must strategize around this.

See the AMP blog for a more thorough inventory of the framework’s optimizations.

What Does AMP Look Like?

In order to better understand the challenges and tradeoffs involved in creating an AMP page, we prepared a mockup of the Performance Content page from Performics’ website in the AMP format. The original page is at Performance Content, while the AMP page is at Performics Search SEO. Note that although the original page is fully responsive, the AMP mockup only incorporates the mobile phone experience.

Visit both pages on a mobile device over a cellular connection and you should perceive a shorter load time with the AMP version. Note, however, that certain features of the page did not survive the transition to AMP. Due to the absence of form support in AMP, the search box at the top of the page had to be eliminated. The dynamically expandable menus present in the original page, in the top right corner and in the footer, do not function in the AMP version; there is currently no way to achieve this behavior on an AMP page, although this feature is in development. These are examples of the kinds of tradeoffs necessary to buy into the AMP concept.

Should You Use AMP?

Although anybody could use it, AMP seems to have been designed primarily for websites that produce content in the form of articles. E-commerce websites may find it difficult to migrate their mobile sites to AMP; this raises the question of whether AMP adoption is worth the effort for such sites.

The first question on many marketers’ minds is likely to be whether Google will prefer AMP pages to traditional HTML pages in its mobile search results. So far, Google has made no explicit indication of this. However, given that the search engine’s recent moves towards prioritizing site speed as a ranking factor and adding special markup to search results for pages it perceives as mobile friendly, the performance improvements that come with AMP are bound to confer some amount of organic search benefit. So far, though, there’s no evidence that Google will give AMP pages preferential treatment compared to pages that use alternate means to achieve performance comparable to what AMP offers.

The AMP framework is quite new, and it is somewhat early to consider it mature. So far, it offers no support for certain common mobile Web design tactics, such as dynamically expandable menus. AMP pages may not render properly on older devices: when viewed on an iPhone 4S running iOS 5.1, the demo page mentioned in the previous section is missing several images. Despite these caveats, it is a good indicator of where mobile Web design is heading. By enforcing a variety of restrictions and best practices on Web developers, it creates a new baseline for mobile Web performance. Business whose mobile websites do not yet meet this level of performance should evaluate AMP and consider whether it is a good fit for them. If not, they must explore other ways to accomplish what AMP attempts to do, or risk attrition in their mobile audience as users migrate to competitors whose sites offer superior performance.

January 25, 2016

Google Announces AMP: Implications for Brands & Web Developers

Post by Max Crowe, Developer Google recently announced a new initiative it is calling Accelerated Mobile Pages, colloquially known as AMP. This is the company’s latest […]
January 22, 2016

The Collaboration between TV and Search

Post by Rob Kolis, Senior Media Manager As a performance marketing agency, our main focus is digital. But, we have made integrating old media, by syncing […]
January 21, 2016
SEO blog post banner

Discovering and Removing “Bad Links”

Post by Caterina Merenda, Marketing Specialist, with insights from Michelle Pantoja, Analyst Discovering bad links can be essential to SEO ranking. Our Performance Content team holds […]
January 19, 2016

The Key to Creating Better Performing Banner Ads

Post by Caterina Merenda, Marketing Specialist, with insights from Marissa de Leon, Senior Web Designer Within our Performance Content team are a group of designers that […]

Performics Newsletter