LoginSignup
8

More than 5 years have passed since last update.

AMPについて

Last updated at Posted at 2017-01-27
1 / 10

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は見た目を変えないようにサイズを固定する必要がある。

Screenshot 2017-01-23 00:08:30.png


作るためのツール

  • 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.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8