Web
AMP
SpeeeDay 14

AMP(Accelerated Mobile Pages)ってなんで速いの。

More than 3 years have passed since last update.


そもそも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