AMP - Accelerated Mobile Pages

What is Google AMP

AMP, or Accelerated Mobile Pages, is a framework to build web pages introduced by Google in early 2016. Aimed to improve the loading speed for web pages on mobile, AMP’s benefits have been tempered by some major drawbacks that have slowed its adoption, despite the fact that Google has given priority in mobile search results to AMP pages.

Google AMP Benefits

User Experience

To convince your users that sticking around is worth their time, it is important to give them what they want and expect, in the most effortless way possible (this is the reason we built the Branch deep linking service). If you’re a content producer, then AMP contains the promise of huge improvements to your user experience. Of course, if your website already scrupulously follows best practices and doesn’t contain garbage code, AMP likely won’t give you much. But for everyone else, this is a great opportunity to make a major upgrade with fairly minimal investment because a lot of the heavy lifting has already been done for you.

This is an example of what reading in Pinterest Pin with AMP is like

As an example, the JDK (Java Development Kit) contains the API as well as the compilers, runtimes, and other miscellaneous tools. The Java API is simply all the libraries that make up the core language that you can work with out of the box. (Source).

This is what reading a Pinterest Pin without AMP is like

Visibility on Google and Others

The AMP project has actually been underway since last May, but you’d be forgiven if you only heard about it for the first time this week. Google put a very big thumb on the scale by introducing that new AMP carousel at the top of its live results page for select, news-related search queries. However, since the list of AMP supporters already contains a Who’s Who of the most important names in both tech and publishing (with the notable absence of Facebook and Apple, of course), it is probable that AMP-enabled pages will continue to get increasingly special treatment in future. Even if your site doesn’t need the speed and usability boost AMP offers, it may still be worthwhile simply to take advantage of the improved visibility for your content.

AMP Drawbacks

One of the drawbacks of AMP is the limited and trict framework that doesn’t present a mechanism for users to click to the content publisher’s web properties from an AMP page. Instead, the AMP page “steals a brand’s traffic” by always taking users back to Google search results. This concern was first voiced by Alex Kras’s post Google May Be Stealing Your Mobile Traffic and amounted huge backlash from the web and publisher communities alike.

The second wave of criticism was brought on by the publisher community, as AMP pages don’t monetize well. As Google started showing more and more AMP pages in search results, more publishers adopted the standard—upon adoption, publishers discovered that these pages don’t actually help them grow mobile traffic or revenues.

Google AMP pages are slowly creeping into the open web despite all the criticism. Over 2B mobile web pages were released by the end of 2017. While it will be very hard for individual organizations to push back on Google for such a dramatic change to the web standards, solutions like AMP Journeys are available for businesses to turn AMP traffic into mobile app installs and mobile user engagement.

How AMP Works Under the Hood

Since you’re still reading, you probably want to know how all this magic actually works. As mentioned, AMP pages exist in parallel to the traditional pages we already visit. This means that in practice the same content will often (if not always) be available in two different versions, connected together with a special tag in the header section of each one. Googlebot already uses this tag for indexing, and it’s conceivable that future mobile browsers (at least, those not named “Safari”) will start to look for it, too.

The specification itself is an evolution of familiar web standards, which come together to form three main ingredients, AMP HTML, AMP JS, and AMP Cache.

AMP HTML

AMP HTML is essentially a form of traditional HTML, and is indicated with (yes, that is a lightning bolt emoji — we’re not in Kansas anymore). There are a number of custom attributes to specify, a few troublesome tags that are banned outright, and a sizable collection of new elements that are available to provide pre-configured interactivity without impacting performance. In other news, styling is still accomplished with standard CSS.

AMP JS

For performance reasons, AMP JS is the only JavaScript allowed in AMP pages. Yes, you read that correctly, it really does mean everything else is blocked unless you use an iframe. Technically speaking, AMP JS is a runtime framework that intelligently manages and prioritizes external resource loading, implements the custom AMP HTML elements, and performs in-browser validation (which is useful for development). But most developers can simply think of this as a magic box. Like the engine in your car, it’s not necessary to understand all the details as long as you know how turn it on.

AMP Cache

If AMP JS is the engine in your car, then AMP Cache is the interstate trucking company that delivers fuel to your local filling station. You won’t even need to think about it unless everything suddenly stops working. Under the hood, this part of the system improves performance by hosting all resources in a single location and optimizing their delivery. While technically optional (AMP pages are hosted on a normal server just like every other HTML file), every AMP implementation comes with an implicit agreement that all content must be available for crawling and caching by third parties. Anyone can use a CDN to set up and run an AMP cache, but only content in Google’s cache (which Google has stated can be used without restriction and at no cost) is currently getting preferred search results treatment.

AMP’s Secret Speedy Rendering Sauce

While these three ingredients reduce the amount of data in each page and deliver it to the user really quickly, AMP is also designed to be intelligent in its rendering process. Bandwidth and CPU are focused on things the user is likely to see right away and content is strategically preloaded, so that in many cases the next page has already been prepared before the user even requests it. To make sure layout is calculated correctly the first time, explicit sizes are required for all elements, CSS must be inline, and third-party JavaScript is only permitted inside iframes. All of this combines to ensure the AMP runtime can load resources in the most efficient order (i.e., text before embedded videos, ads after content) without re-rendering the page and disrupting the user experience.

Ready to ignite your mobile growth?

Take a tour of our platform to see how Branch can help you everywhere. Or jump right into the code.

A

F

A

F

M

C

M

C

D

C

A

P

M

C

R

O

A

D

U

M

C

F

B

S

A

U

D

S

I

U

C

K

D

A

T

C

M

I

H

D

M

P

D

S

C

Q

B

C

U

M

V

C

A

T

A

K

C

U

A

P

C

P

B

E

I

L

A

V

C

A

M

A

C

W

S

R

C

D

C

I

M

I

M