Google: Accelerated Mobile Pages / AMP
AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices.
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.
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.
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 it Works
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 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.