AMPとは何か
- 静的コンテンツを高速で表示するために既存のHTMLを
拡張制限したもの。 - AMPの仕様を満たすHTMLを記載すると、通信回数や表示方法が最適化されます。
- GoogleがAMPの仕様を満たすHTMLを見つけると、キャッシュして高速配信します。
- もちろん普通のHTMLなのでどこでも表示できます。
なぜAMPか
ページの表示が遅いと、特に以下の問題があります。
- 3秒以上かかると、ユーザーの40%は離脱する。
- 提供者は色んなコンテンツを見てもらえない。
- AdBlockなどで表示速度を上げようとする。
- 提供者の利益が減り、コンテンツの質が悪くなる。
この解決方法の一つは、特定のコンテンツを扱うことに最適化したプラットフォームを作ること。(スマホアプリなどが該当します)
しかし、これはプラットフォーム依存になるし、検索エンジンやURLでのシェアができなくなるなど、オープンではありません。
そこでAMP
普通のWebで高速に表示することが実現できます。
AMPは、ただのHTMLでの高速表示のベストプラクティスを強制したものです。
利便性・マネタイズは損ねずに速度改善が期待できます。
どうやっているか
-
一瞬で画面のベースが表示される
- HTMLやCSSは、高さ・幅などの見た目を後から変えられない制約を掛ける
- 全て最初のレスポンスで返すことで、表示をブロックするものを無くす。
- 途中で見た目が変わりうるような、承認されてないJSは全て許可しない。
-
画像など重たいリソースの扱い
- 外部リソースは全て非同期で読み込み、互いにブロックすることはしない
- AMP JSがコンテンツの優先度から取得する順番を最適化
-
Google検索の結果の表示を更に速く
- GoogleがAMPコードをキャッシュし、ページ開く前にpre-fetch
- 検索結果画面から、SPA的に画面遷移
全ての条件が揃うと、通信のコスト0で、HTMLの表示のロスがある程度なので数10ms〜100msくらいで表示できる勢いだと思います。
できること
HTMLは、最近FormやButtonに対応したので大体はできます。
CSSは表示サイズを都度変更するものでなければ基本的に使えます。
自前のJSは全て許可されていないため、こちらにコード/Linkが上がっているものだけ対応しています。
- 表示用にハードにチューニングされたUI
- アコーディオン表示とか
- Ad
- Analytics
- GTM
- 一部SNSのWidget
- iframeを使えるので、そこでJS書く手もある。
など、静的ページで必要なものは一通り揃っているようです。
Analyticsの設定などはJSONに書いてHTMLに置いておくと後でそれを読みます。
できないこと
- 自前で用意したJSの実行
- 上記スクリプトの同期読み込み
- それぞれが単体で動く必要がある
- 外部CSS読み込み
など、動的なページは作れない。
気をつけること
AMPはグーグルがキャッシュすることがあるので、Cookieや通信されるドメインに注意する。参照
画像やCSSは見た目を変えないようにサイズを固定する必要がある。
作るためのツール
- AMPの仕様を満たしているかチェック
- AMP Cacheに載るかチェック
Vendorに参加する
How can an advertising or technology vendor get involved in Accelerated Mobile Pages?
Please review the contributing guidelines and get in touch via Github.