What is an Accelerated Mobile Page (AMP) and How Do I Get Started Building Them?

In recent years, the number of online users who browse websites through mobile devices has far surpassed those who visit their favorite sites through traditional desktop or laptop browsers. With this shift, however, the technology for mobile browsers has not kept up with demand, leaving mobile users with a clumsy and inefficient user experience.

Several major technology leaders responded with efforts to make mobile websites faster to load and easier to read with technologies like Facebook Instant Articles and Apple News. Google, however, developed its own system, known as Accelerated Mobile Pages (AMP) that improves the user experience on mobile devices. By adopting AMP, for example, TransUnion was able to decrease its page load times by 5.5 seconds, which led to 26% lower bounce rates and users spending more time on the site.

What is an Accelerated Mobile Page?

AMP is an open-source framework that enables developers to build websites that perform better and enhance the user experience for mobile device users. For publishers of mobile content, the objective of AMP is to give them the tools to improve the loading speed and readability of their content.

The AMP Framework consists of three technologies:

• AMP HTML is a subset of HTML that restricts which tags can be used to offer a certain baseline of performance. It also has custom HTML tags that are more optimized. Developers with a working knowledge of standard HTML should not encounter any issues adapting their current pages to AMP HTML.
• AMP JS is a JavaScript library designed explicitly for mobile or any device that has limited resources. The AMP JavaScript library handles resource management, asynchronous loading, and restricts the use of third-party JavaScript to guarantee better performance.
• AMP Cache is a feature of the framework that caches AMP pages using a Content Delivery Network. Cache providers like Google, Cloudflare, or Bing validate each AMP page that it stores.

Benefits of AMP

Faster Load Times

With the advent of improved mobile networks, including Wi-Fi, 4G LTE, and the upcoming 5G, mobile users are no longer willing to wait for long page loads. Pages developed with AMP are guaranteed to load faster in mobile browsers because the framework was built specifically for delivering content quickly.

Improved Mobile Search Engine Visibility

For many search terms, AMP pages can show up on search engine results pages (SERPs) in a “carousel” above both the organic search results and the paid ads. While these enhanced search results typically only appear in searches from mobile devices, the overwhelming number of searches done by users on these devices can give AMP pages a substantial advantage when it comes to search engine visibility.

User Engagement

While slower load times often lead to higher bounce rates, users tend to spend more time on pages that have faster load times. As users spend more time on the page, they also tend to interact more with the page’s components, such as links, forms, and images. This increased engagement can also lead to higher conversion rates.

Flexible Ad Display

The simpler design schemes of AMP pages also allow for more flexibility when it comes to delivering on-page advertisements. The layout structure of AMP is specifically designed to enable developers to display ads in ways that are more user-friendly than standard mobile browser pages. The ads also load more quickly on an AMP page than on a typical page, so users are less frustrated when waiting for ads to load and more likely to engage with the ad itself.

Limitations of AMP

Visitor Tracking Issues

Although the AMP technology comes from search engine giant Google, the current tools available to track user behavior on AMP sites do not match up to Google Analytics. AMP sites allow owners to track basic usage statistics, such as the number of visitors and length of visitor engagement time, but AMP currently does not offer a wealth of opportunities to enhance the visitor’s experience.

User Interface Limitations

While many standard websites rely on cascading style sheets (CSS) and JavaScript for functions ranging from specialty fonts to additional functionality, many of these options are not available to AMP developers. Since the objectives of AMP concentrate more on speed and less on presentation, developers must use a JavaScript library provided with the AMP platform and a stripped-down version of CSS, which limits the flexibility of designing a user interface.

Cached Content

Another potential issue with AMPs occurs when Google serves a cached version of an AMP page that does not match the latest version. For sites that rely on delivering the latest news, the caching of AMPs can be an issue. Developers can update their AMP cache by applying the “update-cache” request,  but there is still the possibility of users accessing an outdated version of a website.

Implementation Issues

While the restrictions on AMPs can give sites an edge in speed, these same restrictions can make life difficult for developers. Although Google provides developers with extensive documentation and tutorials for implementing AMP rules, these rules can be complicated and challenging to put into action. For developers seeking to convert standard desktop-style pages into AMP, a more effective process may be to follow Google’s guidelines for designing mobile-friendly pages first.

How To Get Started With Building an AMP

Developers should be prepared to build two versions of their sites: the “canonical” version and the “AMP” version. The AMP version allows for the insertion of fonts, images, and videos with unique tags (e.g. amp-font, amp-image, amp-youtube, etc.). In this example, we will create a template with the minimum requirements to easily create AMP pages.

We can start by creating a new template called AMP-Template and an empty page based on this template. If we run the page through the AMP Validator, we can see that there are some errors. Let’s fix these issues within our template to turn our page into a valid AMP.

First, the “amp” keyword in the <html> tag indicated that this is AMP HTML. The <head> tag in HTML contains the metadata for a website, and this is no different for AMP.

Within the head, we include a link to the canonical version of the page. Since none exists, we link back to our AMP version. If they were different, by adding both the AMP and Canonical links, we’d be telling search engines that both pages are the same.

Unique to AMP pages is the <script> tag that links to the AMP Project and pulls in the AMP JS library. The AMP Validator also requires the charset and viewport to be defined, which helps to optimize the mobile experience. The Style AMP Boilerplate looks complicated, but it has a simple job: to hide the normal body of the page so that AMP JS can handle page rendering in a more optimized way.

Finally, we can add a container within the <body> tag so that authors can easily add content to pages that use this new AMP template. Our final template HTML is below.

<!DOCTYPE html>
<html amp>
    <head>
        <link rel="canonical" href="index.html">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    </head>
    <body>
        #parseContainer('d71d56b4-0a8b-4bb2-be15-ffa5a23366ea')
    </body>
</html>

After updating the AMP template, we can go back to the page we created based off this template and add the text “Sample Content on an Accelerated Mobile Page.”

After rerunning the AMP Validator, we can see that the page passes. By using this template as a starting point, it’s possible to convert regular HTML pages to AMP by removing restricted tags and utilizing custom tags or to create entirely new AMP-first website.

Easily Support AMP with dotCMS

The dotCMS platform can be a highly useful tool for building AMP sites quickly using the Edit Mode Anywhere Feature. Developers can easily add the AMP tags they need to enhance their website and speed up delivery to millions of mobile users. Using AMP pages in addition to the other suggestions for SEO and page performance will lead to more efficient distribution and better user experience.