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.
Speed matters and instant is the ideal. Research has shown higher bounce rates associated with slower-loading web pages. Using the AMP format will make it far more compelling for people to consume and engage with more content. But this isn’t just about speed and performance. We also want to promote enhanced distribution so that publishers and advertisers can take advantage of the open web’s potential for their content to appear everywhere quickly -- across platforms and apps -- which can lead to more revenue.
Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview.
AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users. AMP developers can use a rich and growing library of web components that offer the ability to embed rich media objects like video and social posts, display advertising, or collect analytics. The goal is not to homogenize how content looks and feels, but instead to build a more common technical core between pages that speeds up load times.
In addition, AMP files can be cached in the cloud in order to reduce the time content takes to get to a user’s mobile device. By using the AMP format, content producers are making the content in AMP files available to be cached by third parties. Under this type of framework, publishers and advertisers continue to control their content, but platforms can easily cache or mirror the content for optimal delivery speed to users. Google has provided the Google AMP Cache that can be used by anyone at no cost, and all AMPs will be cached by the Google AMP Cache. Other companies may build their own AMP cache as well.
In summary, the goal is that the combination of limited technical functionality with a distribution system built around caching will lead to better performing pages, and increased audience development.
We recently built entire website for Derek Smith Law Group. One of the top ranking Attorneys/Lawyers in New York City, New Jersey, Philadelphia and Miami. They are expanding to new locations. Please check out the website at https://discriminationandsexualharassmentlawyers.com
By using the AMP format, content producers are making the content in AMP files available to be crawled, indexed & displayed (subject to the robots exclusion protocol) and cached by third parties.
AMP was designed with responsiveness in mind, to work across all screen sizes. However, some features for third-party platforms (e.g., Google's Top Stories carousel) may only be designed for the mobile experience. Check with the third-party platform for how they use AMP. For more information about mobile and desktop AMP pages, see Paul Bakaus' blog post on About that ‘mobile’ in Accelerated Mobile Pages.
In general we support the latest two versions of major browsers like Chrome, Firefox, Edge, Safari, Opera and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers.
Beyond that, the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.
In particular, we try to maintain "it might not be perfect but isn't broken"-support for IE 11, iOS 8, the Android 4.0 system browser and Chrome 41.
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.
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.
THINK "WiSE" Web Search Engineering
Signup for our mailing list.