AMP stands for Accelerated Mobile Pages led by Google to make faster mobile pages. So, the point is what makes pages faster. There are many things which led to this but we will discuss about one of them i.e. Pre-Calculation and Pre-Rendering.
We have discussed introduction in earlier post.
- The pre-calculation of the layout of every element on page before resources are loaded which means browser already knows the size of page element before page loaded.
- All external resources must provide dimensions in their HTML so that AMP can determine the size and position on the page before downloading.
- That’s why it is necessary for ex- to set height and width of images in page, which helps browser to calculate the size of page element.
- The aim of AMP is to serve instant loading. Pre-rendering is the concept behind this which means that the content which is likely to be viewed by the user is loaded as a background process and is served when a user specifically asks for it. So in AMP pages the document rendered before user express its intention by tap,click that they want to see the document.
- As AMP doc says, AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the
- AMP HTML added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering.
AMP Consists Of 3 Components:
- AMP HTML
It takes basic HTML and adds custom tags, properties, and restrictions that improve performance and make implementation easier.
- Google AMP Cache
Uses a proxy-based CDN to deliver all AMP documents. It automatically caches and optimizes AMP-enabled pages, thereby improving page performance.