Accelerated Mobile Pages (AMP)とは、ページを低速化するコンポーネントを削減することによりすべてのデバイスやプラットフォームにおける表示速度とユーザー体験を向上するために開発された技術です。
AMPページは、通常のページと比較してはるかに速くレンダリングすることができます。元々はニュースやブログ記事のために開発されたAMPはいずれ、その他の種類のコンテンツやプラットフォームでの利用が拡大していくことでしょう。
Googleは、AMPページ向けに、モバイル検索結果に表示されるニュースAMPカルーセルを開発しました。
AMPページは通常、別のURLにある既存ページのコピーであり、AMP HTMLやAMP HTML, AMP JS, そして一部はCSSで構成されています。
AMPの特徴
読み込み時間を高速化するために、AMPはHTMLページを削減して、コンテンツをGoogleのサーバーにキャッシュして、Googleのネットワーク経由でコンテンツ配信をしています。また、Googleはユーザーが訪問する前に検索結果のAMPページをプリレンダリングして、ほぼ瞬時の読み込みを実現しています。
非同期読み込みはコンテンツを早く読み込む一方で、srcset属性はデバイス毎に適した画像の解像度の取得をサポートしています。
効率的なリソースのダウンロードを採用することで、AMPはビューポート外のコンテンツをダウンロードする前に、まずビューポート内のコンテンツをダウンロードします。
これらはすべてGoogleアナリティクスでトラッキングすることができます。
さらに、AMPページのインタラクティブ性を向上するため、AMPはamp-iframeやamp-lightboxを含む多くの追加コンポーネントを活用します。
コンポーネント一覧はampbyexample.com（英語）でご確認いただけます。
AMPの実装方法
AMPはサーバーに関する動作環境や制限なく、基本的なHTMLページに実装することができます。
- <html ⚡ >に雷マークのアイコンを使用して、クローラーにページがAMPページであることを通知する
- AMP JSファイルをヘッダーに追加する：<script async src=”<a href=”https://cdn.ampproject.org/v0.js”>https://cdn.ampproject.org/v0.js</a>“</script >
- 主要な正規化ページ上でrel=”amphtml”を使用してAMPに相当するページを指定する：
- 制限：amp-iframe以外でのカスタムJavaScrip使用不可、ページ上のスクロール要素使用不可、スタイルシートは最大50KB
- サードパーティのインタラクティブコンテンツの埋め込みにiframeを使用できる
- 埋め込まれたiframe内のコンテンツはHTTPSでのホスティングが必要
- 動画コンテンツの場合、iframeのコンテンツが読み込まれる前に表示されるプレースホルダを使用していない限り、iframeをビューポートの上位75%以内またはページの600px以内に配置しないことが推奨されている
- AMPで許可されているアニメーションとトランジションはtransformとopacityのみ
- ユーザーをAMPページへリダイレクトする処理は行わないこと。AMPページへは直接リンクを使用する必要があり、ページ入れ替えはGoogle検索結果でのみ行われる。これは個別のAMPサイトを別途作成しなければならいことを意味する
- AMPの実装を全て管理できるWordPressの公式AMPプラグインがある
- There is an official WordPress AMP plugin that completely handles the amp implementation for you
- AMPの実装はURLに“#development=1”を追加してChromeのコンソールを開くことと、サーチコンソールのAccelerated Mobile Pagesレポートでテスト可能。その後GoogleはAMPページのエラーの通知を送信する
懸念点
AMPページはメインのバージョンとは別ページであるため、追加でのクロールが必要となり、その結果サーバーへさらなる負荷が発生します。サイト全体にAMPを実装する場合、Googleがサイトのクロールに使う時間が２倍になる可能性があります。
AMPの実装は技術的にはサイトにページを増やすことを意味しますが、これらのAMPページはGoogleにインデックスされないためページ数には含まれません。
AMPサイトの総合的な価値はまだよく知られていません。現在、AMPカルーセルに含まれているサイトの数は限られており、報告されているトラフィック量は比較的控えめです。
Googleが検索結果へのAMPページの表示を増やすことが考えられますが、より多くのサイトがこの機能を利用するようになることを想定すれば、得られる利益は薄まる可能性があります。
AMPの例とその他の文献
こちらのサイト（英語）で、AMPで実現できる内容の実例を紹介しています。
AMPページの例（英語）：
検索結果上のAMPページの例（英語）：
https://search.googleblog.com/2015/10/accelerated-mobile-pages-in-search.html
