Basic concepts of AMP
AMP pages are HTML pages with some strict rules designed to maximize load and display speed. These rules include:
- All scripts have to be asynchronous. Scripts will never block page loading.
- All reading of the DOM must happen before any writing. When a read follows a write, any affected styles have to be recalculated. This way, they only have to be calculated once.
- All CSS must be defined in the header. No third-party CSS, except for custom fonts. No style tags in individual elements. The inline stylesheet is limited to 50 kilobytes. The amp.css library is the only exception.
- Images and iframes have to be sized statically. This lets the AMP scripts determine each element’s position and dimensions before downloading the content.
- Animations can use only the Transform and Opacity methods, so that a GPU will be able to perform the work.
There is an exception to many of these rules: You can break them in iframes, but not in the main page. The idea is that once the main page is loaded and laid out, it’s all right to have frames within the page that use slower and more complex functionality.
You can test your HTML for AMP compliance by pasting it into the validator page.
AMP disallows certain tags and provides its own custom elements as a substitute. For instance, the img tag isn’t permitted; you have to use the amp-img tag, which gives the AMP runtime control over image loading. Similarly, there are amp-audio and amp-video tags.
Other tags enable popular layout features, such as amp-carousel and amp-sidebar. A large number of tags are for specific domains; there’s amp-facebook, amp-twitter, amp-hulu, amp-reddit, and lots more.
Should you use AMP?
AMP pages will indeed load and display very fast. This is a major benefit for reaching impatient mobile users with slow connections. A site may have to find the right mix of AMP and non-AMP pages to get the best results. If the mobile audience is your primary target, you should give Accelerated Mobile Pages strong consideration.