AMP stands for Accelerated Mobile Pages. This is a way to construct web pages that will render quickly for static content. When put into action, AMP consists of AMP HTML, the AMP JS library, and the Google AMP Cache. When a page isn't optimized for mobile use, you risk the chance of increased bounce rates—30% of users leave a page if it does not load within 3 seconds. The end product of AMP drastically improves the performance of mobile websites on the internet—so much so that the load time is often appearing to be instant. It relies on existing technologies and works in collaboration with the Internet's biggest names. AMP is not a totally different technique for creating pages—it actually consists of normal HTML with a few restrictions and added specialized tags and does not require a lot of additional work. AMP JS works to make sure that the most important content is loaded quickly and clearly, while third party content such as ads are not at the forefront so that users will see their preferred content as soon as possible. AMP has discovered that content that loads quickly leads to faster reading, and in turn that results in more consumption.

AMP JS

The AMP JavaScript (JS) library uses all of the best performance practices, is managing loading resources, and gives the user their custom tags—all to make sure that your page is rendered as quickly as possible. One of the biggest advantages is that is has every element, even those from external sources, synchronized so that nothing within the page may be blocked from rendering.

Other techniques used for performance include pre-calculating the layout of all elements on page before the resources can be loaded, disabling slow CSS selectors, and sandboxing all iframes.

AMP HTML

This is HTML that has a number of restrictions related to dependable performance and a few extensions for putting together rich content that is more than just the basic HTML. The AMP JS library works to help render AMP HTML pages in a speedy manner, and Google's AMP Cache works to aid the cache of AMP HTML pages.

In short, AMP HTML is standard HTML that incorporates custom AMP properties. Most of the tags in AMP HTML are standard tags, but some of them are replaced to fit with the AMP components. These custom elements work to ensure that common patterns are simple to use.

Google's AMP Cache

Google's AMP Cache is a delivery network that is proxy-based, used to distribute all valid AMP documents. It transmits AMP HTML pages, then caches them, and then automatically improves upon their page performance. When using this AMP Cache, the document with all of its JS files and images will load from the same origin that is using the HTTP 2.0 for the most efficiency. There is a validation system that comes with the cache system that will confirm if a page will work without depending on resources that are external. The validation system will go through a checklist of sorts to affirm that the markup of the page meets the AMP HTML specifications.

A different version of the validating mechanism comes with each AMP page by default. This one is able to log the validation errors right onto the console of the browser when the page is rendered. This lets the user see how the intricate changes in the code will have an impact on the performance as well as the user experience.

How AMP Works

AMP working to create quick loading pages is a combination of a series of elements used to optimize the page.

JavaScript may be used to modify almost any portion of a web page, but it may also be used to block DOM construction and delay the rendering of pages. To avoid the delay of rendering pages because of JavaScript, AMP allows for only asynchronous JavaScript. These AMP pages forbid the use of any JavaScript that has been written by the webmaster, and rather than using regular JavaScript, an interactive page must be comprised of only custom AMP elements. These custom elements can be made up of JavaScript at the core, but they have to be specially designed to make sure that they do not cause any inhibitions in the performance of the web page. Third party JavaScript is allowed within iframes, but it is not able to block rendering.

Resources that are external, like iframes, ads, or images, have to state their size within the HTML of the page so that AMP is able to determine the size of each element as well as its position before all of the resources are downloaded. AMP will load the layout of the page before the resources have been downloaded. AMP works to disconnect the document layout from the resource layout, and just a single HTTP request is required to layout the whole document. Because AMP is optimized in a way that it works around expensive recalculations of layouts within the browser, when the resources load there won't be any re-layouts.

AMP does not allow extension mechanisms to block page rendering. AMP is conducive to extensions for things such as Instagram embeds, lightboxes, tweets, and the like. These things require additional HTTP requests and those requests are not able to block page layouts and rendering. Pages that use custom script have to notify the AMP system that it will need a custom tag eventually.

Third party JavaScript prefers to use synchronized JS loading. Say that there are 5 ads on a page, and each one of those causes 3 synchronous loads—each one of those having a 1 second delay, you will then have 18 seconds of nothing but load time simply caused by JA loading. AMP pages allow for 3rd party JS, but solely in iframes that are sandboxed. When the third party JS is restricted to iframes, they are not able to be blocked from the execution of the main page. Even when they have triggered many recalculations of style, the small iframes have just a little DOM. The time that it takes to recalculate style and layouts is restricted by the DOM size, and iframe recalculations are quite speedy compared to the recalculating of styles and layouts for the page.

CSS deters all rendering, page loading, and it also can make the code a bit fluffy. Using AMP HTML, the only styles that are allowed keep are those that stay inline. Many times, this will remove one or more HTTP requests from the important rendering path, compared to many web pages. Additionally, the inline sheet of style has a threshold of 50 kilobytes. This size is large enough for even the most sophisticated pages, but the webmaster still needs to take care to input the CSS in the proper manner.

Fonts on the internet are large, and because of this, webfont optimization is important to website performance. Generally, a normal page will only a few sync scripts and a couple of external style sheets, the browser will wait a significant amount of time to begin the download of these large font files. The AMP system will not submit to any HTTP requests until the fonts have started downloading. This is possible because all JavaScript in AMP has the attribute of being async and only allows inline style sheets. HTTP requests are not blocking the browser from downloading any of the fonts needed. Typography is an important tool that aids in branding, readability, and design and the optimization of web fonts will be conducive to your overall strategy for performance. It can reduce the total page size, thus contributing to improving overall load times.

Every time that something is measured on a page, it will trigger a recalculation of the style. This is expensive because the web browser have to adjust the entire page layout. Within AMP pages, all of the DOM readings happen before anything is written. This is done to ensure that the maximum of a single recalculation of styles per frame. When a property, such as layout, is changed, it edits the geometry of the website like its height and width. When the layout is edited, the browser needs to check all other elements and reorganize the flow if the page. All of the areas that are influenced by this will need to be recalculated and then these elements will need to be composited back together again.

Running optimizations on GPU is the only way to make sure that they are fast. GPU is familiar with layers, and it knows how to perform actions with them. It is also able to move them, fade them, but it is not able to update the page layout. When this happens, it is up to the browser to update the page layout, and this is absolutely not preferred. CSS related to animation employs rules that makes sure that the animations can be GPU-accelerated. AMP will only allow animation and transitioning on transforming and opacity so the page layout is not required. When the painted parts of of a web page is put together and displayed on screen, this is called compositing. The number of composite layers that need managed and the properties used for animations are the two areas that will affect the web page's performance. For animations, it would be wise to stay with transform and opacity changes to ensure that the AMP will render quickly. When using these two properties, the elements should be on their own composite layer.

AMP has total control of the downloads of resources—it prioritizes loading, meaning that it will load only what is needed and will prematurely fetch the resources that take a long time to load. When an AMP works to download any resources, it will optimize the downloads so that the first resources downloaded are those that are the most important. Advertisements and images are downloaded only if they have a high chance of being seen by the user or if the user is apt to quickly scroll to them. AMP will also prematurely fetch any resources that take a long time to load. These are fetched as soon as possible, while they are loaded as late as possible. Because of this, items will load quickly but the CPU is used only when users are actually seeing the resources.

AMP helps pages to load extremely quickly. Preconnect API is a new system that is used to make sure that HTTP requests are successful as soon as possible. By using this, a web page can be rendered prior to the user explicitly stating that they would like to navigate to it. This page is likely to be ready by the time that the user physically selects on it, allowing for the instant loading of the page. This type of prerendering can be applied to content on the web, but it can likewise take up a lot of CPU and bandwidth. Both of these things can be reduced by using AMP. Resources above the fold are only downloaded with prerendering, and things that could be expensive to the CPU are not rendered. AMP documents can be prerendered to aid in instant loading, the only resources that are above the fold will be downloaded. This also holds true for things like third party iframes, as these can take up a lot of CPU.

Accelerated Mobile Pages (AMP) is an open source software effort. As a way to build pages for static content, AMP helps to ensure that the content is rendered as quickly as possible. There is not a lot of extra effort required to ensure that HTML is indeed AMP HTML. There are only a few extra extensions needed for the rich content, as well as some restrictions that ensure a reliable performance, but if a website is fairly simple to begin with, it may already be in compliance with AMP HTML. With more and more of the population accessing information on the go from their mobile devices, AMP is a step in the right direction.

Author: Garenne BigbyWebsite: http://garennebigby.com

Founder of DYNO Mapper and Former Advisory Committee Representative at the W3C.