AMP is an alternative framework to HTML with some restrictions to ensure reliable page performance. It simplifies the original webpage by stripping away “unnecessary” code and by replacing some of the standard html tags with its own tags (like replacing
<img> tag with
<amp-img> tag). AMP does a lot of other optimizations that helps in reducing the page load time and size. We can categorize these optimizations into following 3 categories:
Page Load Performance Optimizations
To optimize the page loading, AMP makes use of preconnect API that initiates an early connection with servers (which will be used later to fetch resources), which includes the DNS lookup, TCP handshake, and optional TLS negotiation. Pre-rendering is also done to further reduce the loading time of AMP pages; pre-rendering is rendering the amp page before the user actually navigates to that page. During pre-rendering, AMP downloads and renders resources that are above-the fold, but it does not render CPU intensive things. Similarly, when AMP downloads resources, it optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if they are likely to be seen by the user, above the fold, or if the user is likely to quickly scroll to them. It also prefetches lazy-loaded resources (lazy loading is an optimization to defer the resource loading until the user scrolls down to that resource)
AMP pages are also cached at Google’s AMP Cache. An AMP Cache is a proxy-based content delivery network (CDN) for delivering valid AMP documents. AMP Cache caches main html and other resources including images and fonts. It also performs several optimizations and modification on the cached page including removal of data that is invisible or difficult to see, such as certain metadata, conversion of images to smaller and mobile-friendlier image formats, such as converting GIF, PNG, and JPEG format images to WebP in browsers that support WebP, transformation of the image to a lower quality if the request includes the Save-Data header and generation of alternatively sized images to support delivery of responsively sized images.