Accelerated Mobile Pages (AMP)
AMP – Accelerated Mobile Pages – is an Open Source framework designed to speed up load times for mobile internet users.
This article explains what AMP is, looks at why and how it developed, explores its benefits for different stakeholder groups and runs you through how to bring your website up to speed for AMP.
What is AMP?
AMP stands for “Accelerated Mobile Pages.” It is an Open Source Framework that was launched as a joint initiative by Google and several other technology and publishing companies. With AMP, it is possible to create simple mobile websites that load almost instantly. Characteristic features of AMP are reduced JavaScript and CSS elements, and the use of a Content Delivery Network.
Why AMP?
The number of searches made from mobile devices has overtaken desktop. The Open Source Framework dubbed “Accelerated Mobile Pages” (AMP) was created with one main goal: to create fast load times for mobile users. This was a reaction to the increasing demand for short load times – an issue that had been repeatedly raised by publishers and enterprises.
The initiative was launched with the aim of establishing a system that would benefit all stakeholders. Advertisers, publishers and users should all profit from AMP.
How the AMP project developed
The “Accelerated Mobile Pages Project” was launched in 2015 by a group of companies including Google, WordPress and the software giant Adobe. From the outset, several international news portals have also been involved in the AMP project, with some of the first websites implementing AMP being The Guardian (UK), The Washington Post and Buzzfeed (US), the Frankfurter Allgemeine Zeitung and Die Zeit (Germany), and El Pais (Spain). Twitter and LinkedIn have also been involved in AMP since the beginning as technology partners.
Today, almost all large online media use AMP technology. They have recognized the great value to be gained from quick-loading mobile websites. With the help of the right plugins, WordPress users can also publish over AMP, though there is not yet an eCommerce solution for AMP.
Why AMP is a good idea
In the past decade, the smartphone has overtaken the desktop PC in many industries and countries, becoming the primary device people use to go online. We use our mobile phone to look for a nearby restaurant, we shop on our phones or we read the news on our phones on the train to work. It is particularly important for mobile users that websites load quickly. The critical cut-off point is said to be at three seconds. If a website takes any longer to load, then the majority of mobile internet users will bounce and leave the page.
AMP is a good idea because it is specifically designed to create websites that load as quickly as possible on mobile devices.
Problem: Web…sites… that… load… too… slow…ly
How quickly web content loads depends on the speed of the connection and the file size of the website. Both aspects are related. Some pages will load slowly even if the connection speed is fast, if the volume of files to be loaded is too large. Similarly, even a technically optimized page may load slowly if the connection is too slow.
Solution: AMP
AMP cannot influence the available capacity of an internet connection, so the technology focuses on the aspect of load times it can impact. AMP creates the best conditions for a mobile website to load quickly, even when data transfer is slow. To do this, it limits the number of JavaScript and CSS elements required, ensuring that only a few resources must be loaded in order for a page to be viewed.
The key to AMP’s short load times is primarily in the reduction of files that have to be loaded. Another important factor is a proxy server that keeps a cache of the target page ready. This content is transmitted over a Content Delivery Network, which has the advantage that the page can always be constructed at the same speed, wherever the user is accessing it from.
AMP Source Code
Generally speaking, all servers can read AMP Source Code because the code is based on well-known scripts. The following three elements are characteristic of AMP:
- AMP HTML: The HTML Code of an Accelerated Mobile Page is limited to the essentials. When the page is loaded, only one http request is sent.
- AMP JavaScript: AMP makes use of asynchronous JS Code. This allows the site to start building before all JS elements have been loaded.
- AMP CDN: A cache of every AMP website is saved on various servers worldwide. This content can be brought to the user via the shortest path possible using a Content Delivery Network. Another advantage of a CDN is that the functionality of the page is continually checked. This help to avoid errors.
Which changes have to be made to HTML code to implement AMP?
There are a number of specific features a website’s HTML has to have in order for it to run over AMP. Any audiovisual media content has to be marked with special AMP tags, for example amp-img, amp-video, amp-audio or amp-iframe. An example of how an image can be inserted into the source code of a page using AMP is:
<amp-img src=”myimage.jpg” alt=”what you can see on the image” height=”200″ width=”300″></amp-img>
Additionally, the following tags have to be included on every page so that it can be correctly displayed using AMP:
- Document type: <!doctype html>
- Top level tag: <html>tag oder <html amp>
- <head> and <body> tags
- Canonical Tag in Header: <link rel=”canonical” href=”http://www.mynormalURL.com” />
- Coding: <pre><meta charset=”utf-8″></pre> in Header
- Viewport: <meta name=”viewport” content=”width=device-width, minimum-scale=1″>
- Reference to AMP CDN: <script async src=”https://cdn.ampproject.org/v0.js”></script>
- Note on Opacity: <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
The advantages of AMP for different stakeholder groups
As mentioned above, AMP was launched with the grand aim of benefiting everybody: Advertisers, publishers and users.a
- Advertisers: Advertisers can use AMP with a variety of different advertising formats. Advertising content loads asynchronously, meaning that the user experience is not disturbed by the ads that prevent the page from loading.
- Publishers: Publishers profit from a prominent placement of AMP websites in the news environment. The high usability of mobile-optimized websites also contributes to positive user signals.
- Users: Websites using AMP are perfect for users. They do not have to wait long for pages to load and they can even trust in high performance when they are browsing over a slow internet connection.
AMP and the Mobile-First Index
AMP is just one approach to optimizing websites for mobile devices. An awareness for the importance of mobile optimization – not just amongst the SEO community – has grown, particularly since a Google Update in 2015 that was specifically aimed at encouraging websites’ mobile-friendliness. The search engine Google has since gone further towards a mobile-first approach with its announcement that its mobile index is – at some point – going to become the primary index for the Google search results. This is only going to increase the importance of AMP.
Besides AMP, there are other mobile optimization strategies, including Responsive Web Design, or the use of separate mobile URLs with Progressive Web Apps.
