Accelerated Mobile Pages (AMP) – even faster mobile websites
Nowadays, speed is a decisive factor for Internet users. The amount of time that a page takes to load determines whether visitors stay on a website or not. In particular, the increasing use of mobile Internet calls for fast mobile websites.
A newly developed framework is now aimed at providing the required speed. The open source Accelerated Mobile Pages project ensures that mobile web pages load faster through the rendering of static HTML content. Google plans to integrate AMP websites in its search results starting February 2016.
This article shows what the Accelerated Mobile Pages project is about and outlines the possible effects that the framework could have on the search.
Goal and functioning principle of AMP
The basic objective of AMP is to reduce the page loading times in order to make sure that mobile Internet users are contented. It has long been clear that action is needed in this area. According to Google, about two-fifths of the users usually leave a website if it takes longer than 3 seconds to load. With AMP, web content should now be availed within milliseconds. Even the more complex content, e.g. videos or high-resolution images, should now load faster.
:format(avif))
The functioning principle of AMP is relatively easy to explain. The source code of website’s content has been reduced to a minimum are temporarily stored on a proxy server in a content delivery network. They can then be loaded quickly from there when the corresponding document is called on the Internet. Here, it should not matter what device (smartphone or tablet) is used.
The AMP framework is based on three components:
1. AMP HTML: This is a modified form of HTML that can be interpreted by all servers. Only one http request is sent per page download.
2. AMP JavaScript: AMP only allows asynchronous JavaScript. This guarantees fast rendering of the website since no external resources can be blocked. Third-party JavaScript can only be loaded through iframes, which also have no influence on the rendering of the main content.
3. AMP Content Delivery Network: AMP documents are compiled and saved temporarily on different proxy servers. Loading the documents through the content delivery network takes place via http 2.0. This also checks if the AMP page is functional.
Furthermore, additional tuning allows for higher loading speeds. Here, the file size of external data sources should be specified in the HTML document e.g., for images, advertisements, or iframes. AMP uses these data to determine the position and size of the corresponding element before it is downloaded. AMP also prioritizes the download files. In addition, only inline styles that have a maximum of 50 kilobytes are allowed for CSS.
Special features for the implementation
The HTML code of AMP websites should ideally be adapted in some sections e.g., when embedding images, videos, or iframes. All tags are given the prefix “amp”.
Images: amp-img
Videos: amp-video
Audio files: amp-audio
iframes: amp-iframe
Example of an added image file:
<amp-img src="picture.jpg" alt="Image" height="400" width="800"></amp-img>
Note: Some tags, such as “embed”, are not allowed in AMP pages. A preliminary list of the required tags can be found on GitHub.
The following tags are required for an AMP document:
Type of document: <!doctype html>
Top-Level-Tag <html>tag (<html amp> also works)
<head> and <body> Tags
Canonical Link in the <head> section:
<link rel=”canonical” href=”Original-URL” />
Coding in the <head> section:
<meta charset=”utf-8″>
Viewport in the <head> section:
<meta name=”viewport” content=”width=device-width,minimum-scale=1″>
Reference to AMP-CDN in the <head> 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>
Tip: Publishers can also optimize their AMP pages in terms of color (background color, text color). This can be done using <style amp-custom>.
There are 2 HTML attributes used in search engine optimization that also play a key role in AMP documents.
rel-attribute: This tells crawlers on the original website that an AMP page exists.
The following is therefore added in the <head> section:
<link rel="amphtml" href="https://www.website.com/amppage.html">
Canonical tag: A canonical tag is added on the respective AMP page.
<link rel="canonical" href="https://www.website.com/whole-page.html">
If the AMP page is the only version, the page is defined as the canonical page.
<link rel="canonical" href="https://www.website.com/amppage.html">
All the currently available JavaScript codes and additional tips about AMP can be found on Github.com.
AMP vs. Facebook Instant Articles
The Accelerated Mobile Pages project is now seen as Google’s answer to Facebook’s Instant Articles. As such, the two systems can be compared based on the key aspects.
Similar objective: Instant Articles and AMP are both aimed at achieving faster loading times in order to spread information even faster. Back then, Facebook announced that Instant Articles would be up to 10 times faster compared to conventional articles on Facebook. So far, there have not been any such statements from Google about AMP.
Different host: Instant Articles are hosted on the Facebook platform. AMP is an Open Source system that is supposed to be usable all throughout the web. The contents of an AMP-optimized website are hosted by the respective publishers themselves.
Platform: AMP websites will be integrated into Google Search starting February 2016. Facebook’s Instant Articles will remain available only on the platform and will not be indexed by external sites.
Formats: Both the Instant Articles and AMP websites can contain high-resolution contents in the form of images or auto-play images. In the future, AMP should be able to support many different formats in which the AMP HTML code can be implemented.
What next?
First, publishers from the telecommunications field are required. For example, “The Washington Post” is among the first publishers to create Accelerated Mobile Pages. If you visit “g.co/ampdemo” using your smartphone, you will see the first results in the Google search.
:format(avif))
Figure 1: AMP version of "The Washington Post"
Reports indicate that Google plans to mark AMP websites in search results in the future, just like it uses “mobile-friendly” to mark pages that are optimized for mobile use.
As an open source project, AMP offers programmers all around the world the opportunity to develop and implement new applications regardless of the platform. Google, as a supporter of AMP, can therefore expect the framework to spread and establish itself quickly just like the Android mobile operating system. Since the use of the technology is not only reserved to Google due to the open source approach, it will be interesting to see the benefits that other web companies will draw from the framework.
One thing is certain: The Google search results will be much better for mobile Internet users thanks to AMP. Soon, users who are looking for news will no longer have to leave the SERPs in order to read the news. AMP news websites are probably just the beginning. Later on, when online shops will be having AMP speed pages, visiting the homepage could be deemed unnecessary once the customer is able to order and pay through Google.
Until that happens, the AMP technology must first take root.
Related posts:
Ryte users gain +93% clicks after 1 year. Learn how!
Published on Jan 22, 2016 by Irina Hey
:format(avif))
:format(avif) "Ryte Receives 3.1 Million Euros")
:format(avif) "OnPage.org becomes Ryte")
:format(avif) "URL status codes: A complete guide for SEOs")