What is AMP(Accelerated Mobile Pages)

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

AMP HTML

 
   
   
   
   
   
 
 Hello World!

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.

AMP JS

The AMP JS library implements all of AMP's best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page.
Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.
Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
To learn more about not just the optimizations but the limitations, read the AMP HTML specification.

Google AMP Cache

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.
The cache also comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification.
Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

Click Away
Block Ads
Descrese Bouce Rate (40 % after 3 Seconds)
Native Apps

How AMP Works

The following optimizations combined are the reason AMP pages are so fast they appear to load instantly:
If you'd rather listen than read, the following video by AMP engineering lead Malte Ubl gives a similar overview than the following paragraphs.

• Allow only asynchronous scripts
• Size all resources statically
• Don’t let extension mechanisms block renderingKeep all third-party JavaScript out of the critical path
• All CSS must be inline and size-bound
• Font triggering must be efficient
• Minimize style recalculations
• Only run GPU-accelerated animations
• Prioritize resource loading
• Load pages in an instant
• Help make AMP faster

AMP Design Principles

These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions. 

• Don’t design for a hypothetical faster future browser.
• Don’t break the web.
• Solve problems on the right layer.
• Only do things if they can be made fast.
• Prioritise things that improve the user experience – but compromise when needed.
• No whitelists.

AMP HTML Specification

AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics.
Being a subset of HTML, it puts some restrictions on the full set of tags and functionality available through HTML but it does not require the development of new rendering engines: existing user agents can render AMP HTML just like all other HTML.

 

 
   
   
   
   
   
   
   
   
   
 
 
   

Sample document

   

      Some text
     
   

            type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
   
 

Required markup

AMP HTML documents MUST

• start with the doctype . 🔗
• contain a top-level tag ( is accepted as well). 🔗
• contain and tags (They are optional in HTML). 🔗
• contain a tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. 🔗
• contain a tag as the first child of their head tag. 🔗
• contain a tag inside their head tag. It's also recommended to include initial-scale=1 (1). 🔗
• contain a tag inside their head tag. 🔗
• contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag. 🔗
• (1) width=device-width,minimum-scale=1 is required to ensure GPU rasterization is enabled.

Resource-  www.ampproject.org