Today, people consume tremendous amount of information on their smartphones. However, loading websites on our mobile devices is a slow and frustrating experience for many of us. What if there was an option to optimize website content to suit the mobile web? Articles, sites, and blogs would be loaded instantly! Introducing AMP or Accelerated Mobile Pages—a technology that is open source, free of cost, and freely available to everyone under the Apache License.

Understanding AMP

Fruit of the AMP Project, AMP includes three main components, which are:
  • AMP HTML
  • AMP JS
  • Google AMP Cache
AMP HTML
This is regular HTML extended with some additional properties. AMP HTML adds some of its own custom HTML tags to help implement common patterns in a faster way.
AMP JS
This is the library that implements all the best performance practices of AMP to ensure high-speed rendering of webpages.
Google AMP Cache
This is a Google CDN network for delivering AMP documents. It fetches AMP pages and caches them to improve performance.

Trying Out AMP

AMP HMTL is not a completely new technology. It is built over the existing HTML, CSS, and JS. However, it restricts certain features of the current implementations of HTML, CSS, and JS to achieve the required performance. The following sample shows how to create an AMP compliant HMTL file. 
<!doctype html>
<!-- The tag below indicates that this is an AMP file. `<html amp>` works too. -->
<html <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="⚡" src="https://s.w.org/images/core/emoji/72x72/26a1.png">>

<!-- #### HEAD -->
<head>
<!-- The charset definition must be the first child of the head tag. -->
<meta charset="utf-8">

<!--   AMP HTML files require a canonical link pointing to the regular HTML. Point to same file if a regular version doesn’t exist. . -->
<link rel="canonical" href="<%host%>/Introduction/Hello_World">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--   The AMP boilerplate. -->
<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>
<!--   CSS must be embedded inline. -->
<style amp-custom>
h1 {
color: red;
}
</style>
<!-- The AMP runtime must be loaded from the last element in the head. -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<!-- #### Body -->
<body>

<h1>Hello World!</h1>

<amp-img src="/img/amp.jpg" width="1080" height="610"
layout="responsive"></amp-img>

</body>
</html>
You will see that most of the tags used in the sample are regular HTML tags. However, AMP does restrict some parts of HTML, CSS, and JavaScript. For instance, the image tag cannot be used in an AMP file. So instead, we have to go in for an enhanced AMP HTML tag. To validate your AMP page, check out the guide on the AMP Project website.

OK, So How Exactly Does AMP Make Pages Fast?

There is a big set of carefully designed optimization techniques that are fundamental to the creation of AMP.
  1. JavaScript delays page load. So, AMP pages do not allow user-written JavaScript. Instead, AMP provides custom AMP elements to implement most commonly used JS activities.
  2. External resources, such as images, need to specify their size in the HTML. This helps AMP to know the size of these resources beforehand and create the entire page layout in a single HTTP request. In effect, it avoids expensive style recalculations and improves performance.
  3. AMP allows only inline CSS in order to reduce HTTP requests and limits the CSS size to 50KB to reduce redundant unwanted styles from being written.
  4. There is no blocking for downloading web fonts and they are downloaded before any other HTTP requests are processed.
  5. AMP reads all of the DOM elements before writing them. This way, it minimizes style recalculations and any overheads associated with it.
  6. AMP allows only GPU accelerated animations. This way, it reduces the performance lost by animations that are executed by the browser instead of GPU.
  7. AMP prioritizes the resource downloads by downloading only what’s needed. It, however, processes them in advance. It keeps the resource with it and shows it only when it's needed. For instance: During a page load, images are downloaded only if they are likely to be seen by the user or if the user is likely to scroll down.

What About Browser Support?

According to the AMP Project website, AMP supports the latest two versions of browsers such as Chrome, Firefox, Edge, Safari, and Opera. This includes desktop, phone, tablet as well as the web view version of these browsers.

Alright, What Else Should You Know?

If you are interested, you could participate and contribute to AMP. To understand how AMP unfolds and to know the future plans, you can check out the roadmap. As for success stories:
  1. WashingtonPost increased returning users by more than 23% with 88% improvement in load time. It has also improved its reader retention rate.
  2. Gizmodo saw 3x improvement in load time and a 50% increase in the impressions per page view.
  3. At Wired.com, the clickthrough rates (CTR) for ads improved by 63%.
You can find more in the AMP Project website.

To Sum Up

AMP has proved to be a game-changer for the publishing industry and things will only get better with coming releases. It might be a good strategy to be an early adopter and implement AMP in your static content platform as well. As they say, the early bird catches the worm.
No Image