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.
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 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.
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.
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.
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.
Create, edit, customize, and share visual sitemaps integrated with Google Analytics for easy discovery, planning, and collaboration.
Sign up for our free 14-day trial.
*No credit card required.