So how do different elements of the accelerated mobile page work to make the pages load more quickly? Here is a rundown of those elements.
Accelerated Mobile Pages uses a slimmed down version of HTML with baseline performance guarantees. While AMP HTML does not require the use of new rendering engines, it bans the use of certain tags. Tags such as iframe, embed and object are all excluded. In addition to this, all scripts with the exclusion of JSON and the script that loads AMP are likewise banned. HTML5 multimedia tags such as img, video and audio are replaced with the corresponding AMP tags, amp-img, amp-video, and amp-audio. AMP HTML documents require no special configuration and they can be served from a web server from just like any other HTML doc.
The creators of accelerated mobile pages want developers to continue to work with CSS. While CSS can function in accelerated mobile pages, there are, of course, some restrictions. Style sheets must not exceed than 50 KB in size since Google believes that this is enough for a nicely-designed document. In addition to this, they must all be done with an inline sheet. AMP will not support externally linked sheets or element-level inline sheets. Finally, CSS is loaded only with a special extension.
Multimedia is handled differently in AMP than on regular web pages. Images, for example, must have explicit width and height information and must be accompanied by the amp-img tag. When the width and height of images are known beforehand, the page can designate a space for them to be displayed. This helps the page to keep its layout consistent and prevents it from jumping as it makes adjustments mid load. For animated gifs, on the other hand, you will utilize the amp-anim extended tag. Custom tags are also needed for videos, while a designated tag is set aside for YouTube videos.
Accelerated mobile pages promise to speed up the traditionally slow load times of ads on mobile pages. With many users turning to ad blockers to shorten the load time, AMP promises to restore that lost loading time to users and publishers alike. Many of the most popular ad networks such as Amazon A9, Google AdSense and Google DoubleClick have already adapted the AMP ad components into their frameworks.
Many may assume quite wrongly that the streamlined AMP framework has no place for analytics. However, the opposite is in fact true. In AMP analytics have been streamlined. Therefore instead of too many analytics slowing down site performance, it chooses one analytic tool that will report the data as many times as needed.
So how can you prepare?
Clearly, the rules for AMP are incredibly strict. If your page violates any of the rules it will be deemed invalid. Publishers must become familiar with how this new HTML is structured, including its many no-nos. AMP HTML tags must be written in the correct places and the correct orders. The good news is that there are tools available that can validate your AMP pages for you. Both in Google Chrome's developer tools and on the AMP project website you can have your pages verified. The tools will highlight all of your pages violations.
Accelerated Mobile Pages are a very new development. While some big publishers have begun adopting the guidelines, it is still too early to know how quickly it will catch on or how widespread its use will be. Yet, what AMP highlights is how important it is to be accessible on all platforms. It also highlights the importance of not alienating readers. AMP can go a long way towards shortening load times and helping publishers' pages get the views they desire. Yet, is not a strategy that publishers should employ across the board. Pages meant for desktop access should be kept as such, however pages that are designated for mobile access should be Amped.