What is Accelerated Mobile Pages (AMP)?
Accelerated Mobile Pages (AMP) is an open source HTML framework created by Google in 2015 to build faster-loading landing pages for the mobile web. The goal of AMP is to improve the loading speed and experience of mobile web pages so brands can improve conversion rates, Quality Scores, and Ad Rank.
Our take on AMP’s benefits
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.
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: https://branch.io/img/glossary/pinterest-with-amp.gif
- This is what reading a Pinterest Pin without AMP is like: https://branch.io/img/glossary/pinterest-without-amp.gif’
Visibility on Google and others
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 strict 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. 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 (e.g., text before embedded videos, ads after content) without re-rendering the page and disrupting the user experience.