After a redevelopment, my website (byvoid.com) has supported AMP now. Specificically, when you open any article on byvoid.com on a mobile phone, such as this one, you will see the AMP version. The AMP page loads several times faster than the desktop version and the original mobile version, and requires less traffic, mainly thanks to the dynamic image loading.
AMP (Accelerated Mobile Pages) is an open source project and standard supported by Google. It started in 2015. The name of this project suggests the purpose of making mobile pages to load faster and improve the user experience on mobile devices. As we all know, the impact of loading time on mobile to users is huge, because mobile devices are single-paged. Users lose their patience in milliseconds, while the page is loaded in many seconds. Many studies have shown that XX% more users will simply close the page if it can not be loaded in one more second (I don't remember the number).
AMP includes 3 aspects:
- AMP HTML: Only a subset of HTML tags are allowed, with additional tags like
amp-video, etc. These tags can ensure pages to be loaded smoothly because they do not incur any re-rendering which caused difficulties for users to read.
- AMP JS: Ensure that all resources are loaded asynchronously. Asynchronous scripts are not allowed on the critical path of the page rendering.
- AMP Cache: This is the most critical part: free content distribution network (CDN) provided by Google. All AMP files are cached, including images.
AMP pages are in addition to the original desktop or mobile pages, rather than to replace them. Therefore AMP pages are paired with the existing "canonical pages". For example, inside this page's HTML
head tag we have the following label:
<link rel="amphtml" href="/blog/byvoid-com-amp-enabled?amp=1">
Corresponding to the pair of AMP page,
head tag contains:
<link rel="canonical" href="/blog/byvoid-com-amp-enabled">
The canonical page is the existing non-AMP page. It can be either a desktop version or a mobile version.
Of course, the entire website can have only AMP pages. This is called self-canonical AMP. In this case, we only need to have
link tag pointing to itself, e.g.
<link rel="amphtml" href="the same url">.
Google Search engine indexes the AMP pages along with the paired canonical pages. If contents of the pair are consistent, Google Mobile Search will display AMP links, which are loaded very instantly. The instant loading of AMP pages is currently also supported by Twitter and Pinterest.
Facebook also provides a similar technology, called "Facebook Instant Articles". Its effect is like AMP but in a different way.
China's most popular instant messenger "Wechat" and micro-blog "Weibo" are also similar to Facebook.
Unfortunately, these technologies can only be used in their "walled gardens". AMP is a real open source project and standard. Google only helps you cache AMP pages, and use the cache to accelerate page loading when users click on Google search results only.