Accelerated Mobile Pages


‘Accelerated Mobile Pages’ (AMP) is an open source, cross-platform framework with which the loading speed of mobile websites can be significantly increased. It is based on the reduction of CSS and JavaScript, a content delivery network, as well as modified HTML. The project is supported by Google.

Background

The use of mobile Internet is increasing at a rapid pace all around the globe. For this reason, the future of the Internet will be mobile in many areas. Web content must therefore be optimized for mobile devices. Not even mobile commerce is spared by the increasing use of mobile Internet. The changes in the surfing habits affect the website design and adaptation techniques that are used to present websites. In order to improve the usability as much as possible, mobile websites certainly have to be fast. According to a survey from 2015, more than 50 percent of the respondents in Germany find that mobile pages should not take more than 3 seconds to load.

Another study revealed that the bounce rate increases to more than 50 percent if a mobile website takes more than 10 seconds to load. The effect of differences in the page loading times becomes even more apparent in online shops. Here, a few fractions of a second can determine whether a visitor becomes a buyer or not. The speed optimization should definitely be incorporated in mobile optimization. By declaring the page speed as a ranking factor in 2010, Google itself stressed the fact that website loading speeds are an important factor for positive user experience.

History

The Accelerated Mobile Pages project was launched in October 2015. The basis for the establishment of the open source initiative compelled debates and discussions between publishers and technology companies, where the need for faster loading mobile content was often the main topic. The initiators, which include Google, WordPress, and Adobe, all aspire to create a complete mobile eco-system. This system should be beneficial to both publishers and developers, users, and consumer platforms. Other technology partners include the Pinterest social network, Twitter, and LinkedIn. Among the first publishers to implement AMP are the “Zeit” and “Frankfurter Allgemeine Zeitung” in Germany, the “Washington Post” and “Buzzfeed” in the USA, the “Guardian” in England, and “El Pais” in Spain.

Due to the open source approach, it should be expected that AMP will spread and take root quickly just like the Android operating system for smartphones. With the announcement from Google that AMP websites will also be indexed starting February 2016, webmasters now have an additional incentive to implement the framework. It is even suspected that Google will make AMP pages recognizable in the SERP, just like it already does for pages that are optimized for mobile use.

Functional principle

The loading speed of a website primarily depends on the size of the files to be loaded. The framework therefore tries to reduce the entire size of a webpage to a minimum. At the same time, the contents of the AMP website are cached and made available on a proxy server. If a user accesses the contents, they are loaded through a content delivery network. The source code of the AMP websites can be interpreted by all servers.

  • AMP HTML: The HTML source code is customized and reduced by AMP. Only one HTTP request occurs per page call.
  • AMP JavaScript: AMP websites only use asynchronous JavaScript. This ensures fast rendering of the website since the loading of the page cannot be blocked by JS resources. If third-party JavaScript files are integrated, the embedding is done via iframes.
  • AMP CDN: A cache of AMP websites is created on proxy servers all around the world. This way, the contents can then be delivered through a content delivery network that is based on http 2.0. The CDN also checks whether the AMP website is functional.

The great advantage of AMP is that the loading speed of a website can be calculated and scaled accurately in advance. Other improvements include the specification of the exact file size for images or other embedded media. When an AMP website is loaded, the technology is able to prioritize the individual downloads. Here, the positions of the individual files in the sources are also interpreted in addition to the file size.

CSS files are also affected by the speed optimization. For instance, only inline styles that are not larger than 50 kilobytes are allowed for CSS.

Applications

Basically, Accelerated Mobile Pages are not limited to a specific area on the web. E-commerce applications for AMP websites, special registration forms, paywalls, etc. are also conceivable. The initiators opted to refrain from any prior restrictions. As far as integration of AMP websites in the Google search results go, only news publishers have been affected so far (as of December 2015). In the long run however, online shops that have special AMP product pages, or travel service providers who for instance simplify booking through quick AMP websites for mobile users are also likely to be integrated. Since there are no limitations in terms of the platform or purpose, many different applications will certainly emerge in the next few years.

Modifications to the HTML code

Modifications to the HTML source code are necessary in order to implement AMP websites. For example, media tags are given the prefix “amp”.

  • Images: amp-img
  • Videos: amp-video
  • Audio files: amp-audio
  • iframes: amp-iframe

Example in the case of a video: 

<amp-video src="topvideo.jpg" alt="mein top video" height="500" width="800"></amp-video>

These tags must be used for AMP websites:

  • Type of document:
<!doctype html>
  • Top level tag
<html>tag (<html amp> also works)
  • Canonical link in the header section:
<link rel="canonical" href="Original-URL" />

Coding in the header section: 

<meta charset="utf-8">

View port in the header section: 

<meta name="viewport" content="width=device-width,minimum-scale=1">

Reference to AMP-CDN in the header section: 

<script async src="https://cdn.ampproject.org/v0.js"></script>

Specification of the opacity: 

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

Whereas the rel-attibute and canonical tag are not a must in conventional websites, AMP websites must contain these two elements in the header section.

  • rel-attribute: Shows crawlers that there also exists an AMP website version of the current page.

Example: 

<link rel="amphtml" href="https://www.mydomain.com/amppage-of-completepage.html">
  • Canonical tag: The canonical tag on the AMP website points to the original website.
<link rel="canonical" href="https://www.mydomain.com/amppage-of-completepage.html">

As of today, Google has not announced any specific recommendations e.g., rel-tags for AMP websites that should be combined with other rel-tags for app indexing. Even for the combination with hreflang, there are still no specific guidelines (as of December 2015).

If the AMP page is the only website that has this content, the canonical tag points to itself. 

<link rel="canonical" href="https://www.mydomain.com/amppage-of-completepage.html">

Importance for mobile marketing

AMP websites should load within milliseconds. Since advertisements are also affected by the optimized loading speeds, advertisers can use AMP to try and ensure that their advertisements do not have a negative effect on the user experience. This is because today, advertisement banners or interstitials are often perceived as a disturbance by mobile Internet users.

The AMP frameworks supports many different advertisement formats. Thus, this technology presents advertisers with a broad range of advertisement options. Since the framework is not dependent on the platform, advertisers are not limited to just a single company when wanting to place ads.

Web Links


Retrieved from "https://en.ryte.com/wiki/index.php?title=Accelerated_Mobile_Pages&oldid=6885"

Category