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.
Pre-Calculation
- 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.
- AMP JavaScript with other features such as sandboxing of iframes for third-party JS, pre-calculation of page elements before loading, and disabling of slow CSS selectors, maintain best practices for site loading speed.
- 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.
Pre-Rendering
- 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
<link rel=prerender>tag. - 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.
- With all of these techniques in place, AMP documents can be loaded with a small set of HTTP requests: the document itself, custom fonts (if used) and what we call the AMP JavaScript library that implements the AMP custom elements and resource loading.
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.
- AMP JavaScript
Instead of using user-written JavaScript which can delay page rendering, AMP JS is asynchronous and uses optimized, custom AMP elements.
- 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.
Resources