そもそもAMPってなんだ？
ACCELERATED
MOBILE
PAGES
PROJECT
Google主導のモバイルページ高速化プロジェクト。
AMP仕様にそってWebページを記述することでモバイルページを高速化させようというもの。
モバイルページということもあって、描画速度そのものだけでなく通信データ量の削減も重視されている。
2016年2月にはGoogle検索が対応予定らしい。Twitter,LINE等も追って対応するとか。
3つの構成要素
AMP HTML
拡張されたHTML。等、AMP specに従ったHTML
AMP JS
AMP HTMLで記述されたコードを解釈し、レンダリングを行うJavaScriptライブラリ。各AMP要素は非同期に描画される。
AMP CDN
AMP JSを配信するCDN。
AMPコンテンツを発信する全てのページはこのCDNからAMP JSを読み込むので、キャッシュが効く。
使い方は割愛。この記事では高速化の仕組みについて書く。
何処で速くなるのか
AMP JS以外のJavaScriptを認めない
ほとんどのJavaScriptコードはdocument.writeと同期する為負荷の原因になる。
AMP JS以外のJavaScriptを許容しないことで高速化を図る。
全ての外部リソース要素の縦幅を明示的に固定させる
<img src='piyo.png' width='200' height='200' />
等、サイズを固定することでスタイルの再計算・再描画の負担を減らす
リソース読み込みの優先順位付け
ページの縦幅が長く、ある程度スクロールしないと表示されないような画像ファイル等は、読み込みの優先度が低く設定される。
最適化されたプリレンダリング
ページを開く前に事前にレンダリングされる仕組み。
<link rel=prerender>では処理が重くなるため、CPU負荷・通信量が比較的少ないもののみプレレンダリングを行うように最適化される。
その他最適化手法
参考文献
ACCELERATED MOBILE PAGES PROJECT - https://www.ampproject.org/
ampproject/amphtml[GitHub] - https://github.com/ampproject/amphtml
Pre Render[Qiita] - http://qiita.com/Jxck_/items/71929a11dd7ddac0e22e
Why AMP HTML does not take full advantage of the preload scanner - https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e#.szijeieji