モバイルサイト高速化技術 AMP

最近話題になっているAMP(Accelerated Mobile Pages)を勉強してみました。
AMP

AMPページのデモを作ってみたので以下からどうぞ！（スマフォでみてください）

ソースはこちら
https://github.com/underground0930/AMP_TEST

デモはこちら
https://underground0930.github.io/AMP_TEST/

モバイルサイトを爆速に作れる、というgoogleが開発した技術です。
今回のデモは、動画や外部SNS読みまくってるので遅いですが。。
ためしにgoogleで「AMPページ」と検索すると（スマフォで）、対応しているページは
⚡️AMP
が表示されるはずです。そのページは描画が普通のページに比べてかなり早いです。

概要をかいつまんで書くと
・img、video、iframe、formタグ… その他、多くのタグが使用禁止。
・AMP JS以外のjavascript禁止なので、速い(javascriptは使えない)
・外部CSS禁止、inlineのcssのみ,容量は50KB以内、なので読み込み、描画が速い
・要素にwidth,heightを指定しなくてはいけないので、描画が速い
・ページ内の上下でソースの読み込みの優先順位を決めているらしい
・AMP JSは非同期で処理されるので速い
・などなど、、

制約がかなりあるので、高機能なjsで作られているページや演出がほどこされているページには向いていません。
一般的な広告の受託案件ではあまりお目にかからないかも。サービスやってる会社の記事詳細ページとか。
用途は限定はされてしまいますが、今後徐々に広まっていくと思われます。

この記事では具体的なデモを載せるので詳しい技術の説明は、以下のICSさんの記事をみてください。
モバイルページの高速化！ AMPの利点と対応HTMLの作り方

ちなみに、ampページは AMP CDNにキャッシュされてより高速に表示をします。
キャッシュされているかどうかは以下のように、対応したURLを専用のサイトの後ろにパラメータでつければOK
見れればキャッシュされています。

// httpページの場合
https://cdn.ampproject.org/c/【確認したいAMPのURL】
// httpsページの場合
https://cdn.ampproject.org/c/s/【確認したいAMPのURL】

僕が作ったdemoも以下で見れました。

https://cdn.ampproject.org/c/s/underground0930.github.io/AMP_TEST/

AMPページは、静的にコーディングする、というよりCMSなどで通常版のページとAMPのページを出力する。
という使い方をするので、MovableTypeやWordpressで運用しているサイトは一度検討してみるといいかもしれません。このブログもいつか。。

■参考にさせてもらった記事
http://qiita.com/daikiueno/items/e239bb0723bd97c55071
https://www.suzukikenichi.com/blog/how-to-see-your-amp-pages-cached-on-amp-cdn/