by 
Two weeks ago, I’ve participated in a hackathon and the project I worked on was about AMP. While I was familiarizing myself with AMP concept to do the hacks, I took some notes which I think is worth sharing. Following is the fundamental of AMP.
Accelerated Mobile Pages (AMP), is an open-source project with a aim of serving static content very fast on mobile devices.
Basically AMP consists of three main components:
- AMP HTML, is a HTML with some restrictions to add reliability and performance. Additionally, it has some custom tags such as amp-img.
- AMP JS, makes all the resources loading from external sources to be asynchronous. It also pre-calculates of layout of elements before resources to load and disables slow CSS selectors.
- Google AMP Cache, is a proxy-based CDN that delivers all valid AMP documents. It fetches AMP pages, cache them and improves their performance automatically. This element is also does validation of AMP documents.
Besides Google AMP Cache, there is an internal validator that throws any errors in browser consoles.
Why AMP is so fast?
- AMP allows only asynchronous JavaScript codes. It does not allow user-written script. As a result, interactive page features can be handled in AMP elements which usually have JS codes underneath but does not expose to users. However, it allows third-party JS in iframes, it does not block the main page rendering.
- All external resources should mention all their sizes in advance to AMP, as a result the frame would be drawn prior to load of the resource which does not block DOM.
- It sandboxes all the JS calls to iframe, so it does not block the page rendering.
- Only allows inline CSS.
- The AMP system declares zero HTTP requests until fonts start downloading. This is only possible because all JS in AMP has the async attribute and only inline style sheets are allowed; there’s no HTTP requests blocking the browser from downloading fonts.
- The rules for animation-related CSS ensure that animations can be GPU-accelerated.
- It prioritizes resource loading, knows what resources have to load first and also prefetches lazy-loaded resources.
- Pre-rendering the pages, with this, a page can be rendered before the user explicitly states they’d like to navigate to it; the page might already be available by the time the user actually selects it, leading to instant loading.
Browser & platform support
AMP supports latest two versions of the following browsers:
- Chrome
- Firefox
- Edge
- Safari
- Opera
Supports are in phone, tablet and web version of these browsers.
Wide range of platforms (i.e. WordPress) are supported, full list can be found here.
How to AMPtize your WordPress website?
Some WordPress plugins are available to make WordPress sites AMP friendly. They are easy to setup and configure. After configuration, need to wait for few weeks, months for Google to cache the content. The technical details of having an AMP friendly WordPress site will be explained in the next post.
